Questions tagged [addeventlistener]

a DOM event method that adds an event listener to a given DOM node

Filter by
Sorted by
Tagged with
989 votes
21 answers
843k views

addEventListener vs onclick

What's the difference between addEventListener and onclick? var h = document.getElementById("a"); h.onclick = dothing1; h.addEventListener("click", dothing2); The code above ...
William Sham's user avatar
  • 13.1k
683 votes
19 answers
1.1m views

How to trigger event in JavaScript?

I have attached an event to a text box using addEventListener. It works fine. My problem arose when I wanted to trigger the event programmatically from another function. How can I do it?
KoolKabin's user avatar
  • 17.4k
490 votes
36 answers
826k views

How to pass arguments to addEventListener listener function?

The situation is somewhat like- var someVar = some_other_function(); someObj.addEventListener("click", function(){ some_function(someVar); }, false); The problem is that the value of someVar is ...
Abhishek Yadav's user avatar
322 votes
3 answers
375k views

How to remove all listeners in an element? [duplicate]

I have a button, and I added some eventlistners to it: document.getElementById("btn").addEventListener("click", funcA, false); document.getElementById("btn").addEventListener("click", funcB, false); ...
Derek 朕會功夫's user avatar
242 votes
27 answers
1.3m views

Cannot read property 'addEventListener' of null

I have to use vanilla JavaScript for a project. I have a few functions, one of which is a button that opens a menu. It works on pages where the target id exists, but causes an error on pages where ...
morocklo's user avatar
  • 2,620
232 votes
11 answers
284k views

Binding multiple events to a listener (without JQuery)?

While working with browser events, I've started incorporating Safari's touchEvents for mobile devices. I find that addEventListeners are stacking up with conditionals. This project can't use JQuery. ...
johnkreitlow's user avatar
  • 2,323
230 votes
23 answers
356k views

How to check whether dynamically attached event listener exists or not?

Here is my problem: is it somehow possible to check for the existence of a dynamically attached event listener? Or how can I check the status of the "onclick" (?) property in the DOM? I have ...
Stano's user avatar
  • 8,889
172 votes
8 answers
202k views

JavaScript listener, "keypress" doesn't detect backspace?

I'm using a keypress listener eg.. addEventListener("keypress", function(event){ } However, this doesn't seem to detect a backspace which erases text... Is there a different listener I can use ...
Skizit's user avatar
  • 44.2k
170 votes
9 answers
325k views

Javascript - How to detect if document has loaded (IE 7/Firefox 3)

I want to call a function after a document loads, but the document may or may not have finished loading yet. If it did load, then I can just call the function. If it did NOT load, then I can attach ...
Marcos's user avatar
  • 1,709
160 votes
4 answers
203k views

Dynamically add event listener

I am just starting to mess around with Angular 2 and I wonder if anyone can tell me the best way to dynamically add and remove event listeners from elements. I have a component set up. When a certain ...
popClingwrap's user avatar
  • 4,079
133 votes
15 answers
172k views

Javascript removeEventListener not working

I have the following code to add eventListener area.addEventListener('click',function(event) { app.addSpot(event.clientX,event.clientY); app.addFlag = 1; },true)...
Jinu Joseph Daniel's user avatar
118 votes
9 answers
120k views

addEventListener not working in IE8

I have created a checkbox dynamically. I have used addEventListener to call a function on click of the checkbox, which works in Google Chrome and Firefox but doesn't work in Internet Explorer 8. This ...
ravi404's user avatar
  • 7,239
115 votes
5 answers
115k views

addEventListener using for loop and passing values [duplicate]

I'm trying to add event listener to multiple objects using a for loop, but end up with all listeners targeting the same object --> the last one. If I add the listeners manually by defining boxa and ...
user2919172's user avatar
  • 1,153
96 votes
4 answers
60k views

matchMedia().addListener marked as deprecated, addEventListener equivalent?

I'm making use of matchMedia().addListener to detect dark/light mode theme preference changes in Safari, however in WebStorm using addListener is marked as deprecated but simply says to refer to ...
Matt Cowley's user avatar
  • 2,284
86 votes
6 answers
226k views

Why doesn't document.addEventListener('load', function) work in a greasemonkey script?

It doesn't give an error, and I put a console.log('loaded userscript wifi-autologin'), the console.log works, but the intended effect of the document.addEventListener doesn't happen. After doing a bit ...
Yet Another User's user avatar
86 votes
2 answers
93k views

Correct usage of addEventListener() / attachEvent()?

I'm wondering how to use addEventListener respectively attachEvent correctly? window.onload = function (myFunc1) { /* do something */ } function myFunc2() { /* do something */ } if (window....
ginny's user avatar
  • 869
85 votes
8 answers
136k views

MSIE and addEventListener Problem in Javascript?

document.getElementById('container').addEventListener('copy',beforecopy,false ); In Chrome / Safari, the above will run the "beforecopy" function when the content on the page is being ...
Matrym's user avatar
  • 16.9k
83 votes
3 answers
6k views

Why doesn't triggering click() inside a click event listener cause an infinite loop?

Can someone explain the program flow of this JavaScript code: const $leaveRoom = document.querySelector('#leave-button'); let a = 1; $leaveRoom.addEventListener('click', () => { console.log(a)...
Tushar Agarwal's user avatar
75 votes
8 answers
244k views

How to bind event listener for rendered elements in Angular 2?

How can I bind an event listener in rendered elements in Angular 2? I am using Dragula drag and drop library. It creates dynamic HTML but my event is not bound to dynamic HTML elements.
Sudhanshu sharma's user avatar
75 votes
14 answers
52k views

Removing an anonymous event listener

Is there anyway to remove an event listener added like this: element.addEventListener(event, function(){/* do work here */}, false); Without replacing the element?
erikvold's user avatar
  • 16.2k
73 votes
9 answers
121k views

Code inside DOMContentLoaded event not working

I have used <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <button type="button" id="button">Click</button> <pre id="...
Jamgreen's user avatar
  • 10.8k
70 votes
8 answers
119k views

addEventListener in Internet Explorer

What is the equivalent to the Element Object in Internet Explorer 9? if (!Element.prototype.addEventListener) { Element.prototype.addEventListener = function() { .. } } How does it works in ...
The Mask's user avatar
  • 17.3k
70 votes
16 answers
101k views

addEventListener on custom object

I've created an object that has several methods. Some of these methods are asynchronous and thus I want to use events to be able to perform actions when the methods are done. To do this I tried to add ...
Hugo Delsing's user avatar
59 votes
8 answers
101k views

add event listener on elements created dynamically [duplicate]

Is possible to add event listener (Javascript) to all dynamically generated elements? I'm not the owner of the page, so I cannot add a listener in a static way. For all the elements created when the ...
jenjis's user avatar
  • 1,077
58 votes
4 answers
161k views

addEventListener on a querySelectorAll() with classList [duplicate]

I am trying to add an event listener but no result came. I know JavaScript has a hoisting feature but I believe I tried all except the correct solution. const cbox = document.querySelectorAll("....
Evan's user avatar
  • 593
57 votes
5 answers
105k views

reactjs event listener beforeunload added but not removed

I have a react component like : import React, { PropTypes, Component } from 'react' class MyComponent extends Component { componentDidMount() { window.addEventListener("beforeunload", ...
gamer's user avatar
  • 5,733
55 votes
5 answers
63k views

addEventListener calls the function without me even asking it to

So we have a page: <span id='container'> <a href='#' id='first'>First Link</a> <a href='#' id='second'>Second Link</a> </span> And want to add some click ...
LittleBobbyTables's user avatar
53 votes
10 answers
112k views

Angular2, HostListener, how can I target an element? can I target based on class?

In Angular2, how can I target an element within the HostListener decorator? @HostListener('dragstart', ['$event']) onDragStart(ev:Event) { console.log(ev); } @HostListener('document: ...
GWorking's user avatar
  • 4,181
49 votes
2 answers
24k views

What does calling addEventLister twice do?

elemen.addEventListener('click',func,false); elemen.addEventListener('click',func,false); When elemen is clicked, will the function func be called twice, or just once? If it is called twice, then is ...
anony_root's user avatar
  • 1,487
44 votes
2 answers
5k views

Javascript Google Maps API & non-passive event handlers

Recently Chrome started emitting the following warnings: [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the ...
James R. Skinner's user avatar
42 votes
4 answers
90k views

Creating a custom event listener on an Android app

I need to set up a simple event listener to refresh a ListView once in a while. The problem is I don't know how could I generate an event. I know that for events like key or button pressing I just ...
Bilthon's user avatar
  • 2,471
41 votes
8 answers
60k views

addEventListener on NodeList [duplicate]

Does NodeList support addEventListener. If not what is the best way to add EventListener to all the nodes of the NodeList. Currently I am using the code snippet as show below, is there a better way ...
Dinesh P.R.'s user avatar
  • 7,036
40 votes
6 answers
79k views

Does AJAX loaded content get a "document.ready"?

Yesterday I had an issue where a .on('click') event handler I was assigning wasn't working right. Turns out it's because I was was trying to apply that .on('click') before that element existed in the ...
user avatar
37 votes
4 answers
74k views

addEventListener Two Functions

How can I make it so that addEventListener() has two functions inside it?
Alex Safayan's user avatar
  • 2,983
36 votes
3 answers
79k views

How to listen to localstorage value changes in react?

I want to show a button when user is logged.If user is not logged then I m not showing button.When user logged i will set local storage values.when i set local storage in login Component,Header ...
Karthi's user avatar
  • 3,289
33 votes
3 answers
48k views

how to intercept innerHTML changes in javascript?

I need to intercept any changes in the content of a cell inside my webpage. The following code shows me that addEventListener does not work. function modifyText() { alert("!"); } var el=document....
tic's user avatar
  • 4,139
33 votes
3 answers
54k views

How do I add and remove an event listener using a function with parameters?

Sorry if this is a common question, but I couldn't find any answers that seemed pertinent through searching. If I attach an event listener like this: window.addEventListener('scroll', function() { ...
Bungle's user avatar
  • 19.6k
32 votes
1 answer
16k views

Have any browsers implemented the DOM3 EventListenerList?

The answer was "no" back in March 2010: Browser EventListenerList Implementation I'm wondering if there has been any progress since then. If the answer's still "no" ... any ...
jawns317's user avatar
  • 1,746
31 votes
2 answers
156k views

Adding click event handler to iframe

I want to handle click event on an iframe with a handler that gets the iframe’s id as parameter. I’m able to add an onClick event handler via JavaScript as follows and it works fine: iframe.document....
samach's user avatar
  • 3,314
30 votes
6 answers
60k views

Why Firefox says that window.event is undefined? (call function with added event listener)

I have a trouble in this part: var ex = { exampl: function(){ var ref=window.event.target||window.event.srcElement; // here alert(ref.innerHTML); // (example) } } This function is called ...
anony_root's user avatar
  • 1,487
27 votes
3 answers
72k views

Javascript scope addEventListener and this

I am a C# developer experimenting with JavaScript and I'm trying to get my head around the scope :) I have the following code which contains an addEventListener in which I want to use a field from ...
Raf's user avatar
  • 673
25 votes
5 answers
40k views

To pass a parameter to event listener in AS3 the simple way... does it exist?

Expected / pseudo example: stage.addEventListener(MouseEvent.CLICK, onClick.someWayToPassParameters(true, 123, 4.56, "string")); function onClick(e:MouseEvent):void { trace("...
user avatar
25 votes
9 answers
31k views

Is it possible to call a class method with addEventListener?

Just something I've been wondering. In the second parameter in the .addEventListener method, can you call a "(custom) class method" instead of a function? i.e Would something like the following work?...
Azrael's user avatar
  • 671
24 votes
2 answers
126k views

Javascript: Uncaught TypeError: Cannot call method 'addEventListener' of null

I'm trying to do something fairly simple, but for the reason of me probably not being good enough to search documentation, I can't get this to work. I have a functioning inline JS that looks like ...
Jan's user avatar
  • 863
24 votes
2 answers
23k views

onClick priority over addEventListener in javascript?

Right now, I have an event listener that listens to a click on the screen. There is also a button on the screen. When I click on the button the event listener will execute before the onclick. Is there ...
BlueElixir's user avatar
  • 3,369
24 votes
5 answers
48k views

React setState hook from scroll event listener

First of all, with a class component, this works fine and does not cause any issues. However, in functional component with hooks, whenever I try to set state from my scroll event listener's function ...
zilijonas's user avatar
  • 3,605
23 votes
3 answers
46k views

Simulate keydown on document for JEST unit testing

Using JEST to unit test a component that has a keydown listener attached to the document. How can I test this in JEST? How do I simulate the keydown event on the document? I need the event listener ...
Vaibhav Garg's user avatar
22 votes
4 answers
32k views

Event Listener valid for HTML5 forms

New on HTML5 there's an "invalid" event, to which you can add a listener: document.addEventListener('invalid', function(e){ var element = $(e.target); element.addClass("invalid"); element....
Óscar's user avatar
  • 341
21 votes
3 answers
47k views

force javascript EventListener to execute once? [closed]

I'm wondering is it possible for force a javascript event listener to, without the condition being true force it to execute once then continue listening for it's condition to be met to execute further?...
Skizit's user avatar
  • 44.2k
21 votes
3 answers
49k views

addEventListener not working with onbeforeunload

window.addEventListener("onbeforeunload",function() {return "are you sure?"}); ^ This does not seem to work... at all... the page will simply close without displaying the confirmation box... I ...
zconnelly13's user avatar

1
2 3 4 5
89