Home > Developer > JavaScript
There are several ways to bind native JS events. There must be a lot of friends say 3 kinds! At present, in my current study, there are only two kinds of half! Two kinds of half? Half a kind? And listen to my word.
It is estimated that three of the three kinds of people are considered as follows:
// 第一种：直接绑定在dom上<div onclick="fun();">click</div>
// 第二种，使用onclickdocument.getElementById("xxx").onclick = function(){};
// 第三种：使用推荐的标准模式document.getElementById("xxx").addEventListener("click",function(e){});
Indeed, this is the most three ways to search the Internet, but there is a pit, that is, when you use three at the same time, the second will be the first to cover out, that is, the first and the second is the same way, but the wording is different, we can write a demo for the card:
<! DOCTYPE html><Html><Head><MetaCharSet="UTF-8"></Head><Body><buttonId="BTN1"OnClick="Fun1 ();">btn</button></Body><ScriptType="Text/javascript">functionFun1(){Console.Log("111");}VarBtn=Document.getElementById( "btn1" ); btn. OnClick = function () {console.< Span class= "NX" >log ( "222" } btn. Addeventlistener ( "click" ,function () {console. Log (</script></html< Span class= "P" >> Read my other blog in-depth understanding of document's children's shoes should know that the onclick is a property on the elenent. The so-called attribute means that there is only one, and repeated assignments overwrite the previous one. But AddEventListener does not, this method binds multiple event programs and executes sequentially.
So what's the rest of the half-way? I went straight to the code, after all, the program ape is an animal that understands the ability to code more than the ability to understand words:
<! DOCTYPE html><Html><Head><MetaCharSet="UTF-8"></Head><Body><AId="BTN1"OnClick="Fun1 ();"Href="Javascript:fun2 ();">btn</A></Body><ScriptType="Text/javascript">functionFun1(){Console.Log("111");}functionFun2(){Consolelog (} var btn = document. Getelementbyid (. Addeventlistener ( "click" ,function () {console. Log (</script></html< Span class= "P" >> This explains why it is half-way, because the use of the scene is very limited, many labels can not be used. This time careful you may find that the order here is also expected to be different, for this is the next topic, JS event execution sequence.
Demo code will not write, code too much, interested can directly copy the above you to modify, I said I came to the conclusion that
The usual, or the first code, first look at the code and:
<! DOCTYPE html><Html><Head><MetaCharSet="UTF-8"></Head><Body><buttonId="BTN1">btn</button></Body><ScriptType= "Text/javascript" >var btn = document. Getelementbyid (. Addeventlistener ( "click" ,function (event) {console. Log (event}); </script></html< Span class= "P" >> At this point the console prints a MouseEvent object, which explains a little bit:
This time some students may ask, I usually to prevent event bubbling and default events using the Stoppropagation and Preventdefault methods, why not here?
This question is good, because Toppropagation and Preventdefault are the method of event, and MouseEvent is indirectly inherited by the event can use this method, then where he inherited it?
We directly expand the browser console of the MouseEvent __proto__ property, pull to the bottom, found that he also has a __proto__ property, the type of the __proto__ property is Uievent, continue to expand, uievent __proto__ Is event,event inside has these two methods, familiar with JS prototype chain classmate should all know this.
Plainly, the MouseEvent inherited the event, and the event inherits the Object, Uievent,uievent. (This prototype chain spread too long, I can not, children's shoes to test themselves)
Now, do you have a whole new understanding of the event?
MouseEvent Event Document Address
(article for original, reproduced please specify the source)
JavaScript-deep event mechanism
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
