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 ...
- 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?
- 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 ...
- 5,081
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);
...
- 93.4k
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 ...
- 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.
...
- 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 ...
- 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 ...
- 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 ...
- 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 ...
- 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)...
- 6,110
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 ...
- 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 ...
- 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 ...
- 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 ...
- 2,765
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....
- 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 ...
- 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)...
- 773
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.
- 1,937
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?
- 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="...
- 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 ...
- 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 ...
- 14k
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 ...
- 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("....
- 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", ...
- 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 ...
- 4,433
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: ...
- 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 ...
- 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 ...
- 461
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 ...
- 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 ...
- 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 ...
user2762294
37
votes
4
answers
74k
views
addEventListener Two Functions
How can I make it so that addEventListener() has two functions inside it?
- 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 ...
- 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....
- 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() { ...
- 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 ...
- 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....
- 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 ...
- 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 ...
- 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("...
user985358
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?...
- 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 ...
- 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 ...
- 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 ...
- 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 ...
- 231
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....
- 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?...
- 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 ...
- 292