Shulou(Shulou.com)06/03 Report--

Editor to share with you how to achieve event binding javascript, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Binding method: 1, use "object .on event name = function () {code}" statement binding; 2, use "event source .addEventListener (event name, event handler function name, capture or not);" statement binding; 3, bind events using the "onclick" attribute in the HTML tag.

The operating environment of this tutorial: windows7 system, javascript1.8.5 version, Dell G3 computer.

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

One of the ways to separate HTML from JS is to bind the event handler by using the event property of the event source, in the following format:

Obj.on event name = event handler

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

Example of an event property binding handler for an event source:

OBtn.onclick = function () {/ / oBtn is the event source object whose click event is bound to an anonymous function definition alert ('hi')}

2. Use the addEventListener () binding handler

AddEventListener () is a method in the standard event model that works for all standard browsers. The format for binding event handlers using addEvent Liste ner () is as follows:

Event source .addEventListener (event name, event handler name, whether to capture)

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

You can bind multiple event handlers to the same event type of an event source object by calling addEventListener () multiple times. When an event occurs in an object, all event handlers bound to that event are called and executed in the order in which they are bound. In addition, it should be noted that the this in the event handler bound to addEventListener () points to the event source.

Example of an addEventListener () binding handler:

Document.addEventListener ('click',fn1,false); / / click event binding fn1 function to achieve event bubbling document.addEventListener (' click',fn2,true); / / click event binding fn2 function to achieve event capture

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

It is important to note that when you use the event attribute of the HTML tag to bind the 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 code separated by semicolons.

Example: bind an event handler using the event attribute of the HTML tag.

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

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.