Home > Developer > Web Develop
1.HTML Event handlers
An event supported by an element can be specified by an HTML attribute with the same name as the corresponding event handler. The value of this attribute should be the ability to execute the JS code. For example: button click is to execute some JS code, can resemble below:
<input type= "button" value= "click Me" onclick= "showmessage ()"/>
In JS can be processed as follows:
<script>
function ShowMessage () {
Alert ("Hello function");
Alert (this = window)//True
}
</script>
The this point in the ShowMessage window, but the ShowMessage function can be called simultaneously by multiple elements.
But this method has a flaw is the JS and HTML coupled together, if you want to replace the event handler, you need to change the HTML and JS two places. So many people like to use DOM event handlers.
2. DOM0 Level Event handlers
The way to specify an event handler via JS is to assign a function to the property of an event handler.
Each element, including window and document, has its own event handler properties, which are usually all lowercase, just like the onclick, which sets the value of this property to a function to specify the event handler. As follows:
<HTML> <Head></Head> <Body> <inputtype= "button"value= "click me2"ID= "BTN2"> <Script> varbtn2=document.getElementById ("btn2"); Btn2.onclick= function() {Console.log ( This); } </Script> </Body></HTML>
The result of the this output is: <input type= "button" value= "click me2" id= "btn2", stating that this in the Dom0 level event handler refers to the current element itself , Instead of windows, you can access any attribute and any method of the element through this.
3.dom2 Level Event handlers
The DOM2 level event defines two methods for handling the actions of the specified and deleted event handlers: AddEventListener () and RemoveEventListener (). All DOM nodes contain these two methods, and accept 3 arguments, the name of the event to be processed, function as an event handler and a Boolean value. The last Boolean value, if True, indicates that in the capture phase, false is indicated during the bubbling phase.
<HTML> <Head></Head> <Body> <inputtype= "button"value= "click me2"ID= "BTN2"> <Script> varbtn2=document.getElementById ("btn2"); //AddEventListener accepts 3 parameters: the event name to process, the function of the event handler, and a Boolean value. The last Boolean value, if True, indicates that in the capture phase, false indicates the bubbling phaseBtn2.addeventlistener ('Click',function() {Console.log ( This); }, false); </Script> </Body></HTML>
The result of the above code output is the same as the result of the DOM0-level code output: <input type= "button" value= "click me2" id= "btn2", stating that this in the Dom2-level event handler refers to the current element itself , not Windows.
Note: the AddEventListener () method can only be removed by the RemoveEventListener () method.
But one thing to be aware of when using the RemoveEventListener () method is to remove an event:
<HTML> <Head></Head> <Body> <inputtype= "button"value= "click me2"ID= "BTN2"> <Script> varbtn2=document.getElementById ("btn2"); Btn2.addeventlistener ('Click',function() {Console.log ( This); }, false); Btn2.removeeventlistener ('Click',function(){//no useConsole.log ( This); }, false); </Script> </Body></HTML>
The above method is useless to remove the Click event, why? Because the second parameter of AddEventListener and RemoveEventListener requires the same function, and the above code looks like the same function, it is not, they are functionally identical, but are different anonymous functions . If you need to actually remove the event handlers, you need to do the following:
<HTML> <Head></Head> <Body> <inputtype= "button"value= "click me2"ID= "BTN2"> <Script> varbtn2=document.getElementById ("btn2"); varHandler= function() {Console.log ( This); } btn2.addeventlistener ('Click', Handler,false); Btn2.removeeventlistener ('Click', Handler,false); </Script> </Body></HTML>
As above, you can guarantee that the second parameter of AddEventListener and RemoveEventListener is the same function.
Attachevent () and DetachEvent ()
In earlier IE browsers, such as: IE8, there was no implementation addEventListener() and removeEventListener() , but provided two alternative methods attachEvent() and detachEvent() . Because of the Microsoft current system Windows 10 in the latest, abandoned IE by the browser is edge replaced, where attachEvent() and detachEvent() no meaning.
The above content is basically excerpt from the JavaScript advanced programming, adding some of their own understanding. If there is an error, please correct me.
Js:html event handlers vs. DOM0 event handlers vs DOM2 level event handlers
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
