Home > Developer > JavaScript
Several Concepts of javascript-related events
For events, we need to understand the following concepts: events, event handlers, event types, event streams, event bubbles, event capturing, and event objects; event performance optimization (event delegation, removal of Event Handlers); Common Browser compatibility issues.
The client javascript program adopts the asynchronous event-driven programming model.
Concepts of related events:
Event type: a string that describes the types of events that occur;
Event target: the event object;
Event handler: a function that processes or responds to events;
Event object: an object related to a specific event and containing detailed information about the event;
Event propagation: the process in which the browser determines the object to start its event processing program;
Register the event handler:
1. Set javascript Object Attributes;
2. Set html tag attributes
3. addEventListener or attachEvent (the latter is IE)
?
| 1 2 3 4 5 6 7 |
Function addEvent (target, type, handler ){ If (target. addEventListener ){ Target. addEventListener (type, handler, false ); } Else { Target. attachEvent ("on" + type, function (event) {return handler. call (target, event )}); } } |
Three phases of event propagation:
1. occurs before the target processing function, which is called the 'capturing 'stage;
2. Call the event handling of the object itself;
3. Event bubbling stage;
In javascript, you can specify events for an element in the following three ways:
1. Use the onclick attribute in html
2. Use the onclick attribute in javascript
3. Use the addEvenListener () method in javascipt.
Comparison of the three methods
(1) In the second and third methods, an event object can be passed into the function and its corresponding attributes can be read. method 1 cannot.
(2) The second and third types of content are preferred. The first is not conducive to separating content from the event, nor to using the relevant content of the event object.
Syntax details
(1) In the first method, onclick is case-insensitive, but in the second method, it must be in lower case. HMTL is not case sensitive, whereas JS is case sensitive.
(2) In the second and third methods, no double quotation marks are specified for the function name, while the first method is an HTML attribute, which requires double quotation marks.
(3) The first method requires parentheses, and the second and third methods do not.
?
| 1 2 3 |
Onclick = "clickHandler ()" Document. getElementById ("jsOnClick"). onclick = clickHandler2; Document. getElementById ("addEventListener"). addEventListener ("click", clickHandler2 ); |
Complete code:
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<! DOCTYPE html> <Html> <Head> <Meta charset = "UTF-8"> <Title> Even Deom </title>
</Head> <Body> <Button id = "htmlOnClick" onclick = "clickHandler ()"> htmlOnClick </button> <Button id = "jsOnClick"> jsOnClick </button> <Button id = "addEventListener"> addEventListener </button>
<Script defer> Function clickHandler (){ Alert ("onclick attribute in html "); } Function clickHandler2 (e ){ Alert(e.tar get. innerHTML ); } Document. getElementById ("jsOnClick"). onclick = clickHandler2; Document. getElementById ("addEventListener"). addEventListener ("click ", ClickHandler2 ); </Script> </Body> </Html> |
The above is all the content of this article. I hope you will like it.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
