JS event binding basis --addEventListener

In the JS function can be bound by events addEventListener () for the specified binding element object event handler, and use this function a number of different functions can be registered for the same event as the event target processor. Syntax is as follows

objectTarget.addEventListener(" eventType ", handler , captureFlag );

The above method is objectTarget binding event handler handler, which is the meaning of the parameters:

A parameter: Event Type String (event type attributes without on, such as the click event, mousedown, keypass the like);

Parameter Two: event handler. (Function I have written)

Three parameters: the phase designated listen for events spread (two values true and false, is true to the capture phase, false representation bubbling phase).

Event passes in two ways: bubbling and capture

Capture manner: that is, from outside to inside when executed perform the function, i.e., to perform a subset of the superset layer;

Bubble manner: that is, from outside to inside when executed perform the function, i.e., current from the parent to perform subset of layers;

E.g:

If you <p> element into the <div> element, the user clicks <p> element, which element of the "click" event to be triggered it?

In the bubble , the internal elements of the event will be triggered first, and then trigger the external elements, namely: click event <p> The first element is triggered, then triggers the click event <div> element.

In the capture , the event will first external element is triggered, then the event will trigger internal elements, namely: <div> element to trigger the click event, then click the trigger event <p> element.

The following code illustrates this point:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
    background-color: coral;
    border: 1px solid;
    padding: 50px;
}
</style>
</head>
<body>
    
<p>实例演示了在添加不同事件监听时，冒泡与捕获的不同。</p>
<div id="myDiv">
	<p id="myP">点击段落，我是冒泡。</p>
</div><br>
<div id="myDiv2">
	<p id="myP2">点击段落，我是捕获。 </p>
</div>
    <script>
        document.getElementById("myP").addEventListener("click", function() {
            alert("你点击了 P 元素!");
        }, false);
        document.getElementById("myDiv").addEventListener("click", function() {
            alert(" 你点击了 DIV 元素 !");
        }, false);
        document.getElementById("myP2").addEventListener("click", function() {
            alert("你点击了 P2 元素!");
        }, true);
        document.getElementById("myDiv2").addEventListener("click", function() {
            alert("你点击了 DIV2 元素 !");
        }, true);
    </script>

</body>
</html>

With the illustration to understand what

Capture mode is executed first event div (superset), and then execute the p tag (subset) of the event.

Bubble way is to execute the p tag (subset) of the event, and then execute the event div (superset) of.

JS event binding basis --addEventListener

Event passes in two ways: bubbling and capture

Guess you like