[DOM Event Learning] Section 1 How to bind DOM Event processor

[DOM Event Learning] section 1 DOM event processor binding several methodsIt is often necessary to handle various events in a Web page, usually by binding listener to listen to events, and to do some specific processing after the event occurs.There are several ways to listen to events, as described below. first, written in the page label

<onclick= "alert (' Hello ')">Say Hello</button  >

　The above line of code, the button click on the popup action when the label Declaration is bound.

This is a bad way, for the following reasons:1.View Code (HTML) and interactive code (JS) are strongly coupled. This means that every time we want to change the method, we need to edit the HTML.2. Scalability is poor. If this method needs to be attached to more than one element, the duplicated code will make the page swell and maintain difficulty.   second, using native event binding methodsor the above example, first, give the element an ID:

<id= "hellobtn">Say Hello</button >

JS Code:

// Event binding using AddEventListener var hellobtn = document.getElementById ("hellobtn"); Hellobtn.addeventlistener (function (event) {    alert ("Hello."  false);

This method works well on modern browsers, but there is no such method for IE before IE9, they use attachevent ().third, the event handler bindings are performed using the jquery methodjquery handles This incompatibility problem for us, so we can use jquery to bind events:

// Event Binding using a convenience method$ ("#helloBtn"). Click (function  (Event) {    alert ( "Hello." );});

　　There are many ways to listen to jquery events:

//The many ways to bind events with JQuery//Attach an event handler directly to the button using JQuery ' s//shorthand ' click ' method.$ ("#helloBtn"). Click (function(Event) {alert ("Hello.");});//Attach an event handler directly to the button using JQuery ' s//' bind ' method, passing it an event string of ' click '$ ("#helloBtn"). Bind ("click",function(Event) {alert ("Hello.");});//as of JQuery 1.7, attach an event handler directly to the button//using JQuery ' s ' on ' method.$ ("#helloBtn"). On ("click",function(Event) {alert ("Hello.");});//as of JQuery 1.7, attach an event handler to the ' body ' element//is listening for clicks, and would respond whenever *any* button is//clicked on the page.$ ("Body"). On ({click:function(Event) {alert ("Hello."); }}, "Button");//a alternative to the previous example, using slightly different syntax.$ ("Body"). On ("Click", "button",function(Event) {alert ("Hello.");});

at the beginning of JQuery 1.7, all the event binding methods are finally called the. On () method.in the above example, the first three method invocations are equivalent.The fourth and fifth methods listen for the Click event of all button elements on the body.a higher-level element in the DOM tree listens to events that occur on its children element, which is called the event delegation.  ReferencesIntroducing events:http://learn.jquery.com/events/introduction-to-events/Event reference:https://developer.mozilla.org/en-us/docs/web/events 

[DOM Event Learning] Section 1 How to bind DOM Event processor