将javascript处理程序应用于所有出现的特定HTML标记
[英]Apply a javascript handler to all occurrences of a certain HTML tag
问题描述
I'm trying to setup an event handler for all occurrences of a certain HTML tag, for example onclick()=my_f() event in tag <p> in HTML file like this : 
我正在尝试为某个HTML标记的所有出现设置事件处理程序，例如，像这样的HTML文件中的标记<p>中的onclick()=my_f()事件：
<body>
<p id="1"></p>
<p id="2"></p>
<p id="3"></p>
</body>
the result would be that my_f() is the handler for all <p> . 结果将是my_f（）是所有<p>的处理程序。
the catch is that i don't want to write : <p id="1" onclick()="my_f()"> for every <p> , so i tried doing so in javascript , like this : 问题是我不想为每个<p>编写<p id="1" onclick()="my_f()"> <p> ，所以我尝试在javascript中这样做：
JSutil.js: 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);
}
and in the HTML file i did : 在HTML文件中，我做了：
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<script type="text/javascript" src="JSutil.js"></script>
</head>
the problem is that the readenter() and readleave() gets called at the start of the page (onload), and when i move in/out over the paragraphs ( <P> ) nothing happens. 问题是readenter()和readleave()在页面的readenter() readleave()被调用，并且当我在段落（ <P> ）中移入/移出时没有任何反应。
the ids that are printed in alert (in readenter() and readleave() ) are correct and belongs to the <p> in my HTML . 在alert中（在readenter()和readleave() ）打印的ID是正确的，并且属于我HTML中的<p> 。 i tried also doing : 我也尝试过：
document.getElementsByTagName("P")[i].onmouseover = readenter(document.getElementsByTagName("p")[i].id);
same result . 同样的结果。 what is the problem ? 问题是什么 ？
2 个解决方案
解决方案1
3 已采纳 2015-10-23 08:13:32
Because you called the function, instead of binding the event to it. 因为您调用了函数，而不是将事件绑定到该函数。 Instead of 代替
document.getElementsByTagName("P")[i].addEventListener("mouseover",
readenter(document.getElementsByTagName("p")[i].id));
Write 写
document.getElementsByTagName("P")[i].addEventListener("mouseover", readenter);
And "readenter" will be called. 和“ readenter”将被称为。
However your code is very verbose for lack of a better term, and it may break down in certain browsers. 但是，由于缺少更好的术语，您的代码非常冗长，并且在某些浏览器中可能会崩溃。 Try using jQuery for example. 例如，尝试使用jQuery。 Using jQuery you would write: 使用jQuery，您将编写：
$("p").mouseover(readenter).mouseleave(readleave)
解决方案2
1 2015-10-23 08:13:31
You just need to attach function while adding eventlistener and not call it. 您只需要在添加事件eventlistener附加function而无需调用它。 So changes to be done in for-loop is as below: 因此，要在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);
};
Or if at all you want to pass a parameter then create an anonymous function while adding eventlistener as below: 或者，如果您完全想传递参数，则在添加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);
}
)
};
You can find still more good solutions from this Post 您可以从这篇文章中找到更多更好的解决方案
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.