将 javascript 处理程序应用于某个 HTML 标记的所有出现

Question

我正在尝试为某个 HTML 标记的所有出现设置事件处理程序，例如标记 [=17] 中的 onclick()=my_f() 事件=] 在 HTML 文件中像这样：

<body>
<p id="1"></p>
<p id="2"></p>
<p id="3"></p>
</body>

结果将是 my_f() 是所有  的处理程序。
问题是我不想为每个  写 ，所以我尝试在 javascript 中这样做，像这样：
JSutil.js:

window.onload = function() {
   init();
   alert("Hello!");
}

function init() {

    for (var i = document.getElementsByTagName("P").length - 1; i >= 0; i--) {
        alert("i "+i);
        document.getElementsByTagName("P")[i].addEventListener("mouseover", readenter(document.getElementsByTagName("p")[i].id));
        document.getElementsByTagName("P")[i].addEventListener("onmouseout", readleave(document.getElementsByTagName("p")[i].id));
    };
}

function readenter(id) {
    alert("readenter , id "+id);
}
function readleave(id) {
    alert("readleave , id "+id);
}

在 HTML 文件中我做了：

<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<script type="text/javascript" src="JSutil.js"></script>
</head>

问题是 readenter() 和 readleave() 在页面开始时被调用（onload），当我在段落上移动 in/out 时（) 没有任何反应。
警报中打印的 ID（在 readenter() 和 readleave() 中）是正确的，属于我的 HTML 中的 。我也试过做：

document.getElementsByTagName("P")[i].onmouseover = readenter(document.getElementsByTagName("p")[i].id);

同样的结果。问题是什么？

Answer 1

你只需要在添加eventlistener时附加function而不是调用它。因此 for-loop 中要进行的更改如下：

for (var i = document.getElementsByTagName("P").length - 1; i >= 0; i--) {
        alert("i "+i);
        document.getElementsByTagName("P")[i].addEventListener("mouseover", readenter);
        document.getElementsByTagName("P")[i].addEventListener("onmouseout", readleave);
};

或者，如果您想要传递一个参数，则在添加 eventlistener 的同时创建一个 anonymous function，如下所示：

for (var i = document.getElementsByTagName("P").length - 1; i >= 0; i--) {
        alert("i "+i);
        document.getElementsByTagName("P")[i].addEventListener("mouseover", 
           function(){
               readenter(document.getElementsByTagName("p")[i].id)
           }
        );

        document.getElementsByTagName("P")[i].addEventListener("onmouseout",
            function(){
               readleave(document.getElementsByTagName("p")[i].id);
            }
        )
};

您可以从this Post

中找到更多好的解决方案

Answer 2

因为您调用了函数，而不是将事件绑定到它。而不是

  document.getElementsByTagName("P")[i].addEventListener("mouseover", 
      readenter(document.getElementsByTagName("p")[i].id));

写

  document.getElementsByTagName("P")[i].addEventListener("mouseover", readenter);

并且"readenter"会被调用。

但是，由于找不到更好的术语，您的代码非常冗长，并且在某些浏览器中可能会崩溃。例如，尝试使用 jQuery。使用 jQuery 你会写：

$("p").mouseover(readenter).mouseleave(readleave)

将 javascript 处理程序应用于某个 HTML 标记的所有出现

Apply a javascript handler to all occurrences of a certain HTML tag

javascript

html

javascript-events