addEventListener

76 instruments 2021-09-15 10:51:26

care-laden , Aimless

literal translation : Add event listener

addEventListener Syntax Links

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="add_event_button"> Monitoring events </button>
<p id="add_event_p"></p>
<script>
const ster = "76 documents . There is fire in my heart 、 There is light in the eyes "
const eventButton = document.getElementById("add_event_button");
eventButton.ster = "76 documents . There is fire in my heart 、 It's good to have light in your eyes "
// eventButton.addEventListener("click",addInnerText.bind(null,eventButton,ster),false);
eventButton.addEventListener("click",addInnerText,false);
// function addInnerText(eventButton,ster){
function addInnerText(event){
//event:Pointer events Pointer event (https://developer.mozilla.org/zh-CN/docs/Web/API/Pointer_events)
console.log(event);
debugger
// document.getElementById("add_event_p").innerText += ster;
document.getElementById("add_event_p").innerText += event.target.ster;
//event.target: yes button#add_event_button Equivalent to... Above eventButton
}
</script>
</body>
</html>
 Copy code 

The above example shows a very simple event monitoring ( Click the button to trigger the corresponding callback function , The value passing process of callback function is the newly discovered focus , Text add replace ).

grammar

target.addEventListener(type, listener, options); target.addEventListener(type, listener, useCapture); target.addEventListener(type, listener, useCapture, wantsUntrusted ); // Gecko/Mozilla only

  1. target:element It's a Element object . If there is a specific in the current document ID If the element does not exist, it returns null.
  2. type: A string representing the type of listening event events link
    • click Click event
    • mouseenter Mouse into
    • mouseout Mouse removal
    • keydown Click any key on the keyboard
    • keyup Release any key on the keyboard

    Embedded code monitoring events for video components

    • pause video Video paused
    • play video Video started
    • ended video Video stopped , At the end of the video
  3. listener: When the type of event being monitored triggers , Will receive an event notification object .listener It has to be an implementation EventListener[^EventListener]( annotation : More remote knowledge ) Object of the interface , Or a function ( As shown in the example above callback)( The callback function passes values to see the code , Two value transfer methods 1. The original event,2.bind Pass value ).

[^EventListener]'{handleEvent: function (event) { alert('Element clicked through handleEvent property!'); }}'

  1. useCapture: Optional , Boolean value , Specifies whether the event is executed in the capture or bubble phase ,true-- Execute... In the capture phase ,false( Default )---- In the bubbling phase .( This is related to the event flow , Event capture phase -> Event execution phase -> Event bubbling stage )

  2. options( In the back )

// Updated from time to time ... To be continued

Please bring the original link to reprint ,thank
Similar articles

2021-09-15

2021-09-15