Home > Developer > JavaScript
Several concepts related to javascript events: javascript events
The client javascript program adopts the asynchronous event-driven programming model.
Concepts of related events:
Event type ):String used to indicate the type of event;
Event target ):Event object;
Event handler ):Functions that process or respond to events;
Event object ):Objects related to a specific event and containing detailed information about the event;
Event propagation ):The browser determines the process of starting the event handler for an object;
Register the event handler:
1. Set javascript Object Attributes;
2. Set html tag attributes
3. addEventListener or attachEvent (the latter is IE)
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 canSpecify an event for an element,MethodThere are three types:
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.
onclick="clickHandler()" document.getElementById("jsOnClick").onclick = clickHandler2; document.getElementById("addEventListener").addEventListener("click", clickHandler2);
Complete code:
<!DOCTYPE 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
