[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, use JavaScript to set the OnXxx event property for the elementsuch as code:
<!DOCTYPE html><Html><Head><ScriptType= "Text/javascript">Window.onload=function() {//Event binding using OnXXX property from JavaScriptVarHellobtn=document.getElementById ("Hellobtn"); Hellobtn.onclick=function(event) {Alert ("Hello Button"); } }</script></head><< Span style= "color: #800000;" >body><button Span style= "color: #ff0000;" >id= "hellobtn" >say Hello </button></body></< Span style= "color: #800000;" >html>
This method is simple and overwrites the previous handler, and there are no browser-compatible issues. third, using the AddEventListener () methodafter you get the element, you can use the AddEventListener () method:
<!DOCTYPE html><Html><Head><ScriptType= "Text/javascript">Window.onload=function() {//Event binding using AddEventListenerVarHellobtn=document.getElementById ("Hellobtn"); Hellobtn.addeventlistener ("Click",function(event) {Alert ("Hello."); },False); }</script></head><< Span style= "color: #800000;" >body><button Span style= "color: #ff0000;" >id= "hellobtn" >say Hello </button></body></< Span style= "color: #800000;" >html>
This method works well on modern browsers, but there is no such method for IE before IE9, they use attachevent (). Fourth, event handler binding using 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.");});////// clicked on the page.$ ("body") Span style= "color: #000000;" ). On ({click: function); }}, "button" ); // a alternative to the previous example, using slightly Different syntax.$ ("body"). On ("Click", "button", function
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/eventsAddeventlistener:https://developer.mozilla.org/en-us/docs/web/api/eventtarget/addeventlistenerCategories: JavaScript, JQuery
[DOM Event Learning] Section 1 How to bind DOM Event processor