跨浏览器的事件侦听器和事件对象
来源:互联网 发布:mysql多个约束 编辑:程序博客网 时间:2024/06/05 09:36
为跨浏览器实现添加事件侦听器和跨浏览器事件对象的使用方法做了下总结,并把这些方法打包。<高级程序设计>里面建议使用此封装方法,可跨浏览器实现事件。我下篇博客里,有介绍惰性载入方式,判断分支只需一次。
惰性载入
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); } else { element["on" + type] = handler; } }, // 移除侦听事件 removeEventListener: function(element, type, handler) { // IE9+、Firefox、Safari、chrome和Opera if (element.removeEventListener) { element.removeEventListener(type, handler, false); } // IE8- else if (element.detachEvent) { element.detachEvent("on" + type, handler); } else { element["on" + type] = null; } }, // 获取事件对象 getEvent: function(event) { return event ? event : window.event; }, // 获取触发事件的元素 getTarget: function(event) { return event.target || event.srcElement; }, // 获取事件类型 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); };
阅读全文
0 0
- 跨浏览器的事件侦听器和事件对象
- 跨浏览器事件对象和事件方法的解决方案
- 通用的事件侦听器函数
- 通用的事件侦听器函数
- 通用的事件侦听器函数
- 跨浏览器的事件处理、事件对象
- js--事件--通用的事件侦听器函数
- js--事件--通用的事件侦听器函数
- 跨浏览器的事件对象
- 跨浏览器的事件对象
- 跨浏览器的事件对象
- 跨浏览器的事件对象
- 跨浏览器的事件对象
- 浅谈as3侦听器的弱引用和事件回收
- HasEventListener和willTragger检查事件侦听器
- DOM和IE跨浏览器的事件对象
- 一个简单的组件事件侦听器
- 写一个通用的事件侦听器函数?
- JAVA集合
- android问题大全
- centos6.5上离线安装gcc
- 计算机网络之面试常考
- uwsgi+django+nginx配置问题总结
- 跨浏览器的事件侦听器和事件对象
- VS 2013 配置 OpenCV 2.4.9
- 2017 Multi-University Training Contest
- iOS 数组转化成字符串
- sed替换成换行符/回车符
- java环境的搭建
- 【Tomcat错误系列】Tomcat8.0.32版本出现address already in use:bind错误
- R的包tidyr--数据清洗
- IAR for STM8介绍、下载、安装与注册