Js Bubbling Event Blocking

1.Event Target

now, the variables in the event handlerEventthe event object is saved. andEvent.targetproperty holds the target element in which the event occurred. This property isDOM APIbut is not implemented by all browsers. JqueryThe event object is extended to the extent necessary to use this property in any browser. Through. Target, you can determineDomThe element in which the event was first received (that is, the element that was actually clicked). And, we knowThisrefers to the handling of events.Dom element, so you can write the following code:
$ ( Document). Ready (function () {
 $ (' #switcher '). Click (Function (event) {
  $ (' #switcher. Button '). Toggleclass (' hidden ');
  })
 })
  
$ (document). Ready (function () {
 $ (' #switcher '). Click (Function (event) {
  if (event.target==this) {
  $ (' #switcher. Button '). Toggleclass (' hidden ');
  }
  })
 })
the code at this point ensures that the clicked element is<div id= "Switcher" >, not other descendant elements. Clicking the button now does not collapse the style converter, and clicking the border will trigger the collapse operation. However, clicking a label also doesn't happen because it is also a descendant element. In fact, we can not put the check code here, but by modifying the behavior of the button to achieve the goal.

2. Stop Event Propagation

. Stoppropagation () method, which can completely prevent event bubbling. Similar to . Target javascript jquery

below, we'll delete the check statement we just added Event.target = = This

$" (document). Ready (function () {
 $ ( ' #switcher. Button '). Click (Funtion (Event) {
&NBSP;&NBSP;//......
   event.stoppropagation ();
&NBSP;&NBSP;})
&NBSP;}) &NBSP;

   Event.stoppropagation () Dom

3. Default Action

If we register the click event handler with an anchor element instead of an outer layer of <div> , we face another problem: when the user clicks the link, the browser loads a new page. This behavior is not the same concept as the event handler we are discussing, it is the default action for clicking the anchor element. Similarly, when the user presses the ENTER key after editing the form, it will touch the submit event of the publication , after which the form submission does not actually occur.

If we don't want to do this default action, The . Stoppropagation () . Preventdefault () method you can terminate the event before triggering the default action  

hint  < Span style= "margin:0px; padding:0px; font-family: Arial "> When certain validations have been completed in the context of an event, the . Preventdefault () is usually used. 8

event propagation and default operations are two sets of mechanisms that are independent of each other, and can terminate the other when either party occurs. If you want to stop event propagation and the default operation at the same time, you can return false in the event handler ,which is called at the same time on the event object . Stoppropagation () and . Preventdefault () a shorthand way.

Js Bubbling Event Blocking