How JavaScript binds events [3 kinds]

to get JavaScript to respond to a user's actions, first bind the DOM element to the event handler. The so-called event handler function is the function that handles the user operation, and different operations correspond to different names.

in JavaScript, there are three common ways to bind events:

1. Bind directly in the DOM element;
2. Binding in JavaScript code;
3. Binds the event listener function.

I. Binding directly in the DOM element

I. Binding directly in the DOM elementThe DOM elements here can be understood as HTML tags. JavaScript supports the direct binding of events in tags, with the following syntax:
    onxxx=" JavaScript Code "

where:

• OnXXX is the event name. For example, mouse click event onclick, mouse double-click event ondouble, mouse move into event onmouseover, mouse move out event onmouseout, etc.
• JavaScript code is the JavaScript that handles events, typically functions.

For example, if you click a button, the code that pops up the warning box has the following two notation.

1. Native Functions

<input  onclick= "alert (' Thank you support ')"  type= "button"  value= "click Me, pop Up warning box"/>

2. Custom Functions

<input  onclick= "Myalert ()"  type= "button"  value= "click Me, pop Up warning box"/><script type= "Text/javascript" >function Myalert () {    alert ("Thank you Support");} </script>

Two. Binding in JavaScript code

Binding events in JavaScript code (that is, in <script> tags) separates JavaScript code from HTML tags, makes the document structurally clear and easy to manage and develop.

The syntax for binding an event in JavaScript code is:
elementobject.onxxx=function () {//Event handling code}

among them:

• Elementobject is a DOM object, which is a DOM element. The
• OnXXX is the event name.

For example, to bind an event to a button that id= "demo", display its Type property:

<input  id= "demo"  type= "button"  value= "click me, Show Type property"/><script type= "Text/javascript" > document.getElementById ("Demo"). Onclick=function () {    alert (this.getattribute ("type"));  This is the HTML element of the event that is currently occurring, and this is the <div> tag}</script>

Three. Binding Event listener function

Another way to bind an event is to use AddEventListener () or attachevent () to bind the event listener function.

addeventlistener () function syntax:
elementobject.addeventlistener (eventname,handle,usecapture);

parameter	description
elementobject	dom objects (that is, DOM elements).
eventname	event name. Note that the event name here is not "on", such as mouse click event  click, mouse double click event  doubleclick, mouse move into event mouseover, mouse move out event mouseout, etc.
handle	event handle function, which is the function used to handle the event.
usecapture	boolean type, whether to use capture, general use false. This involves the concept of JavaScript event flow, which will be explained in detail in subsequent chapters.

attachevent () function syntax:
Elementobject.attachevent (Eventname,handle);

Parameters	Description
Elementobject	A DOM object (that is, a DOM element).
EventName	The event name. Note that, unlike AddEventListener (), the event name here has "on", such as mouse click event onclick, mouse double click event OnDoubleClick, mouse move into event onmouseover, mouse move out event onmouseout, etc.
Handle	The event handle function, which is the function used to handle the event.

Note: The event handle function refers to" function name "and cannot be enclosed with parentheses.

addeventlistener () is the standard method of binding event listener functions, supported by the publisher, Chrome, FireFox, Opera, Safari, This function is supported by IE9.0 and above, but IE8.0 and the following versions do not support this method, and it uses attachevent () to bind the event listener function. Therefore, this method of binding an event must handle browser compatibility issues.

The following code, which binds the event, is compatible and can be supported by all browsers:

function Addevent (obj,type,handle) {    try{  //Chrome, FireFox, Opera, Safari, IE9.0 and above        Obj.addeventlistener (Type,handle,false);    } catch (e) {        try{  //IE8.0 and the following version            obj.attachevent (' on ' + Type,handle);        } catch (E) {  ///early browser            obj[' on ' + type] = handle;}}    }

Here you use the try{...} catch (e) {...} instead of If ... else ... Statement to avoid errors in the browser.

For example, to bind an event to a button that id= "demo", A warning box pops up when the mouse clicks:

Addevent (document.getElementById ("demo"), "click", Myalert);

function Myalert () {alert ("Again a Warning box");}

How JavaScript binds events [3 kinds]