Home > Developer > JavaScript
1. first, let's take a look at several concepts, such as "Events", "event streams", "event names", and "event processing functions/event listening functions ", you can know your friends.
Events: events are specific actions performed by users or browsers. For example, user clicks are commonly used click events.
Event stream: Multiple events are triggered in a certain order to form an event stream.
Event name: As mentioned above, click is the event name.
The event processing function/event listening function (called by Dom) is the processing function after the event is triggered, for example, obj. onclick = fn; the function fn is the event processing function.
2. next, let's take a look at the history. The event is a part of dom that has been fully described in version 3. When we divide ie in the browser (it has its own event model ), other event models, such as netscape, safari, and opera, are basically dom-compliant.
3. The basic idea of a bubble event is to trigger an event in sequence from a specific event Target to a non-specific event target.
First look at the following code:
Copy codeThe Code is as follows:
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> No title page </title>
</Head>
<Body onclick = "handleClick ()">
<Div onclick = "handleClick ()"> click me </div>
</Body>
</Html>
In ie5.5, the bubble sequence is as follows:
Html is added to ie6.o and later versions (to ensure compatibility, avoid adding events to this tag)
In Mozilla 1.0, the bubble event is:
There are no differences in the three sequences, except whether some labels support the bubble type.
4. Let's take a look at capture events.
Ie4.0 uses a bubble event, while netscape navigator uses a capture event, as shown in:
,
5. ie only supports bubble events, while dom also supports "bubble events and capture events". The sequence is: "Capture events" ----- "" and "bubble events ", we have already mentioned that browsers such as moz, opera, and safari basically conform to the dom event model, so they also support "bubble events and capture events", for example:
6. next we will learn how to add events to tags. The most common method is to add the code in the tag (such addition only "Capture events" in moz ", it is equivalent to the function added with addEventListener (obj, type, false). I will discuss it later ):
For example:
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> No title page </title>
</Head>
<Body onclick = "alert ('body')">
<Div onclick = "alert ('div ');">
Div
<Input id = "Button1" onclick = "alert ('btn ');" type = "button" value = "button"/>
</Div>
</Body>
</Html>
Click the button in ie. Based on our understanding above, it is easy to write the answer. That's right! Ie only has bubble events, so the order is: button> div> body;
In non-ie browsers such as moz, embedded events as we mentioned above are equivalent to addEventlistener (type, fn, false) listening only from capture events.
The order is the opposite: body> div> body;
When addEventlistener (type, fn, true add events) only listens to "Capture events". When the third parameter is false, only the bubble events are listened.
Let's look at the following example:
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> No title page </title>
<Style type = "text/css">
# Ll {background: # f00; _ width: expression (this. width> 200? "200px": true );}
</Style>
</Head>
<Body id = "obj1">
<Div id = "obj2"> <input id = "obj3" id = "Text1" type = "text"/> </div>
<Script language = "javascript" type = "text/javascript">
Var $ = function (eid ){
Return typeof eid = "object "? Eid: document. getElementById (eid );
};
Var fn = {
Fn1: function () {alert ("body ");},
Fn2: function () {alert ("div ");},
Fn3: function () {alert ("test ");}
};
Var et = {};
Et. addEvent = function (obj, type, fn, flag ){
If (obj. attachEvent ){
Obj. attachEvent ("on" + type, fn );
} Else if (obj. addEventListener ){
Flag = (typeof flag! = "Undefined ")? Flag: true;
Obj. addEventListener (type, fn, flag );
} Else {
Obj ["on" + type] = fn;
}
};
Et. addEvent ($ ("obj1"), "click", fn. fn1, true );
Et. addEvent ($ ("obj2"), "click", fn. fn2, false );
Et. addEvent ($ ("obj3"), "click", fn. fn3, true );
// Et. addEvent ($ ("obj3"), "click", fn. fn3 );
// Et. addEvent ($ ("obj2"), "click", fn. fn2 );
// Et. addEvent ($ ("obj1"), "click", fn. fn1 );
</Script>
</Body>
</Html>
Click the text field to guess the differences between ie and moz (Firefox). Of course, in ie, the execution order is determined as follows: input >>> div >> body
In moz, because the third parameter of the div when an event is added is false, it means that the div only listens to the bubble event. Then, we can easily judge based on the dom event model. First, ojb1> obj3> obj2
Body> test> div
By the way, dynamically adding events to the same tag is in the execution order. In ie, it is different from other browsers without the ie kernel. in ie, "first-in-first-out" is the first operation to be added, other Browsers without the ie kernel are "advanced and later", that is, the last added event is executed first.
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
