Replace onclick, onmouseover and onmouseout with extern javascript

Question

I want to replace my onclick, onmouseover and onmouseout attributes, which are now inline in my html, by something extern in javascript.

html:

<div onclick:"myfunctiononclick()"></div>
<div onmouseover:"myfunctionmouseover()"></div>
<div onmouseout:"myfunctionmouseout()"></div>

javascript:

function myfunctiononclick(){something};
function myfunctiononmouseover(){something};
function myfunctiononmouseout(){something};

Why I want to do this? Because chrome doesn't allow inline javascript in extensions.

Thanks

BTW, please don't use jQuery, so I know what's going on.

Esailija · Accepted Answer · 2012-07-24T18:42:04.403

0

Get reference to the elements somehow and then addEventListener:

document.addEventListener("DOMContentLoaded", function() {
    //This code is ran when the DOM content has been loaded
    //I.E. the elements we are trying to get exist on the page
    var divs = document.querySelectorAll("div");
    divs[0].addEventListener("click", myfunctiononclick, false);
    divs[1].addEventListener("mouseover", myfunctiononmouseover, false);
    divs[2].addEventListener("mouseout", myfunctiononmouseout, false);
}, false);

edited Jul 24 '12 at 18:42

answered Jul 24 '12 at 18:20

Esailija

138,174
23
272
326

Beware that not work on every browser(i.e. IE): see this for a workaround: http://stackoverflow.com/questions/9769868/addeventlistener-not-working-in-ie8 – Marcelo De Zen Jul 24 '12 at 18:26
@devundef this is for google chrome extension *Why I want to do this? Because chrome doesn't allow inline javascript in extensions.* – Esailija Jul 24 '12 at 18:26
Thanks, is there a way to do that with classes? – Jul 24 '12 at 18:29
@user1544892 `document.querySelectorAll(".some-class")` returns a list of elements that have `"some-class"` class – Esailija Jul 24 '12 at 18:31
For some reason, it is not working for me. here is what I did: added to some divs the class 'test' and then added this to my javascript file: var classes = document.querySelectorAll(".test"); classes[0].addEventListener("mouseover", myfunctiononmouseover, false); classes[1].addEventListener("mouseout", myfunctiononmouseout, false); – Jul 24 '12 at 18:36
@user1544892 need more context and information than that. Here's demo http://jsfiddle.net/5EVTY/2/ – Esailija Jul 24 '12 at 18:36
sorry, i've edited it, I clicked enter to add a line break, but that doesn't work in comments – Jul 24 '12 at 18:38
Oh, sorry to tell you that, this was the error in chrome developer tools: Uncaught TypeError: Cannot call method 'addEventListener' of undefined – Jul 24 '12 at 18:39
@user1544892 ah you are running this code before dom ready. Let me edit – Esailija Jul 24 '12 at 18:41
sorry for asking so many questions, but now some other parts of my code are still broken. Let me explain. How I did it: onclick="myfunction(this)". then in the javascript: function myfunction(x) and then somewhere in the javascript I used x.id. but it can't detect the id anymore. Do you understand my problem? – Jul 24 '12 at 18:48
@user1544892 you would use `this.id` without any arguments since the function is directly bound on the element. with `onclick` attribute there was actually 2 functions going on. – Esailija Jul 24 '12 at 18:50
Thanks for your help, again! you're awesome. but, Arg, still doesn't work: i've added alert(this) and alert(this.id) to myfunctiononmouseover, the first one says: [object window] and the second one 'undefined'. The alerts also instant show, when I open the extension, and not when hovering one of the divs. – Jul 24 '12 at 18:55
@user1544892 how are you using the functions, if you pass function just like I passed it here, `this` will be the `DIVElement` instead of `window`. See http://jsfiddle.net/5EVTY/4/. Are you sure you are actually passing the functions instead of calling them? do not pass a function with `()`.. that will just call the function immediately. it should be `addEventListener("click", someFunction, false)` NOT `addEventListener("click", someFunction(), false)`. See the difference? – Esailija Jul 24 '12 at 18:59
ah, that was what I did. jsfidle is very useful to share things, thanks. ehm, it only works on the first div with the class: http://jsfiddle.net/5EVTY/11/ – Jul 24 '12 at 19:22
@user1544892 the other functions don't have `alert(this.id)` they had `console.log` http://jsfiddle.net/5EVTY/13/ – Esailija Jul 24 '12 at 19:25
Ah, now I understand, the first div is using the first function, the second div the second, and the third div is using the third function. Now my question is, how to add the same function to all the divs with the same class? Btw, thanks for helping again! – Jul 24 '12 at 19:30
@user1544892 loop over the divs calling `.addEventListener` on them, should not be too hard with all this knowledge now :) – Esailija Jul 24 '12 at 19:40
Do I have to repeat this until i've every class? divs[0].addEventListener("click", myfunctiononclick, false); divs[1].addEventListener("click", myfunctiononclick, false); divs[2].addEventListener("click", myfunctiononclick, false); divs[3].addEventListener("click", myfunctiononclick, false); – Jul 26 '12 at 06:39
@esailija i'm sorry, found this: http://www.w3schools.com/js/js_loop_for.asp thanks for your great help, sorry – Jul 26 '12 at 09:01

Replace onclick, onmouseover and onmouseout with extern javascript

1 Answers1