Home > Developer > JavaScript
The difference between event streams
IE uses a bubbling event Netscape uses the capture event DOM to use the first-captured bubble-type event
Example:
Copy code code as follows:
<body>
<div>
<button> Click here </button>
</div>
</body>
Bubble Type Event Model: Button->div->body (ie event flow)
Capture Event Model: Body->div->button (Netscape Event Stream)
DOM Event Model: Body->div->button->button->div->body (first capture, then bubbling)
2. The difference between event listening functions
IE use:
[Object].attachevent ("Name_of_event_handler", Fnhandler); Binding functions
[Object].detachevent ("Name_of_event_handler", Fnhandler); removing bindings
DOM uses:
[Object].addeventlistener ("Name_of_event", Fnhandler, Bcapture); Binding functions
[Object].removeeventlistener ("Name_of_event", Fnhandler, Bcapture); removing bindings
The Bcapture parameter is used to set the phase of the event binding, true to the capture phase, and false to the bubbling phase.
Sample code:
Copy code code as follows:
function addEventHandler (Object,eventtype,fnhandler) {
if (Object.addeventlistener) {//dom
Object.addeventlistener (EventType, Fnhandler, false);
}else if (object.attachevent) {//ie
Object.attachevent ("On" +eventtype, Fnhandler);
}else{//others
object["on" +eventtype]=fnhandler;
}
}
function removeEventHandler (Object,eventtype,fnhandler) {
if (Object.removeeventlistener) {//dom
Object.removeeventlistener (EventType, Fnhandler, false);
}else if (object.detachevent) {//ie
Object.detachevent ("On" +eventtype, Fnhandler);
}else{//others
object["on" +eventtype]=null;
}
}
addEventHandler (Odiv, "click", Function () {alert ("clicked")});
3. Event object Positioning (GET)
IE: An Event object is a property of a Window object event,event can only be accessed when an event occurs, the event handler completes, and the event object is destroyed.
Example:
Copy code code as follows:
Document.onclick=function () {
alert (Window.event.type);
}
The Dom:event object must be passed as a unique parameter to the event handler and must be the first argument.
Example:
Copy code code as follows:
Document.onclick=function () {
alert (Arguments[0].type);
}
4. Get Goal (target)
Ie:var otarget=oevent.srcelement;
Dom:var Otarget=oevent.target;
5. Block event default behavior
Ie:oevent.returnvalue=false;
DOM:oEvent.preventDefault ();
Example:
Copy code code as follows:
Screen page right button menu
Document.body.oncontextmenu=function (oevent) {
if (document.all) {
Oevent=window.event;
Oevent.returnvalue=false;
}else{
Oevent.preventdefault ();
}
}
6. Stop event Replication (bubbling)
Ie:oevent.cancelbubble=true;
DOM:oEvent.stopPropagation ();
Example:
Copy code code as follows:
Button.onclick=function (oevent) {
if (document.all) {
Oevent=window.event;
Oevent.cancelbubble=true;
}else{
Oevent.stoppropagation ();
}
}
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
