深入理解在JS中通过四种设置事件处理程序的方法

所有的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中通过四种设置事件处理程序的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

时间: 2017-02-27

JavaScript高级程序设计 阅读笔记(十七) js事件

一.事件流 IE中是冒泡型事件,即从最特定的事件目标到最不特定的事件目标. Netscape Navigator使用的是捕获型事件,这个跟IE中采用的冒泡型事件相反. DOM事件流同时支持两种事件模型,但捕获型事件先发生. 二.事件处理函数/监听函数 事件是用户或浏览器自身进行的特定行为.这些事件都有自己的名字,如click.load.mouseover等. 事件处理函数有两种分配方式:在JavaScript中或者在HTML中. 如果在JavaScript中分配事件处理函数,则首先要获得要处理的

JS注册/移除事件处理程序(ExtJS应用程序设计实战)

在设计ExtJS应用程序时最常做的事情就是注册事件处理程序,因为在ExtJS的世界里,几乎完全由时间组成.因此,ExtJS的设计者使注册事件变得非常容易(同时还提供了非常不容易的方式任你选择)--on/un,也就是上与下两种方式,或是addListener与removeListener,Element的所有子类都可以使用.例如有一个<div/>希望在用户按下时能够给予简单的反馈: <divid="happyDiv"class="happyStyle"

浅谈Javascript事件处理程序的几种方式

事件就是用户或浏览器自身执行的某种动作.比如说click,mouseover,都是事件的名字.而相应某个事件的函数就叫事件处理程序(或事件侦听器).为事件指定处理程序的方式有好几种. 一:HTML事件处理程序. 如: 复制代码 代码如下: <script type="text/javascript"> function show(){ alert('hello world!'); } </script> <input type="button&q

js使用函数绑定技术改变事件处理程序的作用域

第一种,也是 最常见的,就是直接在html标签里面通过指定事件处理程序同名的HTML属性来注册事件,代码如下: 复制代码 代码如下: function eventHandler() { alert("当前作用域是 input 元素本身"); } <input type="button" value="单击我" onclick="eventHandler(this)"/> 第二种方式就是将一个函数赋值给一个事件处理程

JavaScript事件处理程序(事件侦听器)

我们知道,javascript与HTML之间的交互是通过事件来实现的,事件就是用户或浏览器自身执行的某种动作,比如click.mounseover.load--,而响应事件的函数就叫做事件处理函数(或事件侦听器). event util test var eventUtil = { addListener: function(element, type, hander) { if (element.addEventListener) { element.addEventListener(type

js跨浏览器的事件侦听器和事件对象的使用方法

本文特意为跨浏览器实现添加事件侦听器和跨浏览器事件对象的使用方法做了下总结,并把这些方法打包,欢迎大家学习. 打包的一个EventUtil对象 var EventUtil = { // 添加侦听事件 addEventListener:function (element, type, handler) { // IE9+.Firefox.Safari.chrome和Opera if(element.addEventListener) { element.addEventListener(type,

Vue.js中关于侦听器(watch)的高级用法示例

Vue侦听器watch 虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器.这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化.当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的.例如: <div id="watch-example"> <p> Ask a yes/no question: <input v-model="question"> </p> &l

深入浅析Vue.js计算属性和侦听器

一. 概述 计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example"> {{ message.split('').reverse().join('') }} </div> 在这个地方,模板不再是简单的声明式逻辑.你必须看一段时间才能意识到,这里是想要显示变量 message 的翻转字符串.当你想要在模板中多次引用此处的翻转字符串时,就会更加难以处理. 所以,对于

Vue 2.0 侦听器 watch属性代码详解

用法 -------------------------------------------------------------------------------- 先来看看官网的介绍: 官网介绍的很好理解了,也就是监听一个数据的变化,当该数据变化时执行我们的watch方法,watch选项是一个对象,键为需要观察的表达式(函数),还可以是一个对象,可以包含如下几个属性: handler        ;对应的函数                          ;可以带两个参数,分别是新的值

Vue学习笔记之计算属性与侦听器用法

本文实例讲述了Vue计算属性与侦听器用法.分享给大家供大家参考,具体如下: vue之所以加载速度非常块,是因为在数据改变时,它并不是将所有组件都刷新,而是在重用代码的基础上对发生改变的地方进行渲染.同时,还得益于计算属性的使用: 1.计算属性 像绑定普通属性一样在模板中绑定计算属性.例如reverseName属性依赖于firstName和lastName,当firstName或lastName发生改变时,依赖于它的 reverseName 也会更新. 利用函数方法也可以实现类似的效果,不同的是计

详解vue 计算属性与方法跟侦听器区别(面试考点)

计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example"> {{ message.split('').reverse().join('') }} </div> 在这个地方,模板不再是简单的声明式逻辑.你必须看一段时间才能意识到,这里是想要显示变量 message 的翻转字符串.当你想要在模板中多次引用此处的翻转字符串时,就会更加难以处理. 所以,对于任何复杂逻辑

JavaScript 事件流、事件处理程序及事件对象总结

JS与HTML之间的交互通过事件实现.事件就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用监听器(或处理程序)来预定事件,以便事件发生时执行相应的代码.这种在传统软件工程中被称为观察员模式,支持页面的行为与页面的外观之间的松散耦合.本文将介绍JS事件相关的基础知识. 一.事件流 事件流描述的是从页面中接受事件的顺序. 事件冒泡 事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的结点(文档).以下面HTML页面为例,如果你点击了页面中的按钮,那么"

学习JavaScript事件流和事件处理程序

本文全篇介绍了JavaScript事件流和事件处理程序,分享给大家供大家参考,具体内容如下 一.事件流 事件流描述的是从页面中接收事件的顺序.IE的事件流是事件冒泡流,而Netscape Communicator的事件流是事件捕获流. 二.事件冒泡 即事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点.如: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT