Home > Developer > JavaScript
HTML tags have children and fathers, and this time there is an issue with the sequence of events triggering, such as:
<!DOCTYPE HTML><HTML><Head><style>. First{Border:Solid #FF0000}. Second{Border:Solid #00FF00}. Third{Border:Solid #0000FF}</style><Scriptsrc= "Http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></Script><Script>$ (document). Ready (function(){ $(". First"). Click (function() {alert (0); }); $(". Second"). Click (function() {alert (1); }); $(". Third"). Click (function() {alert (2); });});</Script></Head><Body><Divclass= "First">Testfirst<Divclass= "Second">Testsecond<Divclass= "Third">Testthird</Div></Div></Div></Body></HTML>
By default, point third, three events are triggered, and the trigger order is 3,2,1. This is called bubbling triggering.
First, use JavaScript to set the trigger mode
Can be added using the Javascript:DOM.addEventListener () method when setting
element. AddEventListener (event, function, Usecapture), and the third parameter is boolean,false when the bubbling trigger (the default value, Triggered at the beginning of the most subordinate event), true when the capture is triggered (starting at the time of the most advanced element).
There are two ways of event delivery: bubbling and capturing.
Event passing defines the order in which element events are triggered. If you insert the <p> element into the <div> element and the user taps the <p> element, which element's "click" event is first triggered?
In bubbling , an inner element's event is triggered first, and then an external element is triggered, that is: The <p> element's Click event is triggered first, and then the <div> element's Click event is triggered.
In a capture , an event of an external element is first triggered before the event of the inner element is triggered, that is: The <div> element's Click event is triggered first, and then the <p> element's Click event is triggered.
Ii. using jquery to set the event triggering method
1, call $ (selector). On (event,childselector,data,function,map) bind time, you can set the Childselector, This means that the event is bound only for a subset of the child elements and can be filtered out to bind or achieve the effect.
2, $ ("#hr_three"). Click (Function (event) {
return false;
});
The incoming parameter Event,return false to block all subsequent times, including the default click event and the bubbling time.
3, event.stoppropagation ();
Event bubbling is blocked during event processing, but does not halt default behavior (such as a jump that performs a hyperlink)
4, Event.preventdefault ();
Event-handling process, does not halt the event bubbling, but the default behavior (it only executes all the bullets, but did not perform a hyperlink jump)
Event Objective: The event object is saved by the variable event of the Pure JavaScript property Event.target Event Coarse-grained program. The Event.target property holds the target element where the event occurred. This property is specified in the DOM API, but is not implemented by all browsers. jquery makes the necessary extensions to this event object so that this property can be used in any browser. With. Target, you can determine the element in the DOM that first received the event (that is, the element that was actually clicked). Furthermore, we know that this applies the DOM element that handles the event, so you can write the following code: $ (document). Ready (function () { $ (' #switcher '). Click (Function ( Event) { if (Event.target = = this) { $ (' #switcher. Button '). Toggleclass (' hidden ');});}); The code at this point ensures that the element clicked is <id= "switcher">, not the other descendant elements. The XML DOM Target event property definition and Usage Target event property returns the target node of the event (the node that triggered the event), such as the element, document, or window that generated the event. Grammar Event.targetSimulate event actions
return value: JQuery trigger (type, [data])
Triggers a class of events on each matched element.
This function also causes the default behavior of the browser with the same name (except for the jump event of the A tag). For example, if you trigger a ' submit ' with trigger (), it will also cause the browser to submit the form. If you want to block this default behavior, you should return false.
Parameters
Typestring,event,object
An event object or the type of event to be triggered
Data (optional)Array
(optional) Additional parameters passed to the event handler
Example
Describe:
Submit the first form, but not submit ()
JQuery Code:
$ ("Form:first"). Trigger ("submit")
Describe:
Passing parameters to an event (click () also triggers the default event)
JQuery Code:
$ ("P"). Click (Function (event, a, b) {
A and B are undefined types when a normal click event occurs
If triggered with the following statement, a points to "Foo" and B points to "bar"
}). Trigger ("click", ["foo", "Bar"]);
Describe:
The following code can display a "Hello world"
JQuery Code:
$ ("P"). Bind ("MyEvent", Function (event, Message1, Message2) {
Alert (message1 + "+ message2);
});
$ ("P"). Trigger ("MyEvent", ["Hello", "world!"]);
Unbind,off (recommended) is used to unbind an event, but the OnClick property event and the default click event in the tag are not removed, and false is returned if you want to cancel.
And unbind and off can use the event to trigger the incoming event object to cancel the time binding, which is used to trigger the number of times no longer triggered (if you want to trigger no longer trigger, you can use one () to bind the event)
$ (document). Ready (function() { var x=0; $ ("P"). Click (function(event) { $ ("P"). Animate ({fontSize: "+=5px"}); X++ ; if (x>=2) { $ (this). Unbind (event); } );});JavaScript Event firing sequence
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
