D3.js selection.on()函数

D3.js 中的d3.selection.on()函数用于向元素添加特定的事件侦听器。事件可能是事件类型的字符串单击、鼠标悬停等。

句法：

selection.on(typenames[, listener[, options]])

参数：该函数接受上面提到的两个参数，如下所述：

• Typename Listener：为点击、提交等字符串事件类型。
• 选项：这是一个可选对象，可以说明听者的特殊特征。

注意：如果未指定侦听器，则它将返回当前为特定元素分配的事件。

返回值：此函数返回对象。

下面的示例说明了 JavaScript 中的 D3.js selection.on()函数：

示例 1：

HTML

    
        
        
        D3.js selection.on() Function
    
    
        li {
            background-color: green;
            color: #ffffff;
            width: 50px;
            margin-bottom: 5px;
            padding: 20px;
            height: 40px;
        }
        li:hover {
            cursor: pointer;
            opacity: 0.8;
        }
    
    
        
            Geeks for geeks
            GEEKS FOR GEEKS
        
        
        
        
        
        
            let li = d3.select("li");
            let x = li.on("click", () => {
                console.log("Clicked");
            });
        
    

输出：

在点击框之前：

点击框后：

示例 2：

HTML

    
        
        
        D3.js selection.on() Function
    
    
        li {
            background-color: green;
            color: #ffffff;
            width: 100px;
            margin-bottom: 5px;
            padding: 20px;
            height: 50px;
        }
        li:hover {
            cursor: pointer;
            opacity: 0.8;
        }
    
    
        
            Geeks for geeks
        
        
        
        
        
        
            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";
            });
        
    

输出：

鼠标悬停时：

在鼠标移出时：