首页 > 代码库 > 事件委托与事件监听

事件委托与事件监听

2024-09-14 03:03:34   217人阅读

事件委托：

　给一些子级元素添加事件过多，所以直接给他们的父级添加一个事件；

window.onload = function(){

            var oBox = document.getElementById("box");
            oBox.onclick = function (ev) {
                var ev = ev || window.event;//获取目标的对象
                var target = ev.target || ev.srcElement;、、获取目标
                if(target.nodeName.toLocaleLowerCase() == ‘input‘){//如果目标是input（nodeName获取节点名称toLocaleLowerCase()将字符串转为小写）
　　　　　　　　　　 switch(target.id){//（循环所有的目标的id）
                   case ‘add‘ ://如果id是add
                   alert(‘添加‘); 
 　　　　　　　　　　break;//跳出本次循环
 　　　　　　　　　　case ‘remove‘ : 
　　　　　　　　　　alert(‘删除‘);
　　　　　　　　　　 break;
　　　　　　　　 case ‘move‘ :
　　　　　　　　 alert(‘移动‘);
　　　　　　　　 break;
　　　　　　　　 case ‘select‘ : 
　　　　　　　　alert(‘选择‘);
　　　　　　 break; }
　　　　　　 } 
　　　　} 
}
事件监听
　　使同一个事件源一次获多次触发事件函数
 var eventOne = function(){
　　alert("第一个监听事件");
　}
function eventTwo(){
 alert("第二个监听事件");
}
window.onload = function(){
 var btn = document.getElementById("yuanEvent");
 btn.addEventListener("click",eventOne);//绑定事件
 btn.addEventListener("click",eventTwo);//绑定事件
 btn.removeEventListener("click",eventOne);//清除绑定事件
}
 

事件委托与事件监听


联系
我们