改变事件绑定的this的问题
以标准的DOM2级事件为例,第二个参数是一个函数,咱们改成bind,看看之后的this是啥。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body> <div id="app">
点击我
</div> <div id="app2">
点击我2
</div> <script type="text/javascript">
window.onload = function () {
var app = document.getElementById('app')
var app2 = document.getElementById('app2')
var fn = function () {
console.log(this.id)
console.log(this)
}
var obj = {
id: 123
}
var fn2 = fn.bind(obj)
app.addEventListener('click', fn)
app2.addEventListener('click', fn2)
}
</script>
</body>
</html>
分别点击这两个元素后,结果如下图

可以看到,初次用bind改变this后,原始DOM2级的事件里获取的this已经不指向调用者的DOM了,这也和我在github记录的一致。
改变事件绑定的this的问题的更多相关文章
- 同时绑定onpropertychange 和 oninput 事件,实时检测 input、textarea输入改变事件,支持低版本IE,支持复制粘贴
实时检测 input.textarea输入改变事件,支持低版本IE,支持复制粘贴 检测input.textarea输入改变事件有以下几种: 1.onkeyup/onkeydown 捕获用户键盘输入事件 ...
- div、span绑定内容改变事件
内容改变事件onchange只适用于form表单标签(input.select.textarea) 当需要对div.span标签进行内容改变监听则无法适用,查阅了一些资料发现jquery有针对的方法, ...
- jquery中的DOM事件绑定与解绑
在jquery事件中有时候有的事件只需要在绑定后有效触发一次,当通过e.target判断触发条件有效触发后解除绑定事件,来避免多次无效触发和与未知情况造成冲突. 这时候就要用到了jquery中的事件绑 ...
- AngularJS事件绑定的使用详解
本文和大家分享的主要是AngularJS中事件绑定相关知识点,希望通过本文的分享,对大家学习和使用AngularJS有所帮助. 1.绑定事件:表达式.事件方法名: 2.绑定点击事件实例:显示.隐藏页面 ...
- WPF Event 在 Command 中的应用初级篇,支持所有Event 展示松耦合设计的全部代码 - 解决TextBoxBase.TextChanged或者TextBox.TextChanged等类似事件绑定问题。
做过WPF开发的人,都知道做MVVM架构,最麻烦的是Event的绑定,因为Event是不能被绑定的,同时现有的条件下,命令是无法替代Event.而在开发过程中无法避免Event事件,这样MVVM的架构 ...
- jQuery文本框(input textare)事件绑定方法教程
jquery 的事件绑定已经用on替换了原来的bind,接下来为大家分享下bind的使用方法及input textare事件.目前1.7以上,jquery?的事件绑定已经用on替换了原来的bind,接 ...
- 正确处理WPF中Slider值改变事件的方式
最近在用WPF数据绑定重写一下播放器项目时遇到的关于Slider的问题,在窗体透明度调节和播放进度调节上用了Slider控件.调节窗体透明度我是 这么想的:将窗体的Opacity属性的值与Slider ...
- Android 监听EditView中的文本改变事件
android中的编辑框EditText也比较常用,那比如在搜索框中,没输入一个字,下面的搜索列表就显示有包含输入关键字的选项,这个输入监听怎么实现的呢? 我们可以建一个例子,效果图如下: 我们可以监 ...
- Javascript事件绑定的几种方式
Javascript的事件绑定主要有四种方法(一下在IE中运行正常,但不保证其他浏览器): [注:onXXX为某一事件,fun为某一function,domId为某一DOM对象id,event类型见后 ...
随机推荐
- CC2530定时器使用
定时器学习 文件夹 说明 依据数据手冊可知CC2530总共同拥有4个定时器,可是定时器2被系统占用,可用的仅仅有三个,分别为定时器1/3/4 Timer在协议栈的代码位置为hal_timer ...
- oracle函数大全-字符串处理函数
字符函数——返回字符值 这些函数全都接收的是字符族类型的参数(CHR 除外)并且返回字符值.除了特别说明的之外,这些函数大部分返回VARCHAR2类型的数值.字符函数的返回类型所受的限制和基本数据库类 ...
- CSS笔记 - fgm练习 2-9 - 播放列表收缩展开
练习地址: http://www.fgm.cc/learn/lesson2/09.html <style> *{ margin: 0;padding: 0;font-size: 12px; ...
- POJ 2386 Lake Counting DFS水水
http://poj.org/problem?id=2386 题目大意: 有一个大小为N*M的园子,雨后积起了水.八连通的积水被认为是连接在一起的.请求出院子里共有多少水洼? 思路: 水题~直接DFS ...
- upf1
创建supply net,两种方法 1. creat_supply_net VDD -domain PD_B 2. creat_supply_net VDD
- C语言主要做哪些方面的开发---一个来自“IT技术学习”微信群的问题及答复
近期,在"IT技术学习"微信群中,有同学问了这样一个问题:C语言主要做哪些方面的开发?在这篇文章中,我想结合自身的经验,对这个问题进行下解答. C语言是计算机及其相关专业(如通信. ...
- stm32优先级
- 【例题3-6 UVA - 1584】Circular Sequence
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 不用真的把每一位都取出来. 用一个后缀的思想. 把原串复制一遍接在后面,然后把每个字符串 都当成一个长度为n的后缀就好了. 比较每个 ...
- YUV与RGB格式转换
YUV格式具有亮度信息和色彩信息分离的特点,但大多数图像处理操作都是基于RGB格式. 因此当要对图像进行后期处理显示时,需要把YUV格式转换成RGB格式. RGB与YUV的变换公式如下: YUV(25 ...
- (七)RabbitMQ消息队列-通过fanout模式将消息推送到多个Queue中
原文:(七)RabbitMQ消息队列-通过fanout模式将消息推送到多个Queue中 前面第六章我们使用的是direct直连模式来进行消息投递和分发.本章将介绍如何使用fanout模式将消息推送到多 ...