What are the methods of javascript event binding?-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

What are the methods of javascript event binding?

青灯夜游

Sep 08, 2021 pm 06:15 PM

javascriptevent binding

Binding method: 1. Use the "object.on event name = function(){code}" statement to bind; 2. Use "event source.addEventListener(event name, event processing function name, whether to capture );" statement binding; 3. Use the "onclick" attribute in the HTML tag to bind the event.

What are the methods of javascript event binding?

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

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

One of the ways to separate HTML and JS is by using the event attribute binding of the event source 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.

Event source event attribute binding handler example:

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

2. Use addEventListener() to bind the handler

addEventListener() Yes A method in the standard event model, valid in 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(&#39;click&#39;,fn1,false);//click事件绑定fn1函数实现事件冒泡
document.addEventListener(&#39;click&#39;,fn2,true);//click事件绑定fn2函数实现事件捕获

3. Use the event attribute binding handler of the HTML tag

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

Example: 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;张三&#39;;alert(name);" value="事件绑定测试"/>
</body>
</html>

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

[Recommended learning: javascript advanced tutorial]

The above is the detailed content of What are the methods of javascript event binding?. 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