Chrome Extension: event listeners

Question

I am aware that because of Chrome's csp, I can't execute inline JavaScript. I have an html file called popup.html which contains this:

 <body> <a href="#" id="clickme">Button</a> </body>

and an external JavaScript file called chrome.js which contains this code:

document.addEventListener('DOMContentLoaded', init()); function init(){ var elem = document.getElementById('clickme'); elem.addEventListener('click',func()); } function func(){ alert('button clicked'); }

Whenever I reload the Chrome extension, or click the extension Icon, func() gets fired, but when I click the actual button that the listener is subscribed to (Button), nothing happens. I have looked at the debugger using "inspect popup" and using location.reload() in the console, it seems as though elem is correctly set via getElementById(), but the event is immediately fired upon reloading the page, instead of when the link is clicked.

How can I make the event fire on click instead of on pageload?

aclave1 · Accepted Answer · 2013-11-17 06:55:31Z

2

Passing a function to an event listener like this document.addEventListener('DOMContentLoaded', init());

the function is immediately invoked.The correct way is to do this

document.addEventListener('DOMContentLoaded', init);

edited Nov 17, 2013 at 6:55

answered Nov 17, 2013 at 1:17

aclave1

1,71218 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Zig Mandel Over a year ago

Yes, you are passing a function result after invoking it. Do as this answer suggests or put the function inline as anonymous.

Vijay Kumbhani Over a year ago

where i find out event name?

aclave1 Over a year ago

MDN Event Reference

R. Gurung Over a year ago

what if we had arguments in function ?

Collectives™ on Stack Overflow

Chrome Extension: event listeners

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related