Example analysis of event capture model and bubbling model in js_javascript skills

The examples in this article describe the event capture model and bubbling model in js. Share it with everyone for your reference.

The specific implementation method is as follows:

Example 1:

Copy code The code is as follows:

Example 2:

Copy code The code is as follows:

addEventListener: The third parameter is optional. By default, it is false, which means the bubbling model, that is, the smallest layer (the div with the id of son) is triggered first; and if the true parameter is added, it means capture. Model (from html-->body--->div), triggered at this level.

The HTML code of Example 1 has two divs. The small div is contained in the large div. When the small div is clicked, the alert('par') event will be triggered first; then the alert('son') event will be triggered. . Example 2 is just the opposite.

If the "object.onclick" attribute is used to trigger the event, the bubbling model is used.

IE does not support addEventListener, but uses attachEvent. But attachEvent does not support the third parameter, it does not capture the model.

I hope this article will be helpful to everyone’s JavaScript programming design.