Home >Web Front-end >JS Tutorial >How to bind events in javascript

How to bind events in javascript

青灯夜游Original: 2021-07-19 14:14:273889browse

Method: 1. Use the event attribute onclick of the HTML tag to bind the handler, with the syntax "onclick="event handler""; 2. Use the event attribute of the event source to bind the handler, with the syntax "obj. on event name = handler function"; 3. Use addEventListener() to bind the handler.

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

In order for the browser to automatically call the corresponding event handler to handle the event when the event occurs, it is necessary to bind the event handler to the event source (the bound event handler is also called a registered event handler).

There are 3 ways to bind event handlers:

##Use the event attribute onclick of the HTML tag to bind the event handler. This method sets the event attribute value of the tag to the event handler. This method is not recommended now.
Use the event attribute of the event source to bind the event handler function. This method sets the event attribute value of the event source object to the event processing function.
Use the addEventListener() method to bind events and event handling functions (versions before IE9 use the attach Event() method.

1. Use the event attribute of the HTML tag to bind the handler.

It should be noted that when using the event attribute of the HTML tag to bind the event handler, the event The script code in the attribute cannot contain a function declaration, but can be a function call or a series of script codes separated by semicolons.

[Example 1] Bind an event handler using the event attribute of the HTML tag .

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用HTML标签的事件属性绑定事件处理程序</title>
</head>
<body>
     <input type="button" onclick="var name=&#39;PHP中文网&#39;;alert(name);" value="事件绑定测试"/>
</body>
</html>

The button of the above code is the target object of the click event, which binds two script codes through the event attribute onclick of the label for event processing. The above code is run after the Chrome browser , when the user clicks the button, a warning dialog box will pop up, and the result is as shown in the figure below.

How to bind events in javascript

When the event handler involves more than 2 codes, if there are still Binding an event handler like Example 1 makes the program less readable. Instead, define the event handler as a function and call the function in the event property.

[Example 2] The event attribute of the HTML tag is a function call.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML标签的事件属性为函数调用</title>
<script>
     function printName(){
          var name = "PHP中文网";
          alert(name);
     }
</script>
</head>
<body>
     <input type="button" onClick="printName()" value="事件绑定测试"/>
</body>
</html>

The execution result of the above code is exactly the same as Example 1. As can be seen from the above two examples, the tag event attribute will JS script code and HTML tags are mixed together, which violates the Web standard principle that JS and HTML should be separated. Therefore, it is not good to use the event attribute of HTML tags to bind event handlers, and should be avoided in actual applications.

2. Bind handlers using event attributes of event sources

One of the ways to separate HTML and JS is by using event sources. The event attribute binds the event processing function. The binding format is as follows:

obj.on事件名 = 事件处理函数

obj in the format is the event source object. The bound event program is usually the definition statement of an anonymous function, or a function name.

Example of event attribute binding handler of event source:

oBtn.onclick = function(){//oBtn为事件源对象，它的单击事件绑定了一个匿名函数定义
      alert(&#39;hi&#39;)
};

[Example 3]Use the event attribute of event source to bind event handler function.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用事件源的事件属性绑定事件处理函数</title>
<script>
     window.onload = function(){//窗口加载事件绑定了一个匿名函数
          //定义一个名为fn的函数
          function fn(){
               alert(&#39;hello&#39;);
          }
          //获取事件源对象
          var oBtn1 = document.getElementById("btn1");
          var oBtn2 = document.getElementById("btn2");
         
          //绑定一个匿名函数
          oBtn1.onclick = function(){
               alert("hi");
          }
          //绑定一个函数名
          oBtn2.onclick = fn;
     };
</script>
</head>
<body>
   <input type="button" id="btn1" value="绑定一个匿名函数">
   <input type="button" id="btn2" value="绑定一个函数名">
</body>
</html>

Three events are processed in the above JS code: the document window loading event load and the click event of the two buttons. The processing of these three events is achieved by binding the event processing function using the event attribute of the event source. The load event and the click event of the first button are bound to an anonymous function, while the click event of the second button is bound to a function name.

It is important to note that you cannot add "()" after the function name bound by oBtn2, otherwise the bound function will become a function call, which will automatically occur when the JS engine executes this line of code. The call is executed, but it will not be executed when the event is triggered.

The window loading event function will be processed after all elements of the document are loaded, and the click event will be triggered when each button is clicked. After clicking the first and second buttons, two warning dialog boxes showing "hi" and "hello" will pop up respectively.

How to bind events in javascript

##3. Use addEventListener() to bind the handlerUsing the event attribute of the event source object to bind event handlers is simple, but it has a shortcoming: an event can only be bound to one handler, and the event handler bound later will overwrite the previously bound event. processing function. In actual applications, an event from an event source may be processed by multiple functions.

当一个事件源需要使用多个函数来处理时，可以通过事件源调用 addEventListener()（针对标准浏览器）来绑定事件处理函数以实现此需求。一个事件源通过方法绑定多个事件函数的实现方式是：对事件源对象调用多次 addEventListener()，其中每次的调用只绑定一个事件处理函数。

addEventListener() 是标准事件模型中的一个方法，对所有标准浏览器都有效。使用 addEvent Liste ner() 绑定事件处理程序的格式如下：

事件源.addEventListener(事件名称,事件处理函数名,是否捕获);

参数“事件名称”是一个不带“on”的事件名；参数“是否捕获”是一个布尔值，默认值为 false，取 false 时实现事件冒泡，取 true 时实现事件捕获。

通过多次调用 addEventListener() 可以为一个事件源对象的同一个事件类型绑定多个事件处理函数。当对象发生事件时，所有该事件绑定的事件处理函数就会按照绑定的顺序依次调用执行。另外，需要注意的是，addEventListener() 绑定的事件处理函数中的 this 指向事件源。

addEventListener() 绑定处理程序示例：

document.addEventListener(&#39;click&#39;,fn1,false);//click事件绑定fn1函数实现事件冒泡
document.addEventListener(&#39;click&#39;,fn2,true);//click事件绑定fn2函数实现事件捕获

【例 4】使用 addEventListener() 绑定事件函数。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用addEventListener()/attachEvent()绑定事件函数</title>
<script>
     function fn1(){
          alert("fn1()");
     }
     function fn2(){
         alert("fn2()");
     }
     function bindTest(){
         document.addEventListener(&#39;click&#39;,fn1,false);//首先绑定fn1函数   
         document.addEventListener(&#39;click&#39;,fn2,false);   
     }
     bindTest();//调用函数
</script>
</head>
<body>
</body>
</html>

上述代码在浏览器中运行后，当单击文档窗口时，会依次弹出显示“fn1()”和“fn2()”的警告对话框。

How to bind events in javascript

【推荐学习：javascript高级教程】

The above is the detailed content of How to bind events in javascript. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：What are the main frameworks of javascript?Next article：What are the main frameworks of javascript?

See more

How to bind events in javascript

Related articles