事件绑定与事件委托
事件绑定：
为什么要用到事件绑定？ 我的理解是同一个对象无法添加多个事件？如果添加多个事件的话按照执行顺序来说下边的事件会把上面的替换；就像以下代码：
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)
}
}
