How to bind events in JavaScript [3 ways]

If you want JavaScript to respond to user operations, you must first bind an event handler to the DOM element. The so-called event processing function is a function that processes user operations. Different operations correspond to different names.

In JavaScript, there are three commonly used methods of binding events:

• Bind directly in the DOM element;

• Bind in JavaScript code;

• Bind event listening function.

1. Directly bind

to the DOM element. The DOM element here can be understood as an HTML tag. JavaScript supports binding events directly in tags. The syntax is:
onXXX="JavaScript Code"

where:

onXXX is the event name. For example, mouse click event onclick, mouse double click event ondouble, mouse move in event onmouseover, mouse move out event onmouseout, etc.

JavaScript Code is the JavaScript code for handling events, usually a function.

For example, when you click a button, the code to pop up a warning box can be written in the following two ways.

1. Native function

Example demonstration:

2. Custom function

Example demonstration:

2. Binding in JavaScript code

Binding events in JavaScript code (i.e. within the

Example demonstration:

3. Bind event listening function

Another way to bind events is to use addEventListener() or attachEvent() to bind the event listening function.

addEventListener() function syntax:
elementObject.addEventListener(eventName,handle,useCapture);

attachEvent() function syntax:
elementObject.attachEvent(eventName,handle);

Note: The event handle function refers to the "function name" and cannot contain parentheses.

addEventListener() is a standard method of binding event listening functions and is supported by W3C. Chrome, FireFox, Opera, Safari, IE9.0 and above all support this function; however, IE8. Versions 0 and below do not support this method. It uses attachEvent() to bind the event listening function. Therefore, this method of binding events must deal with browser compatibility issues.

The code for binding events below has been processed for compatibility and can be supported by all browsers:

function addEvent(obj,type,handle){ try{ // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本 obj.addEventListener(type,handle,false); }catch(e){ try{ // IE8.0及其以下版本 obj.attachEvent('on' + type,handle); }catch(e){ // 早期浏览器 obj['on' + type] = handle; } } }

try{ ... } catch(e){ ... } is used here Replace if...else... statements to avoid browser error prompts.

For example, bind an event to a button with id="demo", and a warning box will pop up when the mouse is clicked:

addEvent(document.getElementById("demo"),"click",myAlert); function myAlert(){ alert("又是一个警告框"); }

Example demonstration: