AddEventListener Event Method One, the event function call syntax:
Element.addeventlistener (event, function, usecapture)
Parameters |
Describe |
Event |
Have to. A string that specifies the event name. Note: do not use the "on" prefix. For example, use "click" instead of "onclick".
|
function |
Have to. Specifies the function to execute when the event is triggered.
When the event object is passed into the function as the first argument. The type of event object depends on the specific event. For example, the "click" Event belongs to the MouseEvent (mouse event) object. |
Usecapture |
Optional. A Boolean value that specifies whether the event is executed during the capture or bubbling phase.
Possible values:
- True-the event handle is executed during the capture phase
- false-false-default. Event handles are executed during the bubbling phase
|
Second, Event trigger mode (events):
Click |
Left mouse button click |
MouseOver |
Move the mouse over to the top |
Mouseout |
Mouse away |
MouseMove |
Mouse movement |
Third, Compatibility:
If the browser does not support the AddEventListener () method, you can use the Attachevent () method instead.
The following examples demonstrate a cross-browser workaround:
var x = document.getElementById ("mybtn"); if (X.addeventlistener) { // all major browsers except IE 8 and earlier IE version x.addeventlistener ("click" elseif (x.attachevent) { // IE 8 and earlier IE version x.attachevent ("onclick" , myFunction);}
Iv. removing event Syntax:
RemoveEventListener (event,function);
V. Examples:
Registering events, removing events
<button id= "Mybtn" > Point I </button><p id= "demo" ><script>document.getElementById (" Mybtn "). AddEventListener (" click ", MyFunction);//register Event function myFunction () { document.getElementById ("Demo"). InnerHTML = "Hello World";}
document.getElementById ("Mybtn"). RemoveEventListener ("click", MyFunction);//Remove Event </script>
"JavaScript" AddEventListener event method