您的位置:首页 > Web前端 > JavaScript

事件模型及事件代理/委托

2016-11-18 15:33 103 查看

一、事件:

我们都知道在JS中,事件分三个阶段:捕获、目标、冒泡。

捕获:由外向内,由不具体到最具体,由document到元素

目标:就是事件触发的元素

冒泡:由内向外,由最具体到最不具体,由元素到document



二、事件处理程序:

1.DOM0级事件处理程序:

即直接在dom对象上注册时间名称,就是DOM0级写法,DOM0事件模型,所以的浏览器都支持。

先取元素,再以对象属性的形式添加事件,遵循覆盖的原则,后面绑定的事件会覆盖之前绑定的。

1)在HTML上添加

缺点:高耦合,修改不方便,html与js联系太紧密


<button type="button" onclick="dele()" id="btn">delete</button>
<script>
function dele(){
alert(this);//window
}
</script>


这样注册的事件,相当于动态调用函数(有点eval的意思),因此不会传入event对象,同时,this指向的是window,不再是触发事件的dom对象,当然如果调用时传入this则指代调用对象

<button type="button" onclick="dele(this)" id="btn">delete</button>
<script>
function dele(){
alert(this);//button
}
</script>


2)获取元素添加

var btn = document.getELementById("btn");
btn.onclick = function(){//会被后面的绑定覆盖
alert("ok")
}
btn.onclick = function(){//实际会输出'btn'
alert(this.id)
}


因为事件就是在id为btn的dom节点上注册的,事件触发时,this就代表这个dom节点,可以理解为事件是被这个dom节点调用的

3)解绑DOM0级事件

原理就是最后注册的事件要覆盖之前的,最后一次注册事件设置成null,也就解除了事件绑定。

btn.onclick = null;


2.DOM2级事件处理程序:

与DOM0级相比,DOM2级有两大优点:

1. 可以给一个元素添加多个事件处理程序,会按顺序执行,也可以添加多个事件

2. DOM2新增了捕获和冒泡的概念,使得我们可以进行事件的代理委托,为动态生成的元素绑定事件

DOM2事件通过addEventListener和removeEventListener管理,分别用于绑定事件和解除绑定

1)绑定事件:addEventListener

有三个参数:

“事件名称”: -string 事件名不用写on

“事件回调”: -function 默认传入一个event参数

“捕获/冒泡”:-boolean false为冒泡,true为捕获

这里必须要再祭出非常重要的事件过程图了:



var div = document.getElementById("div");
//冒泡事件
div.addEventListener("click", function(e){
alert("ok");
}, false);
//捕获事件
div.addEventListener("click", function(e){
alert("ok1");
}, true);


2)解除绑定:removeEventListener

解除绑定同样有三个参数:

“事件名称”: -string 解除的事件名称

“事件回调”: -function 解除的回调函数,必须和注册时的一致,要想注册过的事件能够被解除,必须将回调函数保存起来,否则无法解除。

“捕获/冒泡”:-boolean 必须和注册事件时的类型一致

var div= document.getElementById("div");
//将回调存储在变量中
var fn = function(e){
alert("ok");
};
//绑定
div.addEventListener("click", fn, false);

//解除
div.removeEventListener("click", fn, false);


3.IE事件处理程序:

DOM2级绑定事件确实给我们带来了许多的便利,但是IE总是不能让我们愉快的玩耍,对于反人类的低版本IE(IE8及其以下版本浏览器),addEventListener和removeEventListene是无法使用的,必须使用IE的方法:attachEvent和detachEvent

1)绑定事件:attachEvent

有两个参数:

“事件名称”: -string 事件名必须写on

“事件回调”: -function 默认传入一个event参数

var div = document.getElementById("div");
div.attachEvent("onclick", function(e){
alert("ok");
});


2)解除绑定:removeEventListener

也是有两个参数:

“事件名称”: -string 事件名必须写on

“事件回调”: -function 解除的回调函数,必须和注册时的一致,要想注册过的事件能够被解除,必须将回调函数保存起来,否则无法解除。

var div= document.getElementById("div");
//将回调存储在变量中
var fn = function(e){
alert("ok");
};
//绑定
div.attachEvent("onclick", fn);

//解除
div.detachEvent("onclick", fn);


4.跨浏览器的事件处理程序:

为了浏览器的兼容,我们使用能力检测实现在各浏览器中使用事件绑定和解除事件绑定:

var eventUtil = {
//添加句柄
addHandler:function(ele,type,handler){
if(ele.addEndEventListener){
ele.addEndEventListener(type,handler,false);
}else if(ele.attachEvent){
ele.attachEvent('on'+type,handler);
}else{
ele['on'+type] = handler;
}
},
//删除句柄
removeHandler:function(ele,type,handler){
if(ele.removeEndEventListener){
ele.removeEndEventListener(type,handler,false);
}else if(ele.detachEvent){
ele.detachEvent('on'+type,handler);
}else{
ele['on'+type] = null;
}
}
}
//调用
var btn = document.getElementById('btn');
var clickHandler = function(){
alert(123)
}
eventUtil.addHandler(btn,'click',clickHandler);//绑定事件
eventUtil.removeHandler(btn,'click',clickHandler);//解除绑定


三、事件对象

Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

1.DOM中的事件对象(event)

1)type 事件类型

2)target 事件目标

3)stopPropagation() 阻止事件冒泡

4)preventDefault() 取消默认行为

2.IE中的事件对象(event||window.event)

在低版本IE(IE8-)中事件对象为window.event,所以取得事件对象的兼容写法为

target = target || window.target;


1)type 事件类型

2)srcElement 事件目标

兼容写法:

var ele = event.target||event.srcElement;


3)cancleBubble - boolean 阻止事件冒泡属性 true阻止;false不阻止;

4)returnValue -boolean 取消默认行为属性 true不取消;false取消;
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息