Jquery tips on Event bubbling and event delegation and three methods to prevent and allow event bubbling _ jquery-js tutorial

We all know that there are two mechanisms for jQuery event triggering, one is event delegation, and the other is event bubbling, bubbling, or default events, which are not required in some cases, here, we need some methods to prevent bubbling and default events. This article introduces three methods to block events to different degrees. If you are interested, it may be helpful for you to understand bubble events. First, we all know that there are two mechanisms for jQuery event triggering, one is event delegation, the other is event bubbling (IE is not considered for the moment ). Take the click event as an example, and first attach a piece of code:

Html:

I am a button
Style:. hid {display: none ;}

Script:

$('#box').click(function(){ $(‘#btn').toggleClass(‘hid');})$('#btn').click(function(){ alert('btn');})

The purpose of this Code is that when I click # btn, I want alert to output the "btn" string. When I click # box, I want to hide # btn, however, in actual execution, When I click btn, it will first execute the btn event and then execute the box event, that is, first alert and then hide. If there is something different from what we think, how can we solve this problem? Here we need to think of the event bubbling mechanism, because when I click btn, the event will bubble up to the parent element, until the document Object.

The jQuery version 1.7 (if you recall it correctly) is provided. on () events are used to process events bound to elements. We can use them here. the on () event and the stopPropagation () method are used to prevent event bubbling:

$('#box').on('click','#btn',function(e){ e.stopPropagation()； alert(‘btn');})$('#box').click(function(){ $(‘#btn').toggleClass(‘hid');})

Here I first bind the # btn event with the on, so that when the btn button is clicked, alert ('btn '), but because I am e. stopPropagation () prevents event bubbling, so the toggleClas event will not be triggered. When I click # box, the normal toggleClass event is triggered;

Here I think about how to solve this problem without using. on (). It is similar to listening to the clicked target using addEventListener in native js, and the code is not complex:

$('#box‘).click(function(e) { if (e.target == this) {  $(‘#btn').toggleClass(‘hid'); }})$(‘#btn').click(function() { alert(‘btn');})

In this way, the event can be blocked.

Of course, event bubbling is not both a side effect, that is, event delegation, which is based on event bubbling. For example, in the example above, you can assume that # btn and # box have many elements. When I want to click # btn at the bottom layer and want to trigger the corresponding event, you can click its peripheral element to determine whether the clicked element is the target element, that is, btn. If yes, the btn event is triggered. this example of on () can be rewritten:

$('body').on('click','#btn',function(e){ alert(‘btn');})

Delegate the btn event to the click body for processing.

Finally, let's take a closer look at it. In fact, event delegation and event bubbling are actually two opposite directions in logic. Event delegation is actually the process of event capture, which can be viewed as the process of capturing from the outside to the inside; and event bubbling is the process of bubbling from the inside to the outside.

Blocking and permitting jquery's bubble events (three implementation methods)

The occurrence of a bubble or default event is unnecessary in some cases. Here, you need some methods to prevent the bubble and default events. This article introduces three methods to prevent the event to varying degrees, if you are interested, you may be able to learn more about bubble events.

Sometimes we do not want bubble events or default events, so we need some jquery methods to prevent bubble events and default events.
You can use the following three methods to block data to different degrees.

A: return false ---> In event handler, prevents default behavior and event bubbing.

Return false: In event processing, you can block default events and bubble events.

B: event. preventDefault () ---> In event handler, prevent default event (allows bubbling ).

Event. preventDefault () can prevent default events but allow the occurrence of bubble events during event processing.

C: event. stopPropagation () ---> In event handler, prevent bubbling (allows default behavior )..

Event. stopPropagation () can prevent bubbling but allow the occurrence of default events during event processing.