<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.") );});//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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
