快活林资源网 Design By www.csstdc.com
本文特意为跨浏览器实现添加事件侦听器和跨浏览器事件对象的使用方法做了下总结,并把这些方法打包,欢迎大家学习。
打包的一个EventUtil对象
var EventUtil = { // 添加侦听事件 addEventListener:function (element, type, handler) { // IE9+、Firefox、Safari、chrome和Opera if(element.addEventListener) { element.addEventListener(type, handler, false); } // IE8- else if(element.attachEvent) { element.attachEvent("on" + type, handler); } }, // 移除侦听事件 removeEventListener:function (element, type, handler) { // IE9+、Firefox、Safari、chrome和Opera if(element.addEventListener) { element.removeEventListener(type, handler, false); } // IE8- else if(element.attachEvent) { element.detachEvent("on" + type, handler); } }, // 获取事件对象 getEvent:function(event) { if(typeof event == "undefined") { event = window.event; // IE浏览器 } return event; }, // 获取触发事件的元素 getTarget:function(event){ if(typeof event.srcElement == "undefined") { return event.target; }else { return event.srcElement; // IE浏览器 } }, // 获取事件类型 getType:function(event) { return event.type; }, // 获取按键键码 getCharCode:function(event) { if(typeof event.keyCode == "number") { return event.keyCode; // IE8-、Firefox和opera }else { return event.charCode; } }, // 获取鼠标相对于文档的位置,即页面坐标位置 getPagePosition:function(event) { var pageX = event.pageX, pageY = event.pageY; if(pageX == undefined) { pageX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft); } if(pageY == undefined) { pageY = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop); } return { pageX:pageX, pageY:pageY }; }, // 阻止事件的默认行为 preventDefault:function(event) { if(event.preventDefault){ event.preventDefault(); }else { event.returnValue = false; // IE浏览器 } }, // 阻止事件冒泡 stopPropagation:function(event) { if(typeof event.cancelBubble == "undefined") { event.stopPropagation(); }else { event.cancelBubble = true; // IE浏览器 } } };
测试代码
<div id="box" style="color:red;width: 100%;height:200px;" > <input type="button" value="点击" id="btn" /> </div> <a href="http://www.test.com" id="a">test</a>
var box = document.querySelector("#box"); box.onclick = function(event) { event = EventUtil.getEvent(event); alert(EventUtil.getType(event)); alert(EventUtil.getTarget(event)); }; var input = document.querySelector("input"); input.onclick = function(event) { event = EventUtil.getEvent(event); EventUtil.stopPropagation(event); }; var a = document.getElementById("a"); a.onclick = function(event) { event = EventUtil.getEvent(event); EventUtil.preventDefault(event); };
以上就是跨浏览器实现添加事件侦听器和跨浏览器事件对象的使用方法,希望对大家的学习有所帮助。
快活林资源网 Design By www.csstdc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
快活林资源网 Design By www.csstdc.com
暂无评论...
更新日志
2025年01月17日
2025年01月17日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]