When our event function is triggered, the event function will actually receive an event object.
When we execute the event.stopPropagation() method in our event function, the event bubbling ends here.
Not all types of events support event bubbling.
Event bubbling will only trigger event functions of the same type.
There are two ways to prevent bubbling events, one is a property and the other is a method.
sets or returns whether the event should be propagated to the upper level.
Syntax:
event.cancelBubble = true;
prevents the event from propagating further in the event stream.
Syntax:
event.stopPropagation();
Example: Bind click response functions to three objects that are mutually parent and child.
window.onload = function(){ var span = document.getElementById("sp"); span.onclick = function(){ alert('span tag'); } var box = document.getElementById('box3'); box3.onclick = function(){ alert('box3'); } var body = document.body; body.onclick = function(){ alert('body'); }}
Prevent bubbling for box:
window.onload = function(){ var span = document.getElementById("sp"); span.onclick = function(){ alert('span tag'); } var box = document.getElementById('box3'); box3.onclick = function(event){ alert('box3'); event.stopPropagation(); } var body = document.body; body.onclick = function(){ alert('body'); }}
When we have a bunch of sub-tags with the same events, we can add events to them by traversing the sub-tags, but if a new sub-tag element is added, we must rebind the new sub-tag element, otherwise It's invalid.
binds the event to the ancestor element , so that when the event on the child element is triggered, it will bubble up to the ancestor element , and the event will be processed through the ancestor element's response event. Using bubbling and delegation, you can reduce the number of event bindings and improve program performance.
After we bind an event to the ancestor element, no matter which element we click within the ancestor element, the corresponding event will be triggered. We only hope that the event will be triggered when we click an element within the ancestor element. At this time, we need to give a judgment condition, whether it is the element we want to trigger the event.
returns the element that triggered the event.
Syntax:
event.taget;
window.onload = function(){ var ul = document.getElementById('ul1'); ul.onclick = function(event){ if(event.target.className == 'abq'){ alert('Event triggered!!') } } //Add hyperlink document.getElementById('bt1').onclick = function(){ var li = document.createElement('li'); li.innerHTML = "<a href = 'javascript:;' class='abq'>New tag</a>"; ul.appendChild(li); } }
Through this method, you can bind multiple identical event response functions to the same element.
Use addEventListener() to bind the same event to an element at the same time. Define multiple response functions, so that when the event is triggered, the response functions will be executed in the order in which the functions are bound!
window.onload = function(){ var bt = document.getElementById('bt1'); bt.addEventListener('click',function(){ alert('The first click corresponding function triggered!') },false); bt.addEventListener('click',function(){ alert('The second click corresponding function triggered!') },false); bt.addEventListener('click',function(){ alert('The third click corresponding function triggered!') }, false);}
The response function is executed during the bubbling phase. The default third parameter is false
window.onload = function(){ var box1 = document.getElementById('box1'); var box2 = document.getElementById('box2'); var box3 = document.getElementById('box3'); box1.addEventListener('click',function(){ alert('box1'); },false); box2.addEventListener('click',function(){ alert('box2'); },false); box3.addEventListener('click',function(){ alert('box3'); },false); }
If you want to trigger the event during the capture phase, you can set the third parameter of addEventListener() to true!
window.onload = function(){ var box1 = document.getElementById('box1'); var box2 = document.getElementById('box2'); var box3 = document.getElementById('box3'); box1.addEventListener('click',function(){ alert('box1'); },true); box2.addEventListener('click',function(){ alert('box2'); },true); box3.addEventListener('click',function(){ alert('box3'); },true); }