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 neveropen</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 neveropen</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 neveropen";             });         </script>     </body> </html> |
Output:
On mouseover:
On mouseout:
