改变事件绑定的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类型见后 ...
随机推荐
- 【例题 7-10 UVA - 11212】Editing a Book
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 迭代加深搜. 很容易想到,最多只要搜8层就可以得到答案了 ->最多8下肯定可以还原. 则枚举一下最大层数.然后做个深搜就好. ...
- php课程 11-37 类和对象的关系是什么
php课程 11-37 类和对象的关系是什么 一.总结 一句话总结:类生成对象,对象是类的实例化,一定是先有类,后有对象,一定是先有标准,再有个体. 1.oop的三大优势是什么? 重用性,灵活性.扩展 ...
- 关于PyYAML报错问题解决
转自:http://www.fwqtg.net/%E5%85%B3%E4%BA%8Epyyaml%E6%8A%A5%E9%94%99%E9%97%AE%E9%A2%98%E8%A7%A3%E5%86% ...
- Machine Learning With Spark学习笔记(提取10万电影数据特征)
注:原文中的代码是在spark-shell中编写运行的,本人的是在eclipse中编写运行,所以结果输出形式可能会与这本书中的不太一样. 首先将用户数据u.data读入SparkContext中.然后 ...
- php中嵌套html代码和html代码中嵌套php方式
php中嵌套html代码和html代码中嵌套php方式 一.总结 拷贝的话直接html代码是极好的方式 1.php中嵌套html代码(本质是原生php):a.原生嵌套<?php .....?&g ...
- 请求筛选模块被配置为拒绝包含 hiddenSegment 节的 URL 中的路径
转自原文 请求筛选模块被配置为拒绝包含 hiddenSegment 节的 URL 中的路径. 打开C:\Windows\System32\inetsrv\config路径 找到applicationH ...
- sublime课程3 sublime编辑器的常用设置有哪些
sublime课程3 sublime编辑器的常用设置有哪些 一.总结 一句话总结:其实功能的话可以直接取配置里面搜索关键词,所以搜索是神技. 1.sublime如何开启背景线? "highl ...
- 【42.59%】【codeforces 602A】Two Bases
time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...
- Windows7-32位系统下R语言链接mySQL数据库步骤
安装R和MySQL在此就不再多说了.网上有非常多教程能够找到.以下直接进入到odbc的安装流程. 1.下载安装mysql-connector-odbc-5.x.x-win32.msi 下载地址:htt ...
- 【基础练习】【线性DP】codevs3641 上帝选人题解
这道题目的数据最后一个有问题,特殊处理了 上题目 题目描写叙述 Description 世界上的人都有智商IQ和情商EQ.我们用两个数字来表示人的智商和情商,数字大就代表其对应智商或情商高. 如今你面 ...