Questions tagged [dom-events]
DOM (Document Object Model) events allow event-driven programming languages to register various event handlers/listeners on the element nodes inside a DOM tree.
12,521
questions
3249
votes
14
answers
938k
views
event.preventDefault() vs. return false
When I want to prevent other event handlers from executing after a certain event is fired, I can use one of two techniques. I'll use jQuery in the examples, but this applies to plain-JS as well:
1. ...
- 70.1k
1770
votes
9
answers
1.4m
views
Stop setInterval call in JavaScript
I am using setInterval(fname, 10000); to call a function every 10 seconds in JavaScript. Is it possible to stop calling it on some event?
I want the user to be able to stop the repeated refresh of ...
- 36.6k
1391
votes
17
answers
1.2m
views
window.onload vs $(document).ready()
What are the differences between JavaScript's window.onload and jQuery's $(document).ready() method?
- 34.2k
1250
votes
11
answers
575k
views
What is event bubbling and capturing?
What is the difference between event bubbling and capturing? When should one use bubbling vs capturing?
- 387k
1098
votes
26
answers
2.4m
views
How to make JavaScript execute after page load?
I'm executing an external script, using a <script> inside <head>.
Now since the script executes before the page has loaded, I can't access the <body>, among other things. I'd like ...
- 113k
1096
votes
24
answers
1.6m
views
Getting the ID of the element that fired an event
Is there any way to get the ID of the element that fires an event?
I'm thinking something like:
$(document).ready(function() {
$("a").click(function() {
var test = caller.id;
alert(...
- 12.8k
896
votes
9
answers
2.5m
views
window.onload vs document.onload
Which is more widely supported: window.onload or document.onload?
- 34.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
628
votes
15
answers
2.0m
views
Wait 5 seconds before executing next line
This function below doesn’t work like I want it to; being a JS novice I can’t figure out why.
I need it to wait 5 seconds before checking whether the newState is -1.
Currently, it doesn’t wait, it ...
- 6,757
622
votes
29
answers
585k
views
Listening for variable changes in JavaScript
Is it possible to have an event in JS that fires when the value of a certain variable changes? JQuery is accepted.
- 6,451
621
votes
18
answers
1.7m
views
jQuery.click() vs onClick
I have a huge jQuery application, and I'm using the below two methods for click events.
First method
HTML
<div id="myDiv">Some Content</div>
jQuery
$('#myDiv').click(function(){
//...
- 44.9k
596
votes
2
answers
851k
views
How can I trigger an onchange event manually? [duplicate]
I'm setting a date-time textfield value via a calendar widget. Obviously, the calendar widget does something like this :
document.getElementById('datetimetext').value = date_value;
What I want is:
On ...
- 6,231
595
votes
28
answers
840k
views
Is it possible to simulate key press events programmatically?
Is it possible to simulate key press events programmatically in JavaScript?
- 5,975
585
votes
11
answers
429k
views
How can I detect changes in location hash?
I am using Ajax and hash for navigation.
Is there a way to check if the window.location.hash changed like this?
http://example.com/blah#123 to http://example.com/blah#456
It works if I check it ...
- 12.7k
488
votes
14
answers
425k
views
onKeyPress Vs. onKeyUp and onKeyDown
What is the difference between these three events? Upon googling I found that:
The onKeyDown event is triggered when the user presses a key.
The onKeyUp event is triggered when the user ...
- 9,363
419
votes
6
answers
172k
views
Pass mouse events through absolutely-positioned element
I'm attempting to capture mouse events on an element with another absolutely-positioned element on top of it.
Right now, events on the absolutely-positioned element hit it and bubble up to its parent,...
- 51.2k
395
votes
9
answers
223k
views
JavaScript global event mechanism
I would like to catch every undefined function error thrown. Is there a global error handling facility in JavaScript? The use case is catching function calls from flash that are not defined.
Bob
381
votes
20
answers
1.3m
views
Prevent form submission on Enter key press
I have a form with two text boxes, one select drop down and one radio button. When the enter key is pressed, I want to call my JavaScript function, but when I press it, the form is submitted.
How do I ...
- 217k
379
votes
15
answers
317k
views
How to get the mouse position without events (without moving the mouse)?
Is it possible to get the mouse position with JavaScript after page loads without any mouse movement event (without moving the mouse)?
- 4,564
367
votes
15
answers
380k
views
Stop mouse event propagation
What is the easiest way to stop mouse events propagation in Angular ?
Should I pass special $event object and call stopPropagation() myself or there is some other way.
For example in Meteor, I can ...
- 12k
362
votes
9
answers
129k
views
Unable to understand useCapture parameter in addEventListener
I have read article at https://developer.mozilla.org/en/DOM/element.addEventListener but unable to understand useCapture attribute. Definition there is:
If true, useCapture indicates that the user ...
- 3,794
351
votes
8
answers
697k
views
JavaScript click event listener on class
I'm currently trying to write some JavaScript to get the attribute of the class that has been clicked. I know that to do this the correct way, I should use an event listener.
My code is as follows:
...
- 4,566
349
votes
10
answers
561k
views
How to display a confirmation dialog when clicking an <a> link?
I want this link to have a JavaScript dialog that asks the user “Are you sure? Y/N”.
<a href="delete.php?id=22">Link</a>
If the user clicks “Yes”, the link should load, if “No” nothing ...
- 7,647
341
votes
11
answers
237k
views
HTML input file selection event not firing upon selecting the same file
Is there any chance to detect every file selection the user made for an HTML input of type file element?
This was asked many times before, but the usually proposed onchange event doesn't fire if the ...
- 11.1k
335
votes
2
answers
204k
views
What are passive event listeners?
While working around to boost performance for progressive web apps, I came across a new feature Passive Event Listeners and I find it hard to understand the concept.
What are Passive Event Listeners ...
- 9,646
333
votes
14
answers
683k
views
Onclick javascript to make browser go back to previous page?
Is there a function I can attach as a click event of a button to make the browser go back to previous page?
<input name="action" type="submit" value="Cancel"/>
- 10.1k
330
votes
13
answers
210k
views
React onClick function fires on render
I pass 2 values to a child component:
List of objects to display
delete function.
I use a .map() function to display my list of objects(like in the example given in react tutorial page), but the ...
- 4,975
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
320
votes
11
answers
847k
views
How can I get the scrollbar position with JavaScript?
I'm trying to detect the position of the browser's scrollbar with JavaScript to decide where in the page the current view is.
My guess is that I have to detect where the thumb on the track is, and ...
- 3,203
311
votes
2
answers
451k
views
How can I capture the right-click event in JavaScript? [duplicate]
I want to block the standard context menus, and handle the right-click event manually.
How is this done?
- 20.9k
301
votes
9
answers
865k
views
How can I trigger a JavaScript event click
I have a hyperlink in my page. I am trying to automate a number of clicks on the hyperlink for testing purposes. Is there any way you can simulate 50 clicks on the hyperlink using JavaScript?
<a ...
- 4,245
288
votes
37
answers
581k
views
Is there an onSelect event or equivalent for HTML <select>?
I have an input form that lets me select from multiple options, and do something when the user changes the selection. Eg,
<select onChange="javascript:doSomething();">
<option>A</...
- 3,016
271
votes
10
answers
151k
views
What is DOM Event delegation?
Can anyone please explain event delegation in JavaScript and how is it useful?
- 2,727
260
votes
12
answers
195k
views
How does one capture a Mac's command key via JavaScript?
How does one capture a Mac's Cmd key via JavaScript?
- 13.5k
246
votes
27
answers
173k
views
How do you detect the clearing of a "search" HTML5 input?
In HTML5, the search input type appears with a little X on the right that will clear the textbox (at least in Chrome, maybe others). Is there a way to detect when this X is clicked in Javascript or ...
- 52.1k
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
228
votes
23
answers
190k
views
Prevent onmouseout when hovering child element of the parent absolute div WITHOUT jQuery
I am having trouble with the onmouseout function in an absolute positoned div. When the mouse hits a child element in the div, the mouseout event fires, but I do not want it to fire until the mouse is ...
- 2,415
227
votes
9
answers
430k
views
Trigger a keypress/keydown/keyup event in JS/jQuery?
What is the best way to simulate a user entering text in a text input box in JS and/or jQuery?
I don't want to actually put text in the input box, I just want to trigger all the event handlers that ...
- 65.2k
224
votes
21
answers
262k
views
How to distinguish mouse "click" and "drag"
I use jQuery.click to handle the mouse click event on Raphael graph, meanwhile, I need to handle mouse drag event, mouse drag consists of mousedown, mouseupand mousemove in Raphael.
It is difficult ...
- 17.8k
221
votes
7
answers
575k
views
jQuery equivalent of JavaScript's addEventListener method
I'm trying to find the jQuery equivalent of this JavaScript method call:
document.addEventListener('click', select_element, true);
I've gotten as far as:
$(document).click(select_element);
but ...
- 19.6k
203
votes
10
answers
269k
views
Detecting real time window size changes in Angular 4
I have been trying to build a responsive nav-bar and do not wish to use a media query, so I intend to use *ngIf with the window size as a criterion.
But I have been facing a problem as I am unable to ...
- 3,120
194
votes
5
answers
432k
views
Call a Javascript function every 5 seconds continuously [duplicate]
Possible Duplicate:
Calling a function every 60 seconds
I want to Call a Javascript function every 5 seconds continuously.
I have seen the setTimeOut event. Will it be working fine if I want it ...
- 2,391
193
votes
22
answers
76k
views
'dragleave' of parent element fires when dragging over children elements
Overview
I have the following HTML structure and I've attached the dragenter and dragleave events to the <div id="dropzone"> element.
<div id="dropzone">
<div id="dropzone-content"...
- 46k
190
votes
6
answers
318k
views
HTML <input type='file'> File Selection Event
Let's say we have this code:
<form action='' method='POST' enctype='multipart/form-data'>
<input type='file' name='userFile'><br>
<input type='submit' name='upload_btn' ...
- 19.8k
188
votes
13
answers
341k
views
Event when window.location.href changes
I'm writing a Greasemonkey script for a site which at some point modifies location.href.
How can I get an event (via window.addEventListener or something similar) when window.location.href changes on ...
- 25.9k
187
votes
6
answers
123k
views
Jquery mouseenter() vs mouseover()
So after reading a recently answered question i am unclear if i really understand the difference between the mouseenter() and mouseover(). The post states
MouseOver():
Will fire upon entering an ...
- 25.7k
185
votes
7
answers
136k
views
In React, what's the difference between onChange and onInput?
I've tried searching around for an answer to this, but most of them are outside the context of React, where onChange triggers upon blur.
In performing various tests, I can't seem to tell how these ...
- 27k
178
votes
9
answers
148k
views
Is there any way to call a function periodically in JavaScript?
Is there any way to call a function periodically in JavaScript?
- 27.5k
172
votes
20
answers
476k
views
How do I capture response of form.submit
I have the following code:
<script type="text/javascript">
function SubmitForm()
{
form1.submit();
}
function ShowResponse()
{
}
&...
- 10.6k
172
votes
14
answers
408k
views
Is it possible to append to innerHTML without destroying descendants' event listeners?
In the following example code, I attach an onclick event handler to the span containing the text "foo". The handler is an anonymous function that pops up an alert().
However, if I assign to the ...
- 48.2k