讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别

第一件事情.
this 指钟是JavaScript语言中的一个特殊指钟,他在代码运行时,指向调用this语句的当前对象.
如果是事件绑定函数,则指向被绑定的元素本身.
<script type="text/javascript">
//by Go_Rush(阿舜) from  http://ashun.cnblogs.com/
alert(this===window)  //true  直
接调用的时候,指向window本身
var gorush={
    f:function(){
        alert(this===gorush)    //true
    }
}
gorush.f()   //指向 gorush对象
document.onclick=function(){   
    alert(this===document)  //true ,指向 document
}
/*
element.onclick=function(){
    alert(this===element)     //true
}
*/
</script>
特别要值得注意的是,当多个对象嵌套的时候, this 是指向最近调用它的那个对象的
obj1={
    obj2:{
        f:function(){
            alert(this===obj1.obj2)  //这里 this 并不是指向 obj1的哦。
        }
    }
}
obj1.obj2.f()
再举一个非常容易出错的例子,  点这里看相关链接
<script type="text/javascript">
//by Go_Rush from http://ashun.cnblogs.com/
//以下gorush1中 this的用法是错误的,这个错误10个程序员6个犯
var gorush1={
    showMsg:function(){alert("hello,world")},
    doAjax:function(){
        new Ajax.Request("index.php",{onSuccess:function(){
            this.showMsg()
        }})
    }         
}
//gorush2中的才是对的
var gorush2={
    showMsg:function(){alert("hello,world")},
    doAjax:function(){
        var self=this;    //备份 gorush2对象 
        new Ajax.Request("index.php",{onSuccess:function(){
            self.showMsg()
        }})
    }         
}
</script>

第二件事情:
   闲话不多说,先上碟小菜.
<script type="text/javascript">
var btn=null
window.onload=function(){
    btn=document.getElementById("btn")    
    if (window.attachEvent) btn.attachEvent("onclick",gorush);
    if (window.addEventListener) btn.addEventListener("click",gorush,false)
}
function gorush(){
    if (this===window) alert("this==window")   //ie6.0下,这句会执行
    if (this===btn)        alert("this==btn")        //ff1.5下,  这句会执行
}
</script>
<input type="button" value="click me" id="btn">
真不明白为什么 ie 会这样搞,让人很郁闷啊,为什么把 this 指向 window呢?
解决方法:
1. 事件绑定的时候不要用 attachEvent, 可怜的我,当时就是用的prototype.js的Event.Observe方法
这样 element.onclick=function.....  这样在两个浏览器中 this 指钟都指向 element
2. 在处理函数 gorush中 用 getEvent()方法统一获取事件,然后在用 evt.srcElement || evt.target 获取 element对象

(0)

相关推荐

  • window.addEventListener来解决让一个js事件执行多个函数

    可能你也碰到过这种情况,就是在js的代码中用了window.onload后,可能会影响到body中的onload事件.你可以全写在body中,也可以全放到window.onload中,但是这样并不是很方便,有时我们需要两个同时用到.这时就要用window.attachEvent和window.addEventListener来解决一下. 下面是一个解决方法.至于attachEvent和addEventListener的用法,可以自己Google或百度一下. 复制代码 代码如下: if (docu

  • 事件绑定之小测试 onclick && addEventListener

    开发工具中应该有相应的功能,于是测试之: 前提:只是一个简单的小测试,而且 addEventListener 属于标准绑定函数,IE 中与此不兼容(IE 相应的是 attachEvent),所以此次测试先抛弃 IE,使用 Firefox 5.0.1, Chrome 14.0, Opera 11.50 测试页面: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>Test</title> <sty

  • javascript attachEvent和addEventListener使用方法

    attachEvent方法 按钮onclick addEventListener方法 按钮click 两者使用的原理:可对执行的优先级不一样,下面实例讲解如下: attachEvent方法,为某一事件附加其它的处理事件.(不支持Mozilla系列) addEventListener方法 用于 Mozilla系列 举例: Java代码 复制代码 代码如下: document.getElementById("btn").onclick = method1; document.getElem

  • JS在IE和FF下attachEvent,addEventListener学习笔记

    对象名.addEventListener("事件名(不带ON)",函数名,true/false);(FF下) 对象名.attachEvent("事件名",函数名);(IE下) 说明: 事件名称,要注意的是"onclick"要改为"click","onblur"要改为"blur",也就是说事件名不要带"on". 函数名,记住不要跟括号最后一个参数是个布尔值,表示该事件的

  • document.addEventListener使用介绍

    document.addEventListener("事件名称", 函数, false); 复制代码 代码如下: function 某函数(event){ // 方法执行 } addEventListener里最后一个参数决定该事件的响应顺序: 如果为true事件执行顺序为 addEventListener ---- 标签的onclick事件 ---- document.onclick 如果为false事件的顺序为 标签的onclick事件 ---- document.onclick

  • 详解addEventListener的三个参数之useCapture

    addEventListener 有三个参数:第一个参数表示事件名称(不含 on,如 "click"):第二个参数表示要接收事件处理的函数:第三个参数为 useCapture,本文就讲解它. 复制代码 代码如下: <div id="outDiv">   <div id="middleDiv">     <div id="inDiv">请在此点击鼠标.</div>   </d

  • addEventListener 的用法示例介绍

    (要注意的是div必须放到js前面才行) 一般情况下,如果给一个dom对象绑定同一个事件,只有最后一个会生效,比如: 复制代码 代码如下: document.getElementById("btn").onclick = method1; document.getElementById("btn").onclick = method2; document.getElementById("btn").onclick = method3; 那么将只有

  • Javascript 的addEventListener()及attachEvent()区别分析

    Mozilla中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target: 文档节点.document.window 或 XMLHttpRequest. type: 字符串,事件名称,不含"on",比如"click"."mouseover"."keydown"等. listener :实现了 EventListene

  • addEventListener()与removeEventListener()解析

    addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作. 所有的DOM节点中都包含这两种方法,并且它们都接受3个参数:要处理的事件名.作为事件处理程序的函数和一个布尔值. 最后这个布尔值参数是true,表示在捕获阶段调用事件处理程序: 如果是false(false- 默认),表示在冒泡阶段调用事件处理程序. addEventListener的参数一共有三个,语法为: element.addEventListener(type,liste

  • addEventListener()第三个参数useCapture (Boolean)详细解析

    举例 <div id="div1">  <div id="div2">    <div id="div3">      <div id="div4">      </div>    </div>  </div></div> 如果在 d3 上点击鼠标,事件流是这样的: 捕获阶段 在 div1 处检测是否有 useCapture 为 t

随机推荐