This article for everyone detailed analysis of the JS binding event for everyone's reference, the specific contents are as follows
There are compatibility issues with binding events, Obj.attachevent () was used in earlier versions of IE, and AddEventListener () was used by other browsers.
Both methods have three parameters, namely, the event type, the event function , the last boolean value , True or false.
True indicates that execution occurs during the event capture phase, and false in the event bubbling phase.
Because IE only supports event bubbling, in most cases, the event handler is added to the bubbling phase of the event stream, which defaults to "false"
This allows you to maximize compatibility with a variety of browsers. It is best to add event handlers to the capture phase only if you need to intercept the event before it reaches the target. Registering an event handler in the event capture phase is not recommended if it is not specifically required.
Event bindings compatible with each browser:
function addevent (obj, EventType, callback, bubble) {
if (obj.addeventlistener) {
Obj.addeventlistener ( EventType, callback, bubble);
else{
obj.attachevent (EventType, callback, bubble);
}
When called, note that the callback function does not need braces, similar to settimeout.
This part is relatively easy to understand, for the last parameter, I believe many people do not very understanding, in short, I still need to write a program test to really good grasp.
HTML section:
<!doctype html>
JS content: (first case)
<script>
var out = document.getElementById (' out ');
var middle = document.getElementById (' middle ');
var inner = document.getElementById (' inner ');
When you click Inner, the triggering sequence is: inner-------Middle
out Out.addeventlistener (' click ', function () {alert ("I am outermost"); FALSE);
Middle.addeventlistener (' click ', function () {alert ("I am Middle");},false);
Inner.addeventlistener (' click ', function () {alert ("I am Innermost");},false);
</script>
JS Content: (second case)
<script>
var out = document.getElementById (' out ');
var middle = document.getElementById (' middle ');
var inner = document.getElementById (' inner ');
When you click Inner, the triggering sequence is: out------inner-------Middle
out.addeventlistener (' click ', function () {alert ("I am outermost"); true);
Middle.addeventlistener (' click ', function () {alert ("I am Middle");},true);
Inner.addeventlistener (' click ', function () {alert ("I am Innermost");},true);
</script>
JS Content: (third case)
<script>
var out = document.getElementById (' out ');
var middle = document.getElementById (' middle ');
var inner = document.getElementById (' inner ');
When you click Inner, the triggering sequence is: out------inner-------Middle
out.addeventlistener (' click ', function () {alert ("I am outermost"); true);
Middle.addeventlistener (' click ', function () {alert ("I am Middle");},false);
Inner.addeventlistener (' click ', function () {alert ("I am Innermost");},false);
</script>
JS content: (fourth kind of situation)
<script>
var out = document.getElementById (' out ');
var middle = document.getElementById (' middle ');
var inner = document.getElementById (' inner ');
When you click Inner, the triggering sequence is: out-------middle------inner
out.addeventlistener (' click ', function () {alert ("I am outermost"); true);
Middle.addeventlistener (' click ', function () {alert ("I am Middle");},true);
Inner.addeventlistener (' click ', function () {alert ("I am Innermost");},false);
</script>
JS Content: (fifth kind of situation)
<script>
var out = document.getElementById (' out ');
var middle = document.getElementById (' middle ');
var inner = document.getElementById (' inner ');
When you click Inner, the triggering sequence is: Middle-------inner
out Out.addeventlistener (' click ', function () {alert ("I am outermost"); FALSE);
Middle.addeventlistener (' click ', function () {alert ("I am Middle");},true);
Inner.addeventlistener (' click ', function () {alert ("I am Innermost");},false);
</script>
JS Content: (sixth kind of situation)
<script>
var out = document.getElementById (' out ');
var middle = document.getElementById (' middle ');
var inner = document.getElementById (' inner ');
When you click Inner, the triggering sequence is: out-------inner------middle
out.addeventlistener (' click ', function () {alert ("I am outermost"); true);
Middle.addeventlistener (' click ', function () {alert ("I am Middle");},false);
Inner.addeventlistener (' click ', function () {alert ("I am Innermost");},true);
</script>
After reading the results of the above six cases, I believe you have a deep understanding of the difference between the last argument being true or false.
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
