绑定事件的模型

 

种事件流模型

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: 集中了以上全部的优势