Question

有没有办法为某种类型的html元素添加某种侦听器？例如，如果我想在用户点击任何 p元素

时调用函数

Answer 1

将事件监听器添加到window / document / document.body并检查元素的类型及其父类型，因为如果您有<span>内的<p>，单击该范围不会触发该段落中的点击。

document.addEventListener("click", function (eventArgs) {
    var target = eventArgs.target;
    var elementToLookFor = "p";
    while (target !== null) {
        if (target.tagName.toLowerCase() === elementToLookFor) {
            // Do magic stuff with the paragraph
            console.log(target);
        }
        target = target.parentElement;
    }
});

这种技术称为“事件委托”。

编辑：请注意，您无法从上面的循环中提前返回。如果你有嵌套的段落，即

<p>
    Hey,
    <p>there!</p>
</p>

提前返回只会调用内部段落的事件处理程序，而你说你希望在每个段落上调用处理程序，这就是为什么你需要遍历所有的元素的祖先。

Answer 2

最简单的答案是使用addEventListener()，如果你想要一个特定的html标签，就像我想要的那样my question那么你会找到答案那里也可以解释它添加这个

<script>
    document.addEventListener("click", function(e){
   //your desired nodeName like : DIV , SPAN , LI etc
       if(e.target && e.target.nodeName== 'DIV')
       //add a function below to trigger 
       {alert('bingo')}
    });

</script>

到文档的末尾顺便说一下，不要忘记使用大写的nodeNames或只是在它之前放一个toLowerCase()。干杯：）

Answer 3

我假设你正在寻找这些代码：

var paras = document.getElementsByTagName("p");

// Loop through elements. 
for(var i = 0; i < paras.length; i++) {
    // Add listener.
    paras[i].addEventListener("click",
        function() { 
            // Execute function.
        }, false);
}

Answer 4

我只需选择页面上的所有元素，并在其上添加eventListeners，如下所示：

function addListeners(elementType, eventType, callback) {
    Array.prototype.slice.call(document.querySelectorAll(elementType)).forEach(function (el, i) {
        el.addEventListener(eventType, callback, false);
    });
}

上面我们使用querySelectorAll选择所有想要的元素，将其转换为数组（如果你使用es6，你可以使用Array.from）然后我们遍历数组并添加监听器想回调。

以下是一个例子：https://jsfiddle.net/a7en4d4s/

Answer 5

看看这个JSFiddle，看看它是否适合你

<span>Click Yes</span><br/><br/>
<span>Click No</span><br/><br/>
<a>Clicked: <b id="result"></b></a>
<script>
    $("span").click(function(){
    var a = $(this).html();
    $("#result").html(a);
    });
</script>

JS事件监听器的一种元素？

5 个答案: