Event object:
Event: Describes or contains more detailed information about events;
Event: not compatible with FF;
EV: Compatible with ie9+,ff,chrome,ie8--newspaper undefined;
Compatible notation: var oevent=ev| | Event
Coordinates of the CLIENTX:X axis
Coordinates of the clienty:y axis
Bubble:
The event of a child element can be passed on to the parent element, and if the parent element has the same event to trigger, the word continues to bubble;
Cancel Event Bubbling:
Oevent.cancelbubble = true;
Event capture: The event of the parent element can be passed to the child element body (event sinking);
Set capture: SetCapture ();
Release capture: ReleaseCapture ();
Window.onload=function () {
var Obox1=document.getelementbyid ("Box1");//Grandpa
var Obox2=document.getelementbyid ("Box2");//Father
var Obox3=document.getelementbyid ("Box3");//Son
Obox1.onclick=function () {
Alert (1);
}
Obox2.onclick=function (EV) {//bubbles must be the same event triggered
var oev=ev| | Event
Alert (2);
Oev.cancelbubble=true;
}
Obox3.onclick=function (EV) {
var oev=ev| | Event
Alert (3);
Oev.cancelbubble=true;
}
}
Push button switch and bubbling:
Window.onload=function () {
var Ohd=document.getelementbyid ("HD");//Buttons above
var Oul=document.getelementbyid ("list");//The following list
var ali=document.getelementsbytagname (' Li ');
var bok=true; Give a switch, now the state is turned on
Ohd.onclick=function (EV) {
var oev=ev| | Event
Oev.cancelbubble=true;
if (BOK) {oul.style.display= ' block ';} Click the first time display
Else{oul.style.display= ' None ';} Click Hide Again
Bok=!bok; Click once to reverse
}
for (Var i=0;i<ali.length;i++) {
Ali[i].onclick=function () {
ohd.innerhtml=this.innerhtml;
Bok=true; Let the next time H3 click, UL display
Oul.style.display= ' none ';//Click to Bubble to document
}
}
Document.onclick=function () {
Ohd.innerhtml= ' Please select ';
Oul.style.display= ' None ';
bok=true;//let the next time the H3 click, UL display
}
}
Event object, event bubbling, event capture