html 中绑定事件 this的指向

var m=function(){

alert(2);
    }
    var obj={
        A:function(){
        },
        m:function(){
            alert(3);
        },
        B:function(){
            var m=function(){
                alert(1);
            };
            var div=document.createElement("div");
            div.innerHTML="<p onclick=‘m();‘>xx</p>";
            document.body.appendChild(div);
        }
    };

obj.B();

看起来好像onclick=m()会调用B函数里头定义的m函数,其实不会。这里新增html,且是html行内触发事件,所以函数执行在全局,m()调的是全局定义的m函数,结果弹出2,和B函数作用域一点关系都没有。

(2)

潜在包含了一层匿名函数:

例一:

<p id="f" onclick="console.log(this)">1</p>,值为<p id="ff" onclick="console.log(this)">1</p>自己。

这里相当于:

(p#f).onclick=function(){

console.log(this);

};

所以this当然是调用事件的p#f

例二:

<p id="f" onclick="function A(){alert(this==window);};A();">1</p>

相当于:

(p#f).onclick=function(){

function A(){alert(this==window);};

A();

};

所以A里头的this当然是window。

例三:

<p id="f" class="x" onclick="A(this)">1</p>
<script>
        var A=function(m){
            alert(m.className);       //点击弹出"x"
        };
</script>

这里相当于:

p#f.onclick=function(){

A(this);

};

function体里的this必然是#f元素对象,所以可以弹出m.className。。

例四:

var m=function(){
            alert(10);
        }
        var obj={
            B:function(){
                var m=function(){
                    alert(1);
                };
                var div=document.createElement("div");
                div.innerHTML="cutemurphy";
                div.id="gg";
                document.body.appendChild(div);
                document.getElementById("gg").addEventListener("click",m,false);
            }
        };
        obj.B();      // 1

这个结果恰好和行内执行事件的结果相反,这里会弹出1,而非10。因为它的m函数并非去全局找,而是按照普通的函数作用域链来查找。。。理论支持是函数执行在定义的作用域里。

例五:

var obj={
        A:function(){
            console.log(this);
        },
        B:function(){
            var m=function(){
                alert(1);
            };
            var div=document.createElement("div");
            div.innerHTML="<p id=‘xx‘>xx</p>";
            document.body.appendChild(div);
            var xNode=document.getElementById("xx");
            xNode.addEventListener("click",this.A,false);
        }
    };
    obj.B();     // xNode;

这里很有意思,addEventListener里的this.A的this指的是obj,而this.A的函数体function(){console.log(this)}里的this又是xNode。

参考:

http://www.cnblogs.com/snandy/archive/2011/03/07/1976317.html

时间: 2024-10-03 13:45:43

html 中绑定事件 this的指向的相关文章

Jquery Mobile 中绑定事件

今天遇到了jmobile中绑定事件的问题, 参考:http://liyunpeng.iteye.com/blog/1964165 对页面中的绑定事件有了大概了解,不过这篇帖子年代久远,很多不是很详细,特此记录. 首先查到jmobile中的所有可以用.on()动态绑定的所有事件, 详情参考:http://www.runoob.com/jquerymobile/jquerymobile-ref-events.html 按以前的理解照抄,结果死活出不来效果,认真查看示例发现需要加"pageinit&q

jQuery中绑定事件的几种方法

以click事件为例,jQuery中绑定事件有三种方法: (1)target.click(function(){}); (2)target.bind("click",function(){}); (3)target.live("click",function(){}); 第一种方法很好理解,其实就和普通JS的用法差不多,只是少了一个on而已 第二.三种方法都是绑定事件,但是二者又有很大的不同,下面着重讲解一下,因为这个如果用到Jquery的框架的话是用的挺多的,尤其

jQuery中绑定事件bind() on() live() one()的异同

jQuery中绑定事件的四种方法,他们可以同时绑定一个或多个事件 bind()-------------------------版本号小于3.0(在Jquery3.0中已经移除,相应unbind()也移除) live()--------------------------版本号小于1.7(在Jquery1.7中已经移除,相应die()也移除) delegate()-------------------版本号小于1.7(在Jquery1.7中已经移除) on()------------------

关于在for循环中绑定事件打印变量i是最后一次。

其实函数引用的外部变量都是最后一次的值. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box{ width:100px; height:100px; background-color:pink; } </style> <

JS中绑定事件顺序(事件冒泡与事件捕获区别)

在JS中,绑定的事件默认的执行时间是在冒泡阶段执行,而非在捕获阶段(重要),这也是为什么当父类和子类都绑定了某个事件,会先调用子类绑定的事件,后调用父类的事件.直接看下面实例 <!Doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{margin:0;p

WPF数据模板中绑定事件不触发问题

今天比较闲,做一个练手的项目,结果在xaml中写了一个用户的数据模板后,在其中的某个Canvas上绑定了一个鼠标左击的事件,结果调试的时候,无论怎么点击都不跳到断点那里,百思不得其解. 之后尝试不绑定事件,直接采用内联事件的写法,将事件写在控件上,并且事件的处理写在cs代码而非ViewModel中,则可以使用,如此可以判断是采用MVVM时,命令没有成功绑定到事件上. 刚开始以为是DevExpress的MVVM框架的BUG.后来改成自己手写的MVVM,并未解决问题,思考再三,觉得是数据模板并未获取

EXTJS-在window组件中绑定事件

[在jsp中用EXTJS绑定事件] Ext.onReady(function(){ //ex001:点击一个按钮 ,打开一个新的窗体 window重复创建的问题 //第一种实现[推荐] //JQuery code: var btn = $('#btn'); var dombtn = btn.get(0); // alert(btn.dom.value) 取到 原生的dom对象value值 var btn = Ext.get('btn'); //这个元素是经过Ext包装的一个Ext的Dom对象//

看懂此文,不再困惑于javascript中的事件绑定、事件冒泡、事件捕获和事件执行顺序

最近一个项目基于3维skyline平台,进行javascript二次开发.对skyline事件的设计真是无语至极,不堪折磨啊!抽空学习了下javascript和jquery的事件设计,收获颇大,总结此贴,和大家分享. (一)事件绑定的几种方式 javascript给DOM绑定事件处理函数总的来说有2种方式:在html文档中绑定.在js代码中绑定.下面的方式1.方式2属于在html中绑定事件,方式3.方式4和方式5属于在js代码中绑定事件,其中方法5是最推荐的做法. 方式1: HTML的DOM元素

JS 中的事件绑定、事件监听、事件委托

事件绑定 要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称. 在JavaScript中,有三种常用的绑定事件的方法: 在DOM元素中直接绑定: 在JavaScript代码中绑定: 绑定事件监听函数. 在DOM中直接绑定事件 我们可以在DOM元素上绑定onclick.onmouseover.onmouseout.onmousedown.onmouseup.ondblclick.onkeyd