javascript浏览器兼容教程之事件处理

1. window.event

【分析说明】先看一段代码

代码如下:

function et()
{
alert(event);//IE: [object]
}

　　以上代码在IE运行的结果是[object]，而在Firefox无法运行。

　　因为在IE中event作为window对象的一个属性可以直接使用，但是在Firefox中却使用了W3C的模型，它是通过传参的方法来传播事件的，也就是说你需要为你的函数提供一个事件响应的接口。

【兼容处理】添加对event判断，根据浏览器的不同来得到正确的event：

代码如下:

function et()
{
evt=evt?evt:(window.event?window.event:null);
　　//兼容IE和Firefox
alert(evt);
}

2. 键盘值的取得

【分析说明】IE和Firefox获取键盘值的方法不同，可以理解，Firefox下的event.which与IE下的event.keyCode相当。关于彼此不同，可参考《键盘事件中keyCode、which和charCode 的兼容性测试》

【兼容处理】
复制代码

代码如下:

function myKeyPress(evt){
//兼容IE和Firefox获得keyBoardEvent对象
evt = (evt) ? evt : ((window.event) ? window.event : "")
//兼容IE和Firefox获得keyBoardEvent对象的键值
var key = evt.keyCode?evt.keyCode:evt.which;
if(evt.ctrlKey && (key == 13 || key == 10)){
　　　　　　//同时按下了Ctrl和回车键
//do something;
}
}

3. 事件源的获取

【分析说明】在使用事件委托的时候，通过事件源获取来判断事件到底来自哪个元素，但是，在IE下，event对象有srcElement属性，但是没有target属性；Firefox下，even对象有target属性，但是没有srcElement属性。

【兼容处理】

代码如下:

ele=function(evt){ //捕获当前事件作用的对象
evt=evt||window.event;
　　return
　　(obj=event.srcElement?event.srcElement:event.target;);
}

4. 事件监听

【分析说明】在事件监听处理方面，IE提供了attachEvent和detachEvent两个接口，而Firefox提供的是addEventListener和removeEventListener。

【兼容处理】最简单的兼容性处理就是封装这两套接口：

代码如下:

function addEvent(elem, eventName, handler) {
　　if (elem.attachEvent) {
　　　　elem.attachEvent("on" + eventName, function(){
　　　　　　　　　　　　　　　　　　　　handler.call(elem)});
　　　　//此处使用回调函数call()，让this指向elem
　　} else if (elem.addEventListener) {
　　　　elem.addEventListener(eventName, handler, false);
　　}
}
function removeEvent(elem, eventName, handler) {
　　if (elem.detachEvent) {
　　　　elem.detachEvent("on" + eventName, function(){
　　　　　　　　　　　　　　　　　　　　handler.call(elem)});
　　　　//此处使用回调函数call()，让this指向elem
　　} else if (elem.removeEventListener) {
　　　　elem.removeEventListener(eventName, handler, false);
　　}
}

　　需要特别注意，Firefox下，事件处理函数中的this指向被监听元素本身，而在IE下则不然,可使用回调函数call，让当前上下文指向监听的元素。

5. 鼠标位置

【分析说明】IE下，even对象有x，y属性，但是没有pageX，pageY属性；Firefox下，even对象有pageX，pageY属性，但是没有x，y属性。

【兼容处理】使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX。复杂点还要考虑绝对位置。

代码如下:

function getAbsPoint(e){
var x = e.offsetLeft, y = e.offsetTop;
while (e = e.offsetParent) {
x += e.offsetLeft;
y += e.offsetTop;
}
alert("x:" + x + "," + "y:" + y);
}

赞 (0)

相关推荐

  • 原生JS绑定滑轮滚动事件兼容常见浏览器

    滑轮滚动页面的事件在网页特效中进场遇到,但是在不同浏览器下的实现方式又不同.下面我实现的方法,兼容常见浏览器. function getData(event){ var e = event || window.event; //获取滚动距离(FF每次滚动 data为3或者-3,其他为120或者-120) var data = e.detail || e.wheelDelta; alert(data); } //IE之外的绑定事件方法 if(document.addEventListener &&a

  • javascript 按键事件(兼容各浏览器)

    第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型,即keydown,keypress和keyup,它们分别对应onkeydown.onkeypress和onkeyup这三个事件句柄.一个典型的按键会产生所有这三种事件,依次是keydown,keypress,然后是按键释放时候的keyup. 在这3种事件类型中,keydown和keyup比较底层,而keypress比较高级.这里所谓的高级是指,当用户按下shift + 1时,keypress是对这个按键事件进行解析后

  • 纯JavaScript实现的兼容各浏览器的添加和移除事件封装

    //事件处理兼容各种浏览器,采用能力检测方法,所谓能力检测,就是有能力就做,没有能力就不做 //定义一个处理事件的对象,兼容各种浏览器,dom2级事件处理和ie事件,如果这两个事件都不兼容,就采用dom0级处理 var eventUtil ={ addEvent:function(element,type,handler){ if (element.addEventListener) { //非IE浏览器采用dom2级事件处理,type为事件类型如:click,handler为事件处理函数,fa

  • JS事件添加和移出的兼容写法示例

    本文实例讲述了JS事件添加和移出的兼容写法.分享给大家供大家参考,具体如下: var EventUtil = { addHandler : function (element , type, handler { if ( element.addEventListener){ element.addEventListener(type, handler, false); }else if ( element.attachEvent) { element.attachEvent("on"+

  • JSP中用回车监听按钮事件兼容火狐 IE等主流浏览器

    复制代码 代码如下: <script> // 兼容FF document.onkeydown=keyListener; function keyListener(e){ e = e ? e : event; if(e.keyCode == 13){ onsubmit(); } } </script>

  • javaScript事件机制兼容【详细整理】

    [添加事件机制]  addEventListener  和  attachEvent [W3C] addEventListener('click' , function(){alert('Hello World')} ,false )  //W3C规范添加事件(IE8及以上不兼容):  第一个参数为事件类型 ,第二个为事件程序 ,第三个 false为事件冒泡,true为事件捕获 [IE] attachEvent('onclick',function(){alert('Hello World')}

  • javascript 兼容各个浏览器的事件

    javascript 兼容各个浏览器的事件

    调用事件: 事件对象 什么是事件对象?在触发dom上的事件是都会产生一个事件对象event.例如鼠标点击的时候,自己就会产生比如点击的类型啊 还要那个元素发出的 dom 事件对象   type 属性用于获取事件对象, target属性 用于获取事件目标,stopPropagation()方法 阻止事件冒泡 preventDefault阻止事件的默认行为 IE中的事件对象  type 属性 用于获取事件对象, srcElement属性 用于获取事件目标 cancelBubble属性  用于阻止事件

  • IE8的JavaScript点击事件(onclick)不兼容的解决方法

    博客园闪存分页是用JavaScript生成的,今天发现在IE8下点击页码不能翻页,翻页操作是在当前页码的onclick事件中进行的. 开始代码是这么写的: 复制代码 代码如下: var a = document.createElement("a");a.setAttribute("onclick", this.ClickFunctionName + "(" + pageIndex + ");Pager.SetCurrent("

  • js获取键盘按键响应事件(兼容各浏览器)

    复制代码 代码如下: <script type="text/javascript" language=JavaScript charset="UTF-8">document.onkeydown=function(event){var e = event || window.event || arguments.callee.caller.arguments[0];if(e && e.keyCode==27){ // 按 Esc //要做的

  • 兼容各大浏览器的JavaScript阻止事件冒泡代码

    这里仅仅是一个简单代码demo,因为时间问题并未做深入研究,因为今天做项目时要用到阻止事件冒泡的内容,找了好多才找到一个可以使用的,特记录之. <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>阻止事件冒泡</title> <scr

  • js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)

    复制代码 代码如下: /** Event handler for mouse wheel event.          *鼠标滚动事件          */          var wheel = function(event) {              var delta = 0;              if (!event) /* For IE. */                  event = window.event;              if (event.w

随机推荐