首页 / JAVASCRIPT / 探究JavaScript中的五种事件处理程序方式

探究JavaScript中的五种事件处理程序方式

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了探究JavaScript中的五种事件处理程序方式，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含9913字，纯文字阅读大概需要15分钟。

内容图文

我们知道JavaScript与HTML之间的交互是通过事件实现的。事件最早是在IE3和Netscape Navigator 2中出现的，当时是作为分担服务器运算负载的一种手段。　通俗地理解，事件就是用户或浏览器自身执行的某种操作。而事件处理程序即为响应某个事件的函数。抽出主干，即事件处理程序为函数。我们又把事件处理程序称为事件侦听器。事件处理程序是以"on"开头的，因此对于事件on的时间处理程序即为onclick。时间处理程序在JavaScript中大致有五种，下面会根据这五种不同的时间处理程序分为5部分来介绍。

1.HTML事件处理程序

2.DOM0级事件处理程序

3.DOM2级事件处理程序

4.IE事件处理程序

5.跨浏览器的事件处理程序

第一部分：HTML事件处理程序

什么使HTML事件处理程序呢？显然，通过名字就可以猜到，它是卸载HTML中的函数（事件处理程序）。初学者大多用到的事件处理程序即为HTML事件处理程序。下面举例：

例1：

<button onclick="alert('success')">点我</button>

这条代码即为事件处理程序，点击button后，会弹出弹框，显示success。

特点：HTML事件处理程序中Javascript代码作为了onclick特性的值，因此，我们不能在JavaScript代码中使用未经转义的HTML语法字符，如&(和号)、""（双引号）、<(小于号)、>（大于号）等等。所以这个例子中字符串我使用了单引号而没有使用双引号。看下面在JavaScript代码中使用了未经转义的HTML语法字符。

例2：

<button onclick="alert("success")">点我</button>

这时，我在success外使用了HTML语法字符""(双引号)，这时不会弹出窗口，而是报错语法错误。但是我如果还是希望使用双引号呢？这时就要用"实体来代替HTML中的语法字符。如下例所示：

例3：

<button onclick="alert("success")">点我</button>
  <!-- 正常弹出窗口-->

这个例子中我们在JavaScript代码中使用了HTML实体而没有使用HTML语法字符，这时就不会报错了。

例4：

<button onclick="show()">点我</button>

<!-- 正常弹出窗口--> 

<script>

  function show(){

    alert("success");

  }

</script>

这个例子中我们调用函数，而把函数定义放在了script中，这样也是可以的。因为：事件处理程序中的代码在执行时，有权访问到全局作用域中的任何代码。这句话怎么理解呢？实际上，我们可以在chrome中观察button标签的作用域链。如下所示：

探究JavaScript中的五种事件处理程序方式 - 文章图片

接下来我们再看看script所在的作用域，如下图所示：

探究JavaScript中的五种事件处理程序方式 - 文章图片

可以看到script标签就在全局作用域。

也就是说目前button中的HTML事件处理函数在作用域链的最前端，而Script在全局作用域，所以“事件处理程序中的代码在执行时，有权访问到全局作用域中的任何代码。”这句话就不难理解了。

例5：

<button onclick="alert(event.type)">点我</button>

这时浏览器弹出窗口显示：click。这个例子是什么意思呢？注意到我并没有在event.type外加单引号，说明这并不是字符串。实际上，event是局部对象--在触发DOM上的某个事件时，会产生一个事件对象event，这个对象包含着所有与事件有关的信息。而这里是弹出了对象了类型，即为click。

HTML事件处理程序的三个缺点（重点）：

1. 时差问题。因为用户可能在HTML元素一出现就开始触发相应事件，但是有可能该事件的脚本（如例4中show()函数的函数定义在script中）还没有加载完成，此时不具备执行条件，故报错。

解决方法：将HTML事件处理程序封装在一个try-catch块中，以便错误不会浮出水面。

<input type="button" value="click me" onclick="try{show();}catch(ex){}">

2.这样扩展事件实例程序的作用域链在不同的浏览器中会导致不同的结果（例4中我是在chrome中查看的作用域链，其他浏览器不一定是这样的，请注意）。不同JavaScript引擎遵循的标识符解析规则略有差异，很有可能会在访问非限定对象成员时出错。

3.HTML和JavaScript代码紧密耦合。结果是：如果要更换事件处理程序，就必须改动两个地方--HTML代码和JavaScript代码。

那么怎么解决上面的问题呢？ DOM0级事件处理程序是一个不错的选择!

第二部分：DOM0级事件处理程序

DOM0级事件处理程序用的也非常普遍。之所以成为DOM0级，我认为是当时还没有出DOM标准，而IE和Netscape Navigator两者使用的时间处理程序（不知是否合理，望批评指正）。总之，我们先看看下面的例子吧。

例6：

<button id="button">点我</button>

<script>
  var button=document.getElementById("button");
  button.onclick=function(){
    alert("clicked");
  }
</script>

即我们先在script中取得元素的引用，然后再将一个函数赋值给onclick事件处理程序。之前介绍过，事件处理程序即为函数，而button.onclick这种形式即函数作为了对象的方法。那么对象的方法即事件处理程序是在元素（对象）的作用域中运行而非在全局作用域中运行的，因为方法是属于对象的。(注意：例4中事件处理程序是在全局作用域中运行的）。如果这个函数中存在this关键字，那么this就会指向这个对象。下面我们在浏览器中证明事件处理程序是在元素的作用域中运行。

探究JavaScript中的五种事件处理程序方式 - 文章图片

我们看到alert("clicked");确实是在button中运行的。

我们还可以通过下面的方式删除通过DOM0级方法指定的事件处理程序。

button.onclick=null;

通过上面的分析我们可以知道DOM0级事件处理程序是非常不错的，它解决了HTML事件处理程序的三个缺点：时差问题、作用域链导致的不同浏览器表现不一致问题和HTML和JavaScript紧密耦合问题。

但是，DOM0级事件处理程序并不是完美的，它同样有两个缺点：

1.我们不能给一个元素同时添加两个事件。

2.我们不能控制元素的事件流（捕获or冒泡）。

对于第二个问题后面会讲到，第一个问题举例如下：

<button id="button">点我</button>

<script>
  var button=document.getElementById("button");
  button.onclick=function(){
    alert("clicked");
  }
  button.onclick=function(){
    alert("again");
  }

虽然我对同一个元素设置了两个事件处理程序，但是最终的结果是：只有第二个事件有效（覆盖了第一个事件）。当然，人类是聪明的动物，DOM2级事件很好的解决了这个问题!

第三部分：DOM2级事件处理程序

DOM2级事件处理程序定义了两个方法：

addEventListener() ---添加事件侦听器
removeEventListener() ---删除事件侦听器

在博文的开头我就提到了事件处理程序即事件侦听器。这两个方法都接收三个参数：

1.要处理的事件名（注意：是时间名，所以没有on！），如click、mouseover等。

2.作为事件处理程序的函数，如function(){alert("clicked");}

3. 表示事件流方式的布尔值。false为冒泡阶段调用事件处理程序；true为捕获阶段调用事件处理程序。

下面通过两个例子加深理解：

例7：

<button id="button">点我</button>

<script>
  var button=document.getElementById("button");
  button.addEventListener("click",function(){
    alert(this.id);
  },false);
  button.addEventListener("click",function(){
    alert("another event");
  },false);
</script>

结果：第一次弹出窗口：button。

　　　第二次弹出窗口：another event。

结论：通过DOM2级事件处理程序，我们可以为同一个元素添加两个或更多的事件。事件根据顺序依次触发。且this同样指向当前元素，故函数在元素的作用域中执行。

this分析：和前面的DOM0级事件处理程序一样，这里的addEventListener同样也可以看作对象的方法，不同之初在于，DOM0级的方法需要另外一个函数来赋值，而这里的方法是DOM2级规范预定义的。

removeEventListener()这个删除事件处理程序的方法值得注意的是：使用addEventListener()来添加的事件处理程序只能通过它来移除，且需要传入相同的参数。

例8：

<button id="button">点我</button>

<script>
  var button=document.getElementById("button");
  button.addEventListener("click",function(){
    alert(this.id);
  },false);
  button.removeEventListener("click",function(){
    alert("another event");
  },false);

上述代码貌似可以移除click的事件处理程序，但是通过实验证明是不可以的，原因是：事件处理程序为匿名函数时无法移除。看下面的成功移除的例子：

例9：

<button id="button">点我</button>

<script>
  var button=document.getElementById("button");
  function handler(){
    alert(this.id);
  }
  button.addEventListener("click",handler,false);
  button.removeEventListener("click",handler,false);
</script>

成功移除！

注意：1.传入方法的handler没有（），是因为这里都只是定义函数，而不是调用，需要注意。

　　　2.这两个方法的第三个参数都是false，即事件处理程序添加到冒泡阶段。一般不使用true,因为低版本的IE不支持捕获阶段。

DOM2级事件处理程序成功地解决了前面所有事件处理程序的问题，堪称perfect!!!! 然而总是特立独行的IE浏览器又有新花样，它也有自己的一套事件处理程序，下面我们就来看看吧。

第四部分：IE事件处理程序

IE事件处理程序中有类似与DOM2级事件处理程序的两个方法：

1.attachEvent()

2.detachEvent()

它们都接收两个参数：

1.事件处理程序名称。如onclick、onmouseover，注意：这里不是事件，而是事件处理程序的名称，所以有on。

2.事件处理程序函数。如function(){alert("clicked");}

之所以没有和DOM2级事件处理程序中类似的第三个参数，是因为IE8及更早版本只支持冒泡事件流。

注意：

1.IE事件处理程序中attachEvent()的事件处理程序的作用域和DOM0与DOM2不同，她的作用域是在全局作用域中。因此，不同于DOM0和DOM2中this指向元素，IE中的this指向window。

2.同样，我们可以使用attachEvent()来给同一个元素添加多个事件处理程序。但是与DOM2不同，事件触发的顺序不是添加的顺序而是添加顺序的相反顺序。

3.同样地，通过attachEvent()添加的事件处理程序必须通过detachEvent()方法移除，同样的，不能使用匿名函数。

4.支持IE事件处理程序的浏览器不只有IE浏览器，还有Opera浏览器。

第五部分：跨浏览器的事件处理程序

实际上，这一部分视为了跨浏览器使用，将前面的几部分结合起来就可以了。

这一部分需要创建两个方法：

addHandler() --这个方法职责是视情况来使用DOM0级、DOM2级、IE事件处理程序来添加事件。
removeHandler()--这个方法就是移除使用addHandler添加的事件。

这两个方法接收相同的三个参数：

1.要操作的元素--通过dom方法获取

2.事件名称--注意：没有on，如click、mouseover
3.事件处理程序函数--即handler函数

这两个方法的构造情况如下：

var EventUtil={
  addHandler:function(element,type,handler){
    if(element.addEventListener){
      element.addEventListener(type,handler,false);//注意：这里默认使用了false（冒泡）
    }else if(element.attachEvent){
      element.attachEvent("on"+type,handler);
    }else{
      element["on"+type]=handler;
    }
  },
  removeHandler:function(element,type,handler){
    if(element.removeEventListener){
      element.removeEventListener(type,handler,false);//注意：这里默认使用了false（冒泡）
    }else if(element.detachEvent){
      element.detachEvent("on"+type,handler);
    }else{
      element["on"+type]=null;
    }
  }
};

即先判断DOM2级事件处理程序，再判断IE事件处理程序，最后使用DOM0级事件处理程序。

例10：通过这个例子来使用上面构造的方法。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>跨浏览器事件处理程序</title>
</head>
<body> 

  <button id="button">点我</button>

<script>
var EventUtil={
  addHandler:function(element,type,handler){
    if(element.addEventListener){
      element.addEventListener(type,handler,false);//注意：这里默认使用了false（冒泡）
    }else if(element.attachEvent){
      element.attachEvent("on"+type,handler);
    }else{
      element["on"+type]=handler;
    }
  },
  removeHandler:function(element,type,handler){
    if(element.removeEventListener){
      element.removeEventListener(type,handler,false);//注意：这里默认使用了false（冒泡）
    }else if(element.detachEvent){
      element.detachEvent("on"+type,handler);
    }else{
      element["on"+type]=null;
    }
  }
};

  function handler(){
    alert("clicked");
  }

  var button=document.getElementById("button");
  EventUtil.addHandler(button,"click",handler);
</script>
</body>
</html>

最后浏览器成功弹出“clicked”。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

内容总结

以上是互联网集市为您收集整理的探究JavaScript中的五种事件处理程序方式全部内容，希望文章能够帮你解决探究JavaScript中的五种事件处理程序方式所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/348005.html

来源：【匿名】

【上一篇】微信小程序获取当前地理位置和经纬度实例代码【下一篇】javascript 怎么调用php方法

更多 ►

【探究JavaScript中的五种事件处理程序方式】教程文章相关的互联网学习教程文章

JavaScript学习--Item35 事件流与事件处理【代码】【图】

1. 事件处理1.1. 绑定事件方式（1）行内绑定语法： //最常用的使用方式 <元素事件=”事件处理程序”>（2）动态绑定 //结构+样式+行为分离的页面（html+css+js事件）语法：对象.事件=事件处理程序行内绑定和动态绑定的重要区别：以上程序是不可用的，点击div时，执行test函数，这时，test中的this表示window对象因为：我们定义test函数，实际上相应于在window对象下定义了test属性 test(); —> 相当于 wi...

javaScript--Dom 二级事件

1、Dom2级事件定义了两个方法，用于处理指定删除事件处理程序事件：addEventListener() 和 removeEventListener()。2、这两个方法有三个参数，（处理事件名称，事件处理程序函数，事件捕获冒泡（true / false））。　　例子： const btn = document.querySelector(‘#btn‘); 　　　　 btn.addEventListener("click", function () {　　　　　　　alert(" Hello, world ！！！ "); 　　　　　 }, false);3、通过addEventListe...

触发时，文本出现颜色。事件是黏合应用程序中所有用户交互的胶水。DOM和事件的是JavaScript中的黄金搭档【代码】

<html> <head> <title>demo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> /* 示例操作DOM元素 */ window.onload = function(){ //给Dom元素添加颜色 var li = document.getElementsByTagName("li"); for(var i=0;i<li.length;i++){ li[i].style.color = "red"; li[i].onmouseover = function(){ this.style.color = "blue"; } li[i].onmouseou...

javascript事件捕获机制，dom tree【代码】

$(document,"a").on("click",function(){alert(2);return false;}); $("<a>zdfsdafasdfsdfasdfsadf</a>").appendTo("body")事件从document开始级级向下搜，每次都是，所以这个事件会捕获到所有匹配的dom元素原文：http://www.cnblogs.com/hualiu0/p/5081996.html

JavaScript addEventListener()事件监听方法【代码】

文章链接：https://www.cnblogs.com/jc2182/p/11307165.htmladdEventListener()方法将事件处理程序附加到指定的元素。addEventListener()方法将事件处理程序附加到元素，而不覆盖现有的事件处理程序。您可以向一个元素添加许多事件处理程序。您可以向一个元素添加许多相同类型的事件处理程序，即两个“单击”事件。您可以将事件侦听器添加到任何DOM对象，而不仅仅是HTML元素。即window对象。addEventListener()方法可以更容易地控制...

JavaScript事件处理学习（2）—单选按钮复选框下拉框操作【代码】【图】

1 <html>2 <head>3 <title>dsd</title>4 <script language="JavaScript">5function show1(){6var name=document.myform.name.value //保存姓名 7 alert("姓名"+name);8var sex; //保存性别 9if(document.myform.sex[0].checked){ //如果第一个元素被选中10 sex=document.myform.sex[0].value; 11 }else {sex=document.myform.sex[1].value;} 12 alert("性别"+sex); 13var ints=...

【Javascript】重新绑定默认事件【代码】

更多内容，请移步 JSCON-简时空在有一种场景下，你想先屏蔽掉默认的系统事件，而在特定条件下又重新绑定回去。【场景】H5页面，动画欢迎界面，共6帧；想在前5帧中屏蔽掉默认的touchmove事件，在第6帧是表单页面，想恢复系统默认的touchmove——这样用户可以自由拖拽页面，浏览完整的表单信息原生JS：目前我所能想到的最简单粗暴有效的方法是这样的：（没错，it works） document.ontouchmove = function(e){returnfalse;}...

javaScript事件【代码】

JavaScript通过事件与HTML交互。事件流事件流规定了事件的触发规则和顺序。DOM2规定了事件流包括三个阶段：事件捕获 -> 目标触发除 -> 事件冒泡。DOM2规定在事件捕获阶段不应调用事件处理程序，不过各大浏览器都不鸟它。DOM2级的事件处理程序操作函数对：addEventListener和removeEventListener的第三个参数则把这种事变成了DIY，这是一种妥协，同时让初学者认为dom的管理一片混乱。var btn = document.getElementById("btn"); btn...

JavaScript 触发click事件兼容FireFox，IE 和 Chrome【代码】

解决了火狐下无法触发click事件的问题<script language="javascript">function test2(name){if(document.all){document.getElementById(name).click();}else{var evt = document.createEvent("MouseEvents");evt.initEvent("click", true, true);document.getElementById(name).dispatchEvent(evt);}} </script><a href="#" id="a3" onclick="location.href = ‘http://www.baidu.com‘;">baidu</a> <input type="button" value="c...

javascript事件代理(delegate)原理解析【代码】【图】

什么是事件代理？首先得知道什么是事件，并且弄清楚事件流，才能真正明白事件代理原理。一、什么是事件？　　javascript与HTML之间交互就是通过事件实现的，事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。如onload、onclick、onmouseup、onmousedown... 。二、事件流　　DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素结点与根结点之间的路径传播，路径所经过的结点都会收到该事件，...

JavaScript键盘事件常见用法实例分析

JavaScript 键盘事件有以下3种keydown键盘按键按下（如果按着不放，会持续触发该事件），可以捕获组合键。keypress键盘非功能按键按下（在keydown之后触发，如果按着不放会持续触发该事件），只能捕获单个键。keyup键盘按键弹起，可以捕获组合键。全局事件对象eventevent.ctrlKey功能键”ctrl”键是否按下。event.altKey功能键”alt”键是否按下。event.shiftKey功能键”shift”键是否按下。event.keyCode键盘按键键码。event.char...

JavaScript事件对象EventUtil【代码】

JS中事件对象有很多种，兼容性参差不齐，这个对象封装了大部分所需的各种方法var EventUtil={addHandler:function(element,type,handler){ //添加事件if(element.addEventListener){ element.addEventListener(type,handler,false); //使用DOM2级方法添加事件}elseif(element.attachEvent){ //使用IE方法添加事件element.attachEvent("on"+type,handler);}else{element["on"+type]=handler; //使用DO...

JavaScript事件(含Demo)【代码】

主要事件:　　onclick　　鼠标单击事件　　onmouseover 鼠标经过事件　　onmouseout　　鼠标移开事件　　onchange　　文本框内容改变事件　　onselect　　文本框内容被选中事件　　onfocus　　光标聚集　　onblur　　光标离开　　onload　　网页导入　　onunload　关闭网页 1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title> 事件</title> 6<script type="text/javascript"> 7function count(){8 9var result="...

JavaScript事件处理程序

一、HTML事件处理程序作用域为元素所在的作用域function showMessage(){　　alert("showMessage");}<input type="text" value="Click" onclick="alert(‘Click‘)" ><input type="text" value="Click" onclick="showMessage()" > 二、DOM0级事件处理程序作用域为元素所在的作用域var btn = document.getElementById("btn");btn.onclock = function(){　　alert("click");} //删除事件btn.onclick = null;三、DOM2级事件处理程序作用...

JavaScript - 函数、对象、事件、字符串（三）【代码】

JS 函数JS 函数是被设计为执行特定任务的代码块JS 函数会在某代码调用它时被执行JS 函数语法JS 函数通过 function 关键词进行定义，其后是函数名和括号()函数名可包含字母、数字、下划线、美元符号（规则与变量名相同）括号内是参数列表，多个参数之间使用逗号分隔：(参数1，参数2，参数3...)由函数执行的代码被放置在花括号中：{...}function functionName(var1,var2,var3,...){//执行代码//return ... } JS 函数调用当事件发生时...

首页 / JAVASCRIPT / 探究JavaScript中的五种事件处理程序方式

探究JavaScript中的五种事件处理程序方式

内容导读

内容图文

内容总结

内容备注

内容手机端

【探究JavaScript中的五种事件处理程序方式】教程文章相关的互联网学习教程文章

JAVASCRIPT - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程