事件绑定与事件委托

Posted 瘦子先生

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了事件绑定与事件委托相关的知识,希望对你有一定的参考价值。

事件绑定:

为什么要用到事件绑定? 我的理解是同一个对象无法添加多个事件?如果添加多个事件的话按照执行顺序来说下边的事件会把上面的替换;就像以下代码:

var oDiv = document.getElementById("div1");
oDiv.onclick = function(){
alert(1);
}
oDiv.onclick = function(){
alert(2);
}
只会弹出2 ;
我们想要都弹出怎么办?
var f1 = function(){
alert(1);
};
var f2 = function(){
alert(2);
}
oDiv.addEventListener("click",f1);
oDiv.addEventListener("click",f2);
  oDiv.attachEvent("onclick",f1);
oDiv.attachEvent("onclick",f2);
就可以这么写
为什么这么写了四个 因为有兼容性 下边的是为了兼容ie
所以综合写法:添加事件
function addEvent (ele,type,fun){
if(ele.addEventListener){
ele.addEventListener(type,fun);

}else{
ele.attachEvent("on"+type,fun);

}
}
移除事件:
function removeEvent (ele,type,fun){
if(ele.removeEventListener){
ele.removeEventListener(type,fun);

}else{
ele.detachEvent("on"+type,fun);

}
}
注意事项:1.事件的兼容 2.事件是否有on;
事件委托:原因新增对象无法添加事件:可以委托给其父元素常用案例(取快递事件)
<body>
<div>
</div>
<input type="button" value="添加">
</body>
<script>
var oDiv=document.getElementsByTagName("div")[0];
var oBtn=document.getElementsByTagName("input")[0];
var num=0;
oBtn.onclick=function () {
var oUl=document.createElement("ul");
num++;
var oLI=document.createElement("li");
oLI.innerhtml=num+"我是创建的li";
oUl.appendChild(oLI);
oDiv.appendChild(oUl)
};
oDiv.onclick=function (ev) {
var oEvent=window.event||ev; 事件获取的兼容
var target=oEvent.target||oEvent.srcElement; target 事件源的兼容
if(target.nodeName.toLowerCase()=="li"){判断是否是事件源
alert(target.innerHTML)
}
}

以上是关于事件绑定与事件委托的主要内容,如果未能解决你的问题,请参考以下文章

原生js如何绑定a连接点击事件?

直接事件与事件委托

jQuery 入门 -- 事件 事件绑定与事件委托

jquery事件绑定与事件委托

jquery事件绑定与事件委托

JS中的事件(对象,冒泡,委托,绑定)