將javascript處理程序應用於所有出現的特定HTML標記

Question

我正在嘗試為某個HTML標記的所有出現設置事件處理程序，例如，像這樣的HTML文件中的標記中的onclick()=my_f()事件：

<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()在頁面的readenter() readleave()被調用，並且當我在段落（  ）中移入/移出時沒有任何反應。
在alert中（在readenter()和readleave() ）打印的ID是正確的，並且屬於我HTML中的 。 我也嘗試過：

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

同樣的結果。 問題是什么？

Answer 1

因為您調用了函數，而不是將事件綁定到該函數。 代替

  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)

Answer 2

您只需要在添加事件eventlistener附加function而無需調用它。 因此，要在for-loop中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);
            }
        )
};

您可以從這篇文章中找到更多更好的解決方案

將javascript處理程序應用於所有出現的特定HTML標記

問題描述

2 個解決方案

解決方案1
3 已采納 2015-10-23 08:13:32

解決方案2
1 2015-10-23 08:13:31

將javascript處理程序應用於所有出現的特定HTML標記

問題描述

2 個解決方案

解決方案1 3 已采納 2015-10-23 08:13:32

解決方案2 1 2015-10-23 08:13:31

解決方案1
3 已采納 2015-10-23 08:13:32

解決方案2
1 2015-10-23 08:13:31