綁定事件的模型

 

種事件流模型

1，冒泡事件流模型：從特定的事件到不特定事件，即從Dom樹的葉子到根節點

2，捕獲事件流模型：從不特定的事件到特定的事件，即根節點到Dom樹的節點

從冒泡型事件流中click事件流的順序爲：div->body->html->document

從捕獲型事件流中click事件流的順序爲：document->html->body->div;

DOM2的事件流的順序

事件捕獲->目標對象->事件冒泡

3，事件流的案例事件代理-事件委託

優勢：

1，經過冒泡的思想減小了對子節點綁定的特色，不用使用for循環，

2，而是對父節點進行綁定，事件處理器要駐流內存，提升了性能

原生的案例

捕獲事件->目標對象（2次）——>事件冒泡  

<! DOCTYPE html >

< html >

< head lang= "en" >

< meta charset= "UTF-8" >

< title ></ title >

</ head >

< style >

#outer {

position: absolute;

width: 400px;

height: 400px;

top: 0;

left: 0;

bottom: 0;

right: 0;

margin: auto;

background-color: deeppink;

}

#middle {

position: absolute;

width: 300px;

height: 300px;

top: 50%;

left: 50%;

margin-left: -150px;

margin-top: -150px;

background-color: deepskyblue;

}

#inner {

position: absolute;

width: 100px;

height: 100px;

top: 50%;

left: 50%;

margin-left: -50px;

margin-top: -50px;

;

background-color: darkgreen;

text-align: center;

line-height: 100px;

color: white;

}

#outer,

#middle,

#inner {

border-radius: 100%;

}

< / style >

< body >

< div id= "outer" >

< div id= "middle" >

< div id= "inner" >

click me!

</ div >

</ div >

</ div >

< script >

var innerCircle = document. getElementById( "inner");

innerCircle. addEventListener( "click", function () {

alert( "innerCircle的click事件在捕獲階段被觸發");

}, true);

innerCircle. addEventListener( "click", function () {

alert( "innerCircle的click事件在冒泡階段被觸發");

}, false);

var middleCircle = document. getElementById( "middle");

middleCircle. addEventListener( "click", function () {

alert( "middleCircle的click事件在捕獲階段被觸發");

}, true);

middleCircle. addEventListener( "click", function () {

alert( "middleCircle的click事件在冒泡階段被觸發");

}, false);

var outerCircle = document. getElementById( "outer");

outerCircle. addEventListener( "click", function () {

alert( "outerCircle的click事件在捕獲階段被觸發");

}, true);

outerCircle. addEventListener( "click", function () {

alert( "outerCircle的click事件在冒泡階段被觸發");

}, false);

< / script >

</ body >

</ html >

 

1、原生的寫法

  var handleEent = {

addEventListener : function ( element, type, handler) {

if ( element. addEventListener) {

element. addEventListener( type, handler, false);

} else if ( element. attachEvent) {

element. attachEvent( type, handler);

} else {

element[ 'on' + type] = handler;

}

},

removeEentListener : function ( element, type, handler) {

if ( element. removeEentListener) {

element. removeEentListener( type, handler, false);

} else if ( element. deattachEvent) {

element. deattachEvent( type, handler);

} else {

element[ 'on' + type] = handler;

}

}

};

 

2、 jquery的綁定事件處理方案， jquery的綁定的事件（on, bind(), delegate(), live() ）的區別

  1，bind：只能用於存在元素的綁定

2， live： 採用事件代理綁定到， document上

3，delegate: 採用的是事件代理， 將元素更加精確小的範圍內使用事件代理

4，on: 集中了以上全部的優勢