JavaScript implements an example of the interrupt propagation and Behavior Blocking method for an event, and a javascript example

JavaScript implements an example of the interrupt propagation and Behavior Blocking method for an event, and a javascript example

Event Propagation

MicroSoft's design is that when an event is triggered on an element, the event is then triggered on the parent node of the node, and so on. The event is continuously propagated along the DOM tree, until the document element of the top-level object is reached. This bottom-up event propagation method is called "event bubbling", that is, event propagation.

How can we interrupt the spread of events?

stopPropagation()W3c cancel bubble

cancleBubble = trueIE cancels bubbling

Default Effect of canceling an event:

returnValue = falseIE cancel Event Effect

defaultPrevent()W3c event cancellation effect

<div id='aa'> <div id='bb'> <div id ='cc'></div> </div></div>

 #aa{ width: 600px; height: 600px; background: gray;}#bb{ width: 400px; height: 400px; background: green;}#cc{ width: 200px; height: 200px; background: red;}

Capture writing stop propagation start from top to bottom

Document. getElementById ('A '). addEventListener ('click', function (ev) {alert ('A'); ev. stopPropagation () ;}, true); // The result is captured by aa plus true and changed from bubble to capture document from top to bottom. getElementById ('bb '). addEventListener ('click', function () {alert ('bb ')}, true); document. getElementById ('cc '). addEventListener ('click', function () {alert ('cc')}, true );

Bubble writing stops propagation from bottom up

Document. getElementById ('A '). addEventListener ('click', function () {alert ('A') ;}); // Add true to change from bubble to capture document from top to bottom. getElementById ('bb '). addEventListener ('click', function () {alert ('bb')}); document. getElementById ('cc '). addEventListener ('click', function (ev) {alert ('cc'); ev. stopPropagation (); // ev. cancleBubble = true; // cancel the bubbling method under IE}); // The result is that cc stops propagation}

Cancel Event Effect

returnValue = false// IE cancels the Event Effect

preventDefault()// W3c cancel Event Effect

Document. getElementsByTagName ('A') [0]. onclick = function (ev) {alert ('click'); // The event ends, but the function continues to run. // ev. preventDefault (); alert ('intercept ');}

Summary

The above is all about this article. I hope this article will help you in your study or work. If you have any questions, please leave a message.