js中的事件委托和事件模拟
2017-07-29 14:40
295 查看
* 1.事件委托: * 利用事件的冒泡在最高层的祖先元素上处理所有事件 * (有利于事件的管理) * (在document上添加事件处理是最好的,因为在这上面面添加只要元素加载出来就能触发事件 * 不需要等到load或者DOMContentLoaded事件结束) * document.onclick=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.事件的移除: * 在移除 4000 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浏览器也类似) * * (上面只是演示了鼠标和键盘事件,事实上事件都是可以模拟的)
相关文章推荐
- JS模拟事件委托。。。
- javascript 事件委托,jq,js模拟事件
- js事件委托(事件代理)
- js事件委托原理
- js中的事件委托
- JS事件委托(event delegation)
- js中的事件委托或是事件代理详解
- js中的事件委托或是事件代理详解
- JS实现为动态添加的元素增加事件功能示例【基于事件委托】
- js 模拟鼠标事件
- js性能优化-事件委托
- js中的事件代理(委托)
- 第一百七十一节,jQuery,高级事件,模拟操作,命名空间,事件委托,on、off 和 one
- 使用JS或jQuery模拟鼠标点击a标签事件代码
- js事件委托、事件代理
- JS 中的事件绑定、事件监听与事件委托
- js 事件委托
- js的事件的代理和委托
- 第十五篇 JS 移入移出事件 模拟一个二级菜单
- js中的事件委托或是事件代理详解——为未创建的元素添加事件、对批量元素添加事件