In your example, func will not be called twice on click, no; but keep reading for details and a “gotcha.” From addEventListener in the spec: If multiple identical EventListeners are registered on the same EventTarget with the same parameters the duplicate instances are discarded. They do not cause the EventListener to be called twice and … Read more
iframe doesn’t have onclick event but we can implement this by using iframe’s onload event and javascript like this… function iframeclick() { document.getElementById(“theiframe”).contentWindow.document.body.onclick = function() { document.getElementById(“theiframe”).contentWindow.location.reload(); } } <iframe id=”theiframe” src=”https://stackoverflow.com/questions/6452502/youriframe.html” style=”width: 100px; height: 100px;” onload=”iframeclick()”></iframe> I hope it will helpful to you….
Both are correct, but none of them are “best” per se, and there may be a reason the developer chose to use both approaches. Event Listeners (addEventListener and IE’s attachEvent) Earlier versions of Internet Explorer implement JavaScript differently from pretty much every other browser. With versions less than 9, you use the attachEvent[doc] method, like … Read more
Have you tried maintaining a reference to the anonymous function (like you suggested)? So: var listener = function() { check_pos(box); }; window.addEventListener(‘scroll’, listener, false); … window.removeEventListener(‘scroll’, listener, false); Mozilla’s docs suggest the same thing.
For those looking for a practical solution, see: How to find event listeners on a DOM node when debugging or from the JavaScript code? EventListenerList was in some old draft of DOM 3 Events and was long removed from the spec. As far as I know, at least Gecko still doesn’t have anything like this … Read more
There is a modern way to catch innerhtml changes: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe Example: // identify an element to observe elementToObserve = window.document.getElementById(‘y-range’).children[0]; // create a new instance of ‘MutationObserver’ named ‘observer’, // passing it a callback function observer = new MutationObserver(function(mutationsList, observer) { console.log(mutationsList); }); // call ‘observe’ on that MutationObserver instance, // passing it the element … Read more
The current answers are overlooking a really simple and secure option: window.dispatchEvent. Where you set your localStorage item, if you dispatch an event at the same time then the eventListener in the same browser tab (no need to open another or mess with state) will also pick it up: const handleLocalStorage = () => { … Read more
Wrap your functions in a function. const invokeMe = () => console.log(‘I live here outside the scope’); const alsoInvokeMe = () => console.log(‘I also live outside the scope’); element.addEventListener(‘event’,() => { invokeMe(); alsoInvokeMe(); });
To answer your question: No, document.ready will not fire again once a ajax request is completed. (The content in the ajax is loaded into your document, so there isn’t a second document for the ajax content). To solve your problem just add the event listener to the Element where you load the ajax content into … Read more
There is no way to do it without looping through every element. You could, of course, write a function to do it for you. function addEventListenerList(list, event, fn) { for (var i = 0, len = list.length; i < len; i++) { list[i].addEventListener(event, fn, false); } } var ar_coins = document.getElementsByClassName(‘coins’); addEventListenerList(ar_coins, ‘dragstart’, handleDragStart); or … Read more