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

This article mainly shows you "what are the ways to bind javascript events", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "what are the ways to bind javascript events" this article.

The way to bind events: 1, use "" statement binding; 2, use "dom object .on event name = event handler" statement binding; 3, use "event source .addEventListener (event name, event handler, capture or not)" statement binding.

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

In Javascript, there are three ways to bind events:

Event attribute binding handlers using HTML tags

Use the event property binding handler of the event source

Use the addEventListener () binding handler

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

Basic syntax:

Example:

Sample code:

The above code is the most typical inline binding, although it can complete the functions we need, but it binds the structure, style and 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 object .on event name = event handler (usually an anonymous function)

The above question is improved by the idea of dynamic binding, and the effect is shown in the following figure:

3. Use the addEventListener () binding handler

Although it is simple to bind an event handler using the event properties of an event source object, it has a deficiency: only one handler can be bound to an event, and the event handler that is bound later overrides the event handler that was previously bound. In practical applications, an event from an event source may be handled by multiple functions.

When an event source needs to be handled by multiple functions, you can bind the event handler by calling addEventListener () (for standard browsers) through the event source to achieve this requirement. An event source binds multiple event functions through a method by calling addEventListener () multiple times on the event source object, where only one event handler is bound for each call.

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, 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 implement event bubbling document.addEventListener (' click',fn2,true); / / click event binding fn2 function to implement event capture all of the above article "what are the ways to bind javascript events?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.