这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
所有的 JavaScript 事件处理程序的作用域是在其定义时的作用域而非调用时的作用域中执行, 并且它们能存取那个作用域中的任何一个本地变量。但是 html 标签属性注册处理程序就是一个例外。看下面四种方式
所有的 JavaScript 事件处理程序的作用域是在其定义时的作用域而非调用时的作用域中执行, 并且它们能存取那个作用域中的任何一个本地变量。但是 HTML 标签属性注册处理程序就是一个例外。看下面四种方式:
第一种方式 (HTML 标签属性):
- <input type="button" id="btn1" value="测试" onclick="alert(this.id);" />
上面的代码是通过设置 HTML 标签属性为给 button 添加了点击事件, 当点击 button 按钮时会弹出这个 button 的 id, 即 btn1。
这种通过 HTML 属性来注册事件处理程序是一个例外。它们被转换为能存取全局变量的顶级函数而非任何本地变量。由于历史的原因, 它们运行在一个修改后的作用域链中。通过 HTML 属性定义的事件处理程序能像本地变量一样使用目标对象、容器对象 (form) 对象和 document 对象的属性。它会被浏览器转换为类似如下的代码:
- function (event){
- with(document){
- with(this.form||{}){
- with(this){
- /*具体的事件处理代码*/
- }
- }
- }
- }
关于 with 的用法, 可以自行查阅, 这里后面有文章讲解。读者先自行了解一下。提供一个连接(https://developer.mozilla.org/zh-CN/docs/web/JavaScript/Reference/Statements/with)
这种方式现在已经不推荐使用。
第二种方式 (调用函数)
- <input type="button" id="btn2" value="测试" onclick="test()" />
- <script type="text/javascript">
- function test(){
- alert(this.id);
- }
- </script>
这段代码弹出来的是 undefined。
这种设置方式是通过调用全局函数来进行的, 这时 this 指向的是 window, 而非这个 button 的调用者, 可以通过输出 console.log(this==window); 来进行验证
第三种方式 (调用函数)
- <input type="button" id="btn3" value="测试" />
- <script type="text/javascript">
- var btn3 = document.getElementById("btn3");
- btn3.onclick = function () {
- alert(this.id);
- };
- </script>
这段代码弹出来的是 btn3。
这种事件处理程序在事件目标上定义, 所以它们作为这个对象的方法来调用 (但是下面在 IE 里面有个例外)。这就是说在事件处理程序内, this 关键字指的是事件目标。
当使用 addEventListener() 注册时, 调用的处理程序使用事件目标作为它们的 this 值。但是对于还用 attachment() 注册的处理程序作为函数调用, 它们的 this 值是全局(window)对象。就是说的第四中方式
第四种方式 (通过 addEventListener 和 attachment):
- <input type="button" id="btn3" value="测试" onclick="test()" />
- var btn = document.getElementById("btn3");
- var handler = function () { console.log(this.id); };
- if (btn.addEventListener) {
- console.log("addEventListener");
- btn.addEventListener("click", handler, false);
- }
- else if (btn.attachEvent) {//IE9之前的版本
- console.log("attachEvent");
- btn.attachEvent("onclick",handler);
- }
在 IE5-IE8 版本输出的是 undefined。(此时调用的是 attachement)
IE9 以后的版本输出的 btn3.(修复了上面的问题, 增加了通用的 addEventListener)。
如果想修复 IE5-8 里面的那个问题, 可以使用下面的方法。
- /*
- *target:目标对象,button之类的
- *type:"click"字符串事件名称,无需带on
- *handler:调用的处理程序
- */
- function addEvent(target,type,handler){
- if (target.addEventListener) {
- target.addEventListener(type, handler, false);
- }
- else if (target.attachEvent) {//IE9之前的版本
- btn.attachEvent("on"+type,function(event){
- return hanlder.call(target,event);//把处理程序作为事件目标的方法调用,更改this指向。
- });
- }
- }
以上所述是小编给大家介绍的在 JS 中通过四种设置事件处理程序的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/17/0526/327136.html