javascript 切换上下文,事件绑定中改变this指向

在事件绑定中,调用回调函数时改变this的指向,通常有几种做法,原生的bind()方法,和jquery中的$.proxy()。如果在事件绑定中,想让上下文从目标html元素中切换为局部变量,就可以这样做。

两个例子:

func.bind(obj);

参数:  func ,要调用的函数对象,必选

     obj ,this 关键字可在新函数中引用的对象,必选

返回:  与 func 函数相同的新函数

new function(){
    this.appName = "wem";
    document.documentElement.addEventListener("click", function(e){
            alert(this.appName);
        }.bind(this), false);
};

$.proxy(func, this)

参数:  func ,要调用的已有函数对象,必选

     obj ,this 关键字可在新函数中引用的对象,必选

返回:  与 func 函数相同的新函数

new function(){
  this.appName = "wem2";
  document.documentElement.addEventListener("click", $.proxy(function(){
    alert(this.appName)
  } ,this), false);
};

时间: 2024-09-28 22:14:37

javascript 切换上下文,事件绑定中改变this指向的相关文章

javascript跨浏览器事件绑定

//跨浏览器事件绑定 function addEvent(obj,type,fn){ //obj目标对象, type事件类型 注意是:"load" ,fn函数回调 if (typeof obj.addEventListener !="undefined"){ //W3C方法 obj.addEventListener(type,fn,false); } else if (typeof obj.attachEvent !="undefined"){

js事件绑定及深入

学习要点: 1.传统事件绑定的问题2.W3C事件处理函数3.IE事件处理函数4.事件对象的其他补充 事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2级模型).现代事件绑定在传统绑定上提供了更强大更方便的功能. 一 传统事件绑定的问题 传统事件绑定中的内联模型不做讨论,基本很少去用.先来看一下脚本模型,脚本模型将一个函数赋值给一个事件处理函数.传统绑定如: window.onload=function(){ var box=document.getEleme

JS基础——事件绑定

上一篇博客JS事件对象中,老师问JS事件处理和VB中的事件处理有什么联系?先来解决一下这个问题.举个VB.net中事件处理的例子(JS敲久了,VB习惯的都不熟悉了,看来得经常回顾了): 1.事件处理VB VS JS Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click MsgBox("helo!") MsgBox(sender.width) '弹出触发这个事件对象的宽度 Msg

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

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

理解Javascript中的事件绑定与事件委托

最近在深入实践js中,遇到了一些问题,比如我需要为动态创建的DOM元素绑定事件,那么普通的事件绑定就不行了,于是通过上网查资料了解到事件委托,因此想总结一下js中的事件绑定与事件委托. 事件绑定   最直接的事件绑定:HTML事件处理程序 如下示例代码,通过节点属性显式声明,直接在HTML中,显式地为按钮绑定了click事件,当该按钮有用户点击行为时,便会触发myClickFunc方法. /* html */ <button id="btn" onclick="myCl

javascript中通过匿名函数进行事件绑定

事件绑定,匿名函数中获取当前元素对象直接this.属性

JavaScript学习笔记(四)——js事件之事件绑定、兼容问题

事件捕获:事件从根节点开始,逐级到子节点,若节点绑定了事件动作,则执行动作,继续往下走. 事件冒泡:事件由子节点向跟节点派送,若节点绑定了事件动作,则执行动作,然后继续往上走. 一.怎么绑定事件和移除事件? 由于IE浏览器不支持事件捕获,只支持事件冒泡.因此,其他遵循标准的浏览器都使用W3C定义的函数绑定和移除,IE浏览器则自有一套执行规则.下面分别总结一下W3C和IE的绑定机制: 1.W3C下的事件绑定 添加事件 — addEventListener() 移除事件 — removeEventL

JavaScript学习13:事件绑定

事件绑定分为两种:一种是传统事件绑定(内联模型.脚本模型),一种是现代事件绑定(DOM2级模型).现代事件绑定在传统绑定的基础上为我们提供了更强大更方便的功能. 传统事件绑定的问题 因为内联模型很少用,这里不做讨论.先来看一下脚本模型,将一个函数赋值给一个事件处理函数. <span style="font-size:18px;">var box=document.getElementById('box'); box.onclick=function(){ alert('Li

JavaScript的事件绑定及深入

事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定 (DOM2 级模型).现代事件绑定在传统绑定上提供了更强大更方便的功能. 一.传统事件绑定的问题传统事件绑定有内联模型和脚本模型,内联模型我们不做讨论,基本很少去用.先来看一下脚本模型,脚本模型将一个函数赋值给一个事件处理函数. var box = document.getElementById('box'); //获取元素 box.onclick = function () { //元素点击触发事件 alert('