Worry and aimlessness

Add event listener

AddEventListener syntax link

<! 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, "> <title>Document</title> </head> <body> <button id="add_event_button"> </button> <p Id ="add_event_p"></p> <script> const ster =" 76 "Const eventButton = document.getelementById ("add_event_button"); Eventbutton. ster = "76" Have a fire in his heart, eyes have the light is very good ". / / eventButton addEventListener (" click ", addInnerText. Bind (null, eventButton, ster), false); eventButton.addEventListener("click",addInnerText,false); // function addInnerText(eventButton,ster){function addInnerText(event){//event: (https://developer.mozilla.org/zh-CN/docs/Web/API/Event) refers to the content many has the need to look at themselves, later it is possible, write an essay in the console. The log (event); debugger // document.getElementById("add_event_p").innerText += ster; document.getElementById("add_event_p").innerText += event.target.ster; </script> </body> </ HTML >Copy the code

The above example shows a very simple event listener (clicking a button triggers the corresponding callback function, and the newly discovered importance of the callback function’s value passing process, text add and replace).

grammar

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

  1. Target: Element is an Element object. Returns NULL if an element with a specific ID does not exist in the current document.
  2. Type: indicates the type of the listening eventEvents link
    • Click events
    • Mouseenter The mouse is entered
    • Mouseout Mouse moves out
    • Keydown Click any key on the keyboard
    • Keyup Releases any key on the keyboard

    Buried listening events for the video component

    • Pause Video The video has been paused
    • Play video The video has started
    • Ended Video The video stopped and ended
  3. Listener: Receives an event notification object when the listening event type is triggered. The listener must be an object that implements the EventListener[^EventListener] interface, or a function (callback, as shown in the example above). Event, 2.bind.

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

  1. UseCapture: Optional, Boolean value that specifies whether the event is executed in the capture or bubble phase, true– executed in the capture phase, false(default)—- executed in the bubble phase. (This is associated with the event flow, event capture phase -> Event execution phase -> Event bubbling phase)

  2. Options An optional parameter object specifying the listener property. The options available are as follows:

    • Capture: Boolean, indicating that the listener will be triggered when an event capture phase of this type is propagated to the EventTarget.

    • Once: Boolean: the listener is called at most once after being added. If true, the listener is automatically removed after it is called.

    • Passive: Boolean. If true, the listener will never call preventDefault(). If the listener still calls this function, the client ignores it and throws a console warning. See improved scrolling performance with Passive to learn more.

    • Signal: AbortSignal, the listener is removed when AbortSignal abort() is called.

    • MozSystemGroup: can only be used on XBL or Firefox’ Chrome. This is a Boolean that means a listener is added to a system group.