js中的事件委托和事件模拟

* 1.事件委托:
* 利用事件的冒泡在最高层的祖先元素上处理所有事件
* (有利于事件的管理)
* (document上添加事件处理是最好的,因为在这上面面添加只要元素加载出来就能触发事件
* 不需要等到load或者DOMContentLoaded事件结束)
* document.οnclick=function (ev) {
   ev = ev ? ev : window.event;
   var target = ev.target ? ev.target : ev.srcElement;
   switch (target.id) {
       case "box01":
           console.log(target.id);
           break;
       case "box02":
           console.log(target.id);
           break;
   }
  }
*
*
* 2.事件的移除:
* 在移除DOM的时候如果使用的是innerHTML那么DOM上颚事件并不会被移除
* 所以需要手工移除使用elem.事件=null,:btn.click=null就可以移除的
* (在页面的加载和卸载的时候也会导致空事件,就是在页面切换个刷新页面的时候
* 这时候就需要在unload事件上绑定处理函数来清除事件,不然无法释放内存页面就会变得很卡)
*
* 3.事件模拟:
*
*  1.鼠标事件的模拟步骤:
*      1).创建事件对象:document.createEvent(事件类型)
*          (事件类型有以下几种:1.UIEvents:一般化的UI事件,包括鼠标,键盘事件
*                             2.MouseEvents:顾名思义就是鼠标事件
*                             3.MutationEvents:一般化的DOM变动事件)
*         (使用这个函数会返回一个包含初始化对象的方法,:传入MouseEvents返回的对象中就包含initMouseEvent这个方法)
*
*      2).初始化事件对象initMouseEvent(一连串的参数)
*
*      3).手动触发事件elem.dispatchEvent(事件名)
*      (在给事件对象取名字的时候不能是event,这个是系统window自带的,会冲突)
*
*      IE中创建自定义对象的方法是不一样的
*      参数:(要触发事件的元素,事件名称)
*      (ie中只支持标准事件,不支持自定义事件)
*      function createEvent(elem,name){
           var ev;
           //标准浏览器
           if(document.createEvent){
                ev=document.createEvent("HTMLEvents");
               ev.initEvent(name,true,true);
               elem.dispatchEvent(ev);
           }else if(document.createEventObject){
               //ie
               ev=document.createEventObject();
               elem.fireEvent("on"+name,ev);
           }
       }
*
*  模拟键盘事件:
*  firefox有自己的键盘事件,但是别的浏览器没有,只能使用通用事件
*  //创建通用事件
*  var ev=document.createEvent("Events");
*  //初始化事件
*  ev.initEvent(事件名,true,true);
*  ev.view=document.defaultView;//设置视口
*  ev.altKey=false;//是否按下alt
*  ev.ctrlKey=false;//是否按下ctr
*  ev.shiftKey=false;//是否按下shift
*  ev.metaKey=false;//是否按下meta
*  ev.keyCode=65;//模拟按下的键的键码
*  ev.charCode=65;//模拟按下的键的键码
*  //触发事件
*  elem.dispatchEvent(ev);
*  (ie浏览器也类似)
*
*  (上面只是演示了鼠标和键盘事件,事实上事件都是可以模拟的)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值