Questions tagged [addeventlistener]
a DOM event method that adds an event listener to a given DOM node
4,446
questions
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 ...
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?
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 ...
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);
...
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 ...
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.
...
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 ...
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 ...
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 ...
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 ...
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)...
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 ...
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 ...
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 ...
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 ...
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....
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 ...
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)...
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.
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?
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="...
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 ...
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 ...
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 ...
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("....
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", ...
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 ...
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: ...
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 ...
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 ...
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 ...
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 ...
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 ...
37
votes
4
answers
74k
views
addEventListener Two Functions
How can I make it so that addEventListener() has two functions inside it?
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 ...
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....
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() { ...
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 ...
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....
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 ...
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 ...
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("...
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?...
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 ...
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 ...
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 ...
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 ...
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....
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?...
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 ...