The d3.selection.on() function in D3.js is used to add a particular event listener to an element. An event may be a string of event type click, mouseover, etc.
Syntax:
selection.on(typenames[, listener[, options]])
Parameters: This function accepts two parameters as mentioned above and described below:
- Typename Listener: It is a string event type such as click, submits, etc.
- Options: This is an optional object that may tell about the special characteristics of the listener.
Note: If a listener is not specified then it returns the currently assigned event for the particular element.
Return Values: This function returns the object.
Below examples illustrate the D3.js selection.on() function in JavaScript:
Example1:
HTML
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
path1tent="width=device-width,
initial-scale=1.0"/>
<title>D3.js selection.on() Function</title>
</head>
<style>
li {
background-color: green;
color: #ffffff;
width: 50px;
margin-bottom: 5px;
padding: 20px;
height: 40px;
}
li:hover {
cursor: pointer;
opacity: 0.8;
}
</style>
<body>
<ul>
<li>Geeks for geeks</li>
<li>GEEKS FOR GEEKS</li>
</ul>
<script src=
</script>
<script src=
</script>
<script>
let li = d3.select("li");
let x = li.on("click", () => {
console.log("Clicked");
});
</script>
</body>
</html>
|
Output:
Before clicking on the box:
After clicking on the box:
Example 2:
HTML
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
path1tent="width=device-width,
initial-scale=1.0"/>
<title>D3.js selection.on() Function</title>
</head>
<style>
li {
background-color: green;
color: #ffffff;
width: 100px;
margin-bottom: 5px;
padding: 20px;
height: 50px;
}
li:hover {
cursor: pointer;
opacity: 0.8;
}
</style>
<body>
<ul>
<li>Geeks for geeks</li>
</ul>
<script src=
</script>
<script src=
</script>
<script>
let li = d3.select("li");
let x = li.on("mouseover", () => {
let li = document.querySelector("li");
li.innerHTML = "mouseOver event";
});
// When cursor moves out of the li tag
x = li.on("mouseout", () => {
let li = document.querySelector("li");
li.innerHTML = "Geeks for geeks";
});
</script>
</body>
</html>
|
Output:
On mouseover:
On mouseout: