JS Event Event Understanding
<HTML><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /> <title>JS Event Flow Model</title></Head><style>#con{width:200px;Height:200px;background:Orange; }#outer{position:relative;Top:50px; Left:50px;width:100px;Height:100px;background:#eeddff; }#inner{position:relative;Top:251px; Left:25px;width:50px;Height:50px;background:#44ddff; }</style><Body><DivID= "Con">Con<DivID= "outer">outer<DivID= "inner">Inner</Div> </Div></Div><Script> </Script></Body></HTML>
1. Execution order
Document->html->body-con->outer->ineer->outer->con->body->html->document
2. A function that responds to a certain time is called an event handler
function Fnhandler () {
}
<script>//JS Event Stream //Event Additions varcon = document.getElementById (' con ')); //con.addeventlistener (' click ', Function () { //alert (' 123 '); // }); //con.addeventlistener (' click ', Function () { //alert (' 123 '); //},false); //con.addeventlistener (' click ', Function () { //alert (' 123 '); //},true); //DOM Event Flow//The DOM2 level event specifies that the event flow consists of three stages: the event capture phase, the target stage, and the event bubbling phase. //DOM2-level events define two methods AddEventListener () and RemoveEventListener ()//IE different it has its own method attachevent () and DetachEventvarEventutils = { //addeventhandler:function () {}addEventHandler:function(el,event,fnhandler) {//console.log (' test '); if(El.addeventlistener) {console.log (El.addeventlistener); El.addeventlistener (Event,fnhandler,true) } Else{console.log (el.attachevent); El.attachevent (' On ' +Event,fnhandler)} }, removeEventHandler:function(el,event,fnhandler) {//console.log (' test '); if(El.removeeventlistener) {console.log (El.removeeventlistener); El.removeeventlistener (Event,fnhandler,true) } Else{console.log (el.detachevent); El.detachevent (' On ' +Event,fnhandler)} }}eventutils.addeventhandler (Con,' Click ',function() {alert (' 123 '); });</script>
JS Event Event Understanding