Examples of JavaScript's method to prevent event bubbles and default behavior

Default behavior

In JavaScript, the default event behavior refers to the actions performed automatically by the browser when a specific event occurs. For example, when a user clicks a link, the browser will automatically jump to the link's URL page; the form element's action attribute value is the address to which the form content is to be submitted, and when the user clicks the nested submit button in the form element, there will be a default submit operation.

And sometimes, these default behaviors are not needed. For example, when we submit a form, we hope that ajax will be sent to the server asynchronously, we do not need form's default event submission jump behavior.

In a word, it is the behavior that comes with html elements.

Block default behavior

1. Use the () method:

This is one of the most common ways to prevent event default behavior. When the event is triggered, it can be called()Method to prevent the browser from performing its default behavior. For example, when clicking a link, you can prevent the browser from jumping to the linked URL page in the following ways:

('a').addEventListener('click', function(event) {
  ();
});

2. Use return false:

In some cases, it can be used in event handlersreturn falseto prevent event default behavior. This method is often used for inline event handlers, e.g.onclickproperty. For example, the following code will block the default behavior when clicking a link:

Note: If written in jQuery, it can prevent default behavior and bubbles at the same time.

&lt;a href="#" rel="external nofollow" onclick="return false;">Click I won't jump</a>

3. Use properties:

In older versions of IE browsers, you can useProperties to block event default behavior (now many browsers also support it). WillSet asfalseCan prevent execution of default behavior. For example:

('a').attachEvent('onclick', function(event) {
   = false;
});

4. Use the() method (only prevent event propagation):

Prevent the spread of events.()Methods are used to prevent further propagation of events, rather than directly blocking the default behavior of events. It can be used to stop events from bubbled to parent elements or other event listeners. For example:

('.child').addEventListener('click', function(event) {
  ();
});

5. Use the cancelable property

Check the status. This property indicates whether the event can be cancelled and returns a Boolean value. This property is a read-only property. true means cancellation.

<a  href="" rel="external nofollow"  rel="external nofollow" >Baidu</a>
<script>
    let test = ('test');
     = function (e) {
        // Can cancel the default behavior of events        ()
    }
</script>

6. defaultPrevented method

Check the status.  It is also an attribute of event, indicating whether the default behavior is blocked, and true means it is blocked.

<a  href="" rel="external nofollow"  rel="external nofollow" >Baidu</a>
<script>
    let test = ('test');
     = function (e) {
        ()
        ()  // true
    }
</script>

It should be noted that different events have different default behaviors, so the methods to block default behaviors may vary. Some common event default behaviors include form submission, link clicks, keyboard input of form elements, etc.

To sum up, use()Methods are the most common and recommended ways to block events' default behavior. Other methods such asreturn falseandAttributes may be useful in certain situations, but not as()Flexible and universal method. in addition,()Methods are used to prevent events from propagating, rather than directly blocking the default behavior of events.

Event bubbles

Event bubble means that when a child element triggers an event, the event will bubble to its element until it reaches the document root node.

Stop events from bubbles

()

("child").addEventListener("click", function (event) {
  // Prevent events from bubbles  ();
});

Summarize

This is the article about JavaScript blocking event bubbles and default behaviors. For more related content on JS blocking event bubbles and default behaviors, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!