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

Question

I'm trying to setup an event handler for all occurrences of a certain HTML tag, for example onclick()=my_f() event in tag  in HTML file like this :

<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  .
the catch is that I don't want to write :  for every , so I tried doing so in JavaScript, like this:
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 :

<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 () nothing happens.
The ids that are printed in alert (in readenter() and readleave()) are correct and belongs to the  in my HTML. I tried also doing:

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

same result. What is the problem?

Jodi Supporter · Accepted Answer · 2015-10-23T08:16:05.187

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.

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. Using jQuery you would write:

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

score 1 · Answer 2 · edited May 23 '17 at 11:52

You just need to attach function while adding eventlistener and not call it. So changes to be done in for-loop is as below:

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:

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

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

2 Answers2