A Stream of events (event flow)
The event model is divided into two types: bubbling events, catch events.
Bubble type (dubbed bubbling) Event: The event is triggered from the most accurate object to the most imprecise object in the order of events.
Capturing event: It is the opposite of a bubbling event, which triggers the event to be triggered from the most imprecise object to the most precise object.
Capture events are also called event models from the top down (DOM hierarchy).
Because IE browsers do not support capture events, they are not widely used.
B Event Monitoring
I > Universal Listening method
Example one:
Copy Code code as follows:
<p onclick= "alert (' clicked on ');" >click me</p>
Example two:
Copy Code code as follows:
<title> Demo </title>
<meta name= "Author" content= "Xugang"/>
<script type= "Text/javascript" >
Add all label events to the OnLoad event
Window.onload = function () {
Find Object
var o_p = document.getElementById ("MYP");
To add an object's OnClick event
O_p.onclick = function () {
Alert ("I was clicked on");
}
}
</script>
<body>
<p id= "MYP" >click me</p>
</body>
This code implements the separation of structure and behavior.
To the browser to add a listener method, divided into two types: IE in the Listener method, the standard Dom listening method.
II > IE in the Monitoring method
In IE browser, each element has two methods to handle the listener of the event. respectively: Attachevent () and DetachEvent ().
Attached event method: [Object].attachevent ("Event name", method name);
Detach Event Method: [Object].detachevent ("Event name", method name);
such as: O_p.detachevent ("onclick", click_a);
Example:
Copy Code code as follows:
<title> Demo </title>
<meta name= "Author" content= "Xugang"/>
<script type= "Text/javascript" >
<!--
function Click_a () {
Alert ("Click_a");
Delete a listener function
O_p.detachevent ("onclick", Click_b);
}
function Click_b () {
Alert ("Click_b, I only call once.") ");
}
var o_p;
Window.onload = function () {
O_p = document.getElementById ("MYP");
Add a listener function click_a
O_p.attachevent ("onclick", click_a);
Add a listener function Click_b
O_p.attachevent ("onclick", Click_b);
}
-->
</script>
<body>
<p id= "MYP" >click me</p>
</body>
Attention:
This way you can add multiple listener functions to the same element;
In IE browser, functions are executed in the same order as the function is added;
In IE browser, although the function has a sequential order of execution, but will be called at the same time;
III > Standard DOM listener methods
In browsers using the standard DOM, there are two methods for each element to handle the listener of the event. respectively: AddEventListener () and RemoveEventListener ().
Add Event Listener Method: [Object].addeventlistener ("Event name", Method name, event model);
Remove Event Listener method: [Object].removeeventlistener ("Event name", Method name, event model);
Attention:
The "event name" Here cannot be brought on, such as: Click (if it is onclick is wrong!) ）
The event model is a Boolean type and is usually set to false, or "bubbling" event. (Catch type event if true)
Example:
Copy Code code as follows:
<title> Demo </title>
<meta name= "Author" content= "Xugang"/>
<script type= "Text/javascript" >
<!--
function Click_a () {
Alert ("Click_a");
Delete a listener function
O_p.removeeventlistener ("click", Click_b,false);
}
function Click_b () {
Alert ("Is click_a deleted and cannot be invoked at one time.") ");
}
var o_p;
Window.onload = function () {
O_p = document.getElementById ("MYP");
Add a listener function click_a
O_p.addeventlistener ("click", Click_a,false);
Add a listener function Click_b
O_p.addeventlistener ("click", Click_b,false);
}
-->
</script>
<body>
<p id= "MYP" >click me</p>
</body>
Under the Firefox run through, in IE under the error.
Attention:
You can also add multiple listener functions to the same element using this method;
In Firefox, the order of execution of functions is the same as the order in which the functions are added (Firefox is the opposite of IE);
In the Firefox browser, the function added in this way is to execute the other one and execute the other.
Current 1/2 page
12 Next read the full text
