搜索
首页web前端js教程在js中详细介绍几种类型的事件处理程序的方式
在js中详细介绍几种类型的事件处理程序的方式May 17, 2018 am 11:05 AM
javascript事件类型

事件就是用户或浏览器自身执行的某种动作,如click,laod,mouseover都是事件的名称。

事件流描述的是从页面中接收事件的顺序。

事件处理程序就是对事件作出响应的函数。事件处理程序的名字以“on”开头,如click事件对应的事件处理程序的名称为onclick。

为事件指定处理程序的方式有多种,如:HTML事件处理程序、DMO0级事件处理程序、DOM2级事件处理程序、IE事件处理程序、跨浏览器事件处理程序。

(1)html事件处理程序

即:将事件处理程序,写在相应的html标签中。

eg:

<input type="button" value="click me" onclick="alert("hello")" />

缺点:①存在一个时间差,当用户在html元素一出现在页面上就去触发相应的事件时,事件的处理程序可能还不具备执行条件(比如说调用的函数还木有被解析),就会引发错误。eg:

<input type="button" value="click me" onclick="message()" />
<script type="text/javascript">function message(){alert("hello world");}</script>

因为调用的函数处于按钮的下方,如果在message函数被加载之前就点击了按钮就会引发错误。

②html和js代码耦合度太高,如果要改变事件处理程序,就要改动两个地方:html代码和javascript代码。

(2)DMO0级事件处理程序

eg:
var btn=document.getElementById("myBtn");
  btn.onclick=function(){alert(this.id)};

注意:如果这段代码位于按钮之后,就有可能在一点时间内怎么点击都木有反应,因为在这段代码运行以前不会指定事件处理程序。

DMO0级事件处理程序被认为是元素的方法,换句话说,DMO0级事件处理程序是在元素的作用域中运行的,所以程序中的this引用当前元素。可以在事件处理程序中通过this访问元素的任何属性和方法。

以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。

也可删除指定的事件处理程序,只要将事件处理程序的属性设置为null就Ok了。

eg:
btn.onclick=null;将处理程序设置为null以后,再点击按钮不会发生任何动作。

(3)DOM2级事件处理程序

DOM2级事件定义了两个方法,用于指定和删除事件处理程序。这两个操作分别为:addEventListener()和removeEventListner().所有的DOM节点都包含这两个方法。他们要接受3个参数,分别为:要处理的事件名,处理函数,布尔值。最后的布尔值参数如果为ture,表示在捕获阶段处理程序,如果为false,表示在冒泡阶段调用事件处理程序。

例如在按钮上为click添加事件处理程序,可以用下面的代码:

var btn=document.getElementById("myBtn");
btn.addEventListner("onclick",function(){alert("hello world");false});这里添加的事件处理程序也是依附于元素的的作用域

使用DOM2事件处理程序的优点是:可以为同一个元素添加多个事件处理程序。

例:var btn=getElementById("myBtn");
btn.addEventListner("click",function(){alert(this.id);},flase);
btn.addEventListner("click",function(){alert("hello world");},flase);

结果:先显示id,后显示hello world。

通过addEventListner()添加的事件处理程序只能通过removeEventListner来删除。移除时使用的参数与添加事件处理程序的参数相同。另:通过addEventListner添加的匿名函数无法删除。

(4)IE事件处理程序。

IE添加和删除事件处理程序的函数分别为:attachEvent()和detachEvent();这两个函数接收相同的两个参数:事件处理程序名与事件处理函数。由于IE只支持事件冒泡,所以通过attachEvent添加的事件处理程序都会添加到冒泡阶段。

例如:var btn=document.getElementById("myBtn");
btn.attachEvent("onclick",function(){alert("hello world");});

IE在使用attachEvent方法的情况下,事件处理程序的作用域为全局作用域,因此this等于window。(在编写跨浏览器的代码时,记住这一点非常重要)。

与addEventListner类似,attachEvent()方法也可以用来为一个元素添加多个事件处理程序;

eg:
var btn=document.getElementById("myBtn");
btn.attachEvent("onclick",function(){alert("clicked");});
btn.attachEvent("onclick",function(){alert("hello world");});

值得注意的是:这些事件的处理程序是按逆序触发的,也就是说,先弹出hello world 再弹出clicked。

detach()使用方法略。

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

为了以跨浏览器的方式处理事件,主要可以使用两个方法:

①使用能隔离浏览器差异的js库。

②自己编写最适合的事件处理方法。这里要用到能力检测,即:识别浏览器的能力。要保证代码能在大多数浏览器下一致的运行,只须关注冒泡阶段。

代码步骤如下:首先要创建的方法是addHandler(用于处理跨浏览器的兼容性问题,这里没有给出具体代码),它的职责是视情况判定使用DOM0级方法,DOM2级方法,IE方法来添加事件。addHandler接收3个参数:要操作的元素、事件名称、事件处理程序函数。这个方法属于一个名叫EventUtil的对象。这里使用这个对象来处理浏览器之间的差异。

与addHandler对应的方法是removeHandler(),它也接受相同的参数。这个事件的职责是移除之前添加的事件处理程序。不论事件是以什么方式添加到对象中的,如果其他方法程序无效,则默认使用DOM0级方法。

使用EventUtil的方法如下:var btn=document.getElementById("myBtn");
var hander=function(){alert("hello")};//事件处理程序
EventUtil.addHandler(btn,"onclick",handler);
//其他代码
EventUtil.removeHandler(btn,"onclick",handler);
addHandler()和removeHandler()没有考虑到所有的浏览器问题,例如IE中作用域的问题,但是使用它们添加和移除事件处理程序还是足够了。

上面是我整理给大家的在js中详细介绍几种类型的事件处理程序的方式,希望今后会对大家有帮助。

相关文章:

重点解答动态加载JS脚本,一语道破

javascript中遍历EL表达式List集合中的值

如何在3f1c4e4b6b16bbbd69b2ee476dc4f83a2cacc6d41bbb37262a98f745aa00fbf0标签中一样可以使用el表达式

以上是在js中详细介绍几种类型的事件处理程序的方式的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
es6数组怎么去掉重复并且重新排序es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

JavaScript的Symbol类型、隐藏属性及全局注册表详解JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

原来利用纯CSS也能实现文字轮播与图片轮播!原来利用纯CSS也能实现文字轮播与图片轮播!Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

JavaScript对象的构造函数和new操作符(实例详解)JavaScript对象的构造函数和new操作符(实例详解)May 10, 2022 pm 06:16 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

JavaScript面向对象详细解析之属性描述符JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

javascript怎么移除元素点击事件javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

foreach是es6里的吗foreach是es6里的吗May 05, 2022 pm 05:59 PM

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。

整理总结JavaScript常见的BOM操作整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

螳螂BT

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

功能强大的PHP集成开发环境

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中