What are the ways to bind events in javascript

How to bind events: 1. Use the "" statement to bind; 2. Use "dom object.on event name = event handling Program" statement binding; 3. Use the "event source.addEventListener(event name, event handler, whether to capture)" statement binding.

The operating environment of this tutorial: Windows 7 system, JavaScript version 1.8.5, Dell G3 computer.

In Javascript, there are three ways to bind events:

• Use the event attribute binding of the HTML tag to bind the handler

• Use the event attribute of the event source to bind the handler

• Use addEventListener() to bind the handler

1. Use the event attribute binding handler of HTML tags

Basic syntax:

<标签 on事件名="事件处理程序" />

Example:

<input type=’button’ onclick=’display()’ />

Sample code:

The above code is the most typical inline binding. Although it can complete the functions we need, it binds the structural style behavior in the same tag, which is not conducive to later maintenance.

2. Use the event attribute binding handler of the event source

Basic syntax:

dom对象.on事件名 = 事件处理程序（通常是一个匿名函数）

Through dynamic binding This idea improves the above question, and the effect is as shown in the following figure:

3. Use addEventListener() to bind the handler

Although the method of binding event handlers using the event attribute of the event source object is simple, it has a shortcoming: an event can only be bound to one handler, and the event handler bound later will overwrite the previous one. The bound event handler function. In actual applications, an event from an event source may be processed by multiple functions.

When an event source needs to be processed using multiple functions, you can call addEventListener() (for standard browsers) through the event source to bind the event processing function to achieve this requirement. The way an event source binds multiple event functions through methods is to call addEventListener() multiple times on the event source object, and each call only binds one event processing function.

addEventListener() is a method in the standard event model and is valid for all standard browsers. The format of using addEvent Lister() to bind an event handler is as follows:

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

The parameter "event name" is an event name without "on"; the parameter "whether to capture" is a Boolean value, the default value It is false. When false, event bubbling is achieved, and when true, event capture is achieved.

By calling addEventListener() multiple times, you can bind multiple event handlers to the same event type of an event source object. When an event occurs on an object, all event handling functions bound to the event will be called and executed in sequence in the order in which they were bound. In addition, it should be noted that this in the event handling function bound by addEventListener() points to the event source.

addEventListener() binding handler example:

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

[Related recommendations: javascript learning tutorial]

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