码迷,mamicode.com
首页 > 其他好文 > 详细

事件委托与事件监听

时间:2017-04-11 15:59:37      阅读:214      评论:0      收藏:0      [点我收藏+]

标签:string   listen   local   list   key   委托   多次   元素   pre   

事件委托:

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

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);//清除绑定事件
}
 

事件委托与事件监听

标签:string   listen   local   list   key   委托   多次   元素   pre   

原文地址:http://www.cnblogs.com/yangrui2018/p/6693877.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!