• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
yangrui2018
博客园    首页    新随笔    联系   管理    订阅  订阅

事件委托与事件监听

事件委托:

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

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);//清除绑定事件
}
 
posted @ 2017-04-11 15:50  yangrui2018  阅读(587)  评论(0)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3