JavaScript:关于事件处理程序何时可以直接访问元素的属性
2016-04-09 09:17
761 查看
指定在元素的的事件处理程序中指定<input type="button" value="click me" onclick="alert(this.value)"/>这段代码可以正确工作,点击之后会弹出 click me字符串;
如果把该代码改为:<script> function clickMe(){ alert(value);
}
</script><input type="button" value="click Me" onclick="clickMe()"/>没有任何反应。
如果再修改为在JavaScript代码中动态指定事件处理函数,如下:<input type="button" value="click Me" id="myBtn"/>
<script> function clickMe(){ alert(this.value); }
var btn = document.getElementById("myBtn");
btn.onclick=clickMe;
</script>那么点击按钮之后,弹出的就是click Me,也就是此时this有效。
原因在于,在html代码中直接指定的事件响应代码,浏览器会动态创建一个封装着元素属性的函数,函数内部还有一个局部变量event,然后再调用在onclick属性中指定的那段js代码。如果要模拟一下,则类似于如下的代码:假设有如下元素: <input type="button" id="myMock" value="mock" onclick="clickMe1()" />
那么当点击该按钮的时候,浏览器会创建如下这么一个函数来执行在onclick属性中指定的JavaScript代码。<script> function mock() { with (document) { var item = getElementById("myMock"); with (item) { clickMe1(); } } } </script>因为clickMe1不是mock的内部函数,他只是在mock中被调用,所以clickMe1内部直接访问value是无效的。而如果我们在onclick中指定的不是一个执行函数的代码,而是直接把该函数的代码放在这里,也就是: <input type="button" value="mock" id="myMock" onclick="alert(value)" />
那么响应的mock函数就会变为<script> function mock() { with (document) { var item = getElementById("myMock"); with (item) { alert(value); } } } </script>此时当然可以正确获取到item的value的值。
来自为知笔记(Wiz)
如果把该代码改为:<script> function clickMe(){ alert(value);
}
</script><input type="button" value="click Me" onclick="clickMe()"/>没有任何反应。
如果再修改为在JavaScript代码中动态指定事件处理函数,如下:<input type="button" value="click Me" id="myBtn"/>
<script> function clickMe(){ alert(this.value); }
var btn = document.getElementById("myBtn");
btn.onclick=clickMe;
</script>那么点击按钮之后,弹出的就是click Me,也就是此时this有效。
原因在于,在html代码中直接指定的事件响应代码,浏览器会动态创建一个封装着元素属性的函数,函数内部还有一个局部变量event,然后再调用在onclick属性中指定的那段js代码。如果要模拟一下,则类似于如下的代码:假设有如下元素: <input type="button" id="myMock" value="mock" onclick="clickMe1()" />
那么当点击该按钮的时候,浏览器会创建如下这么一个函数来执行在onclick属性中指定的JavaScript代码。<script> function mock() { with (document) { var item = getElementById("myMock"); with (item) { clickMe1(); } } } </script>因为clickMe1不是mock的内部函数,他只是在mock中被调用,所以clickMe1内部直接访问value是无效的。而如果我们在onclick中指定的不是一个执行函数的代码,而是直接把该函数的代码放在这里,也就是: <input type="button" value="mock" id="myMock" onclick="alert(value)" />
那么响应的mock函数就会变为<script> function mock() { with (document) { var item = getElementById("myMock"); with (item) { alert(value); } } } </script>此时当然可以正确获取到item的value的值。
来自为知笔记(Wiz)
相关文章推荐
- JavaScript 模块(1):初学者指南
- 用 JavaScript 对抗 DDOS 攻击
- JS学习笔记-事件绑定
- bzoj 1823: [JSOI2010]满汉全席 2-SAT判定
- 记一次奇葩的Js劫持事件
- SoundJS手机浏览器加载得到的音频长度与实际不符的BUG
- JavaScript 中的undefined and null 学习
- javascript的函数作用域及声明提前
- js设置、修改、获取、删除 cookie
- 七步从Angular.JS菜鸟到专家(2):Scopes(1)
- 七步从Angular.JS菜鸟到专家(3):数据绑定和AJAX(1)
- 七步从Angular.JS菜鸟到专家(1):如何开始
- Backbone.js 1.1.2
- Zepto.js 1.1.6
- Underscore.js 1.8.3
- JavaScript依赖注入的实现思路
- 如何让你的JavaScript代码更加语义化
- JavaScript 单例/单体模式(Singleton)
- JavaScript基本包装类型
- JavaScript定义类,定义属性,定义方法的几种方式详解与分析