dom-events

jQuery.click() vs onClick

by

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(){ //Some code }); Second method HTML <div id=”myDiv” onClick=”divFunction()”>Some Content</div> JavaScript function call function divFunction(){ //Some code } I use either the first or second method in my application. Which one … Read more

How to trigger event in JavaScript?

by

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? 19 s 19 A working example: // Add an event listener document.addEventListener(“name-of-event”, function(e) { console.log(e.detail); // Prints “Example of an event” }); … Read more

window.onload vs document.onload

by

Which is more widely supported: window.onload or document.onload? 10 s 10 When do they fire? window.onload By default, it is fired when the entire page loads, including its content (images, CSS, scripts, etc.). In some browsers it now takes over the role of document.onload and fires when the DOM is ready as well. document.onload It … Read more

How to make JavaScript execute after page load?

by

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 to execute some JavaScript after the document has been “loaded” (HTML fully downloaded and in-RAM). Are there any events that I can hook onto when … Read more

Getting the ID of the element that fired an event

by

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(test.val()); }); }); <script type=”text/javascript” src=”https://stackoverflow.com/questions/48239/starterkit/jquery.js”></script> <form class=”item” id=”aaa”> <input class=”title”></input> </form> <form class=”item” id=”bbb”> <input class=”title”></input> </form> Except of course that the var test should contain the … Read more

What is event bubbling and capturing?

by

What is the difference between event bubbling and capturing? When should one use bubbling vs capturing? 8 Event bubbling and capturing are two ways of event propagation in the HTML DOM API, when an event occurs in an element inside another element, and both elements have registered a handle for that event. The event propagation … Read more

window.onload vs $(document).ready()

by

What are the differences between JavaScript’s window.onload and jQuery’s $(document).ready() method? 1 17 The ready event occurs after the HTML document has been loaded, while the onload event occurs later, when all content (e.g. images) also has been loaded. The onload event is a standard event in the DOM, while the ready event is specific … Read more

event.preventDefault() vs. return false

by

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. event.preventDefault() $(‘a’).click(function (e) { // custom handling here e.preventDefault(); }); 2. return false $(‘a’).click(function () { // custom … Read more