Js events prevent bubbling

Connection: http://www.cnblogs.com/jams742003/archive/2009/08/29/1556187.html

1. event Target

Now, the variable event in the event handler stores the event object. The event.tar get attribute stores the target element of the event. This attribute is specified in the dom api but is not implemented by all browsers. JQuery makes necessary extensions to this event object so that this attribute can be used in any browser. Through .tar get, you can determine the elements in the DOM that receive the event first (that is, the actually clicked element ). Furthermore, we know that this references the DOM elements used to process events, so you can write the following code:
$ (Document). ready (function (){
$ ('# Switcher'). click (function (event ){
$ ('# Switcher. click'). toggleClass ('hiddy ');
})
})

$ (Document). ready (function (){
$ ('# Switcher'). click (function (event ){
If(event.tar get = this ){
$ ('# Switcher. click'). toggleClass ('hiddy ');
}
})
})
The Code ensures that the clicked element is <div id = "switcher">, rather than other descendant elements. Now, clicking the button does not collapse the style converter, and clicking the border triggers the collapse operation. However, clicking a tag does not happen because it is also a descendant element. In fact, we can not put the check code here, But modify the button behavior to achieve the goal.

2. Stop event Propagation

The event object also provides a. stopPropagation () method, which can completely prevent event bubbles. Similar to .tar get, this method is also a pure JavaScript feature, but it cannot be safely used in cross-browser environments. However, as long as we use jQuery to register all event handlers, we can safely use this method.

Next, we will delete the prompt statement event.tar get = this and add some code to the button's click handler:

$ (Document). ready (function (){
$ ('# Switcher. click'). click (funtion (event ){
//......
Event. stopPropagation ();
})
})

As before, you need to add a parameter for the function used as a click handler to access the event object. Then, by simply calling event. stopPropagation (), all other DOM elements can be prevented from responding to this event. In this way, the event that you click the button will be processed by the button and will only be processed by the button. Click elsewhere in the style converter to collapse and expand the entire area.

3. Default operation

If we register the click event handler to an anchor element instead of an outer <div>, we have to face another problem: When you click the link, the browser loads a new page. This behavior is not the same as the event handler we are discussing. It is the default operation for clicking the anchor element. Similarly, when you press the Enter key after editing the form, the submit event of the form is triggered. After this event occurs, the form is submitted.

If we do not want to execute this default operation, it is useless to call the. stopPropagation () method on the event object because the default operation does not occur in the normal event propagation stream. In this case, the. preventDefault () method can terminate the event before the default operation is triggered.

It indicates that. preventDefault () is usually used after some verification is completed in the event environment (). For example, during form submission, we will check whether required fields are filled in by the user. If the user does not fill in the corresponding fields, we need to prevent the default operation. We will discuss Form Verification in detail in Chapter 8th.

Event propagation and default operations are independent of each other. when either of them occurs, the other can be terminated. If you want to stop event propagation and default operations at the same time, you can return false in the event handler, which is called on the event object at the same time. stopPropagation () and. preventDefault () is short for preventDefault.