JavaScript事件处理的方式(三种)


Posted in Javascript onApril 26, 2016

最近这段时间因为每天要修改网站,为网站做特效,所以看了很多的js接触事件,自己只会使用一小部分,有时用的时候也比较混乱,现在系统的整理了一下,特此分享到三水点靠木平台供大家参考下!

一、什么是JavaScript事件?

事件(Event)是JavaScript应用跳动的心脏,也是把所有东西粘在一起的胶水,当我们与浏览器中Web页面进行某些类型的交互时,事件就发生了。

事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键,事件还可能是Web浏览器中发生的事情,比如说某个Web页面加载完成,或者是用户滚动窗口或改变窗口大小。说白了,事件是文档或浏览器中发生的特定交互瞬间!

通过使用JavaScript,你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响应。

二、事件流

事件流就是描述了页面中接受事件的顺序,在浏览器发展的初期,两大浏览器厂商IE和Netscape互掐,出现了一个坑爹的情况,那就是他们对事件流的解释出现了两中截然相反的定义。也就是我们所熟悉的:IE的事件冒泡,Netscape的事件捕获。先来一张图,简要的看下结构:

JavaScript事件处理的方式(三种)

1、事件冒泡

事件冒泡即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的节点(文档)。拿上面的图来说明,就是当点击text部分时,先由text处的元素接收,然后逐级传播至window,即执行6-7-8-9-10的过程。

2、事件捕获

事件捕获即事件最早由不太具体的节点接收,而最具体的节点最后接收到事件。同理,在上面的模型中,就是点击text部分时,先由window接收,然后逐级传播至text元素,即执行1-2-3-4-5的过程。

具体在代码中怎样表现呢?后面给出!

三、Javascript事件处理程序的3种方式

产生了事件,我们就要去处理他,Javascript事件处理程序主要有3种方式:

1、HTML事件处理程序

即我们直接在HTML代码中添加事件处理程序,如下面这段代码:

<input id="btn" value="按钮" type="button" onclick="showmsg();">
<script>

 function showmsg(){

 alert("HTML添加事件处理");

 }

</script>

从上面的代码中我们可以看出,事件处理是直接嵌套在元素里头的,这样有一个毛病:就是html代码和js的耦合性太强,如果哪一天想要改变js中showmsg,那么不但要再js中修改,还需要到html中修改,一两处的修改我们能接受,但是当你的代码达到万行级别的时候,修改起来就需要劳民伤财了,所以,这个方式我们并不推荐使用。

2、DOM0级事件处理程序

即为指定对象添加事件处理,看下面的一段代码:

<input id="btn" value="按钮" type="button">
<script>


var btn= document.getElementById("btn");

 btn.onclick=function(){



alert("DOM级添加事件处理");


} 


btn.onclick=null;//如果想要删除btn的点击事件,将其置为null即可

</script>

从上面的代码中,我们能看出,相对于HTML事件处理程序,DOM0级事件,html代码和js代码的耦合性已经大大降低。但是,聪明的程序员还是不太满足,期望寻找更简便的处理方式,下面来看第三种处理方法。

3、DOM2级事件处理程序

DOM2也是对特定的对象添加事件处理程序,但是主要涉及到两个方法,用于处理指定和删除事件处理程序的操作:addEventListener()和 removeEventListener()。它们都接收三个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值(是否在捕获阶段处理事件),看下面的一段代码:

<input id="btn" value="按钮" type="button">
<script>

 var btn=document.getElementById("btn");

 btn.addEventListener("click",showmsg,false);//这里我们把最后一个值置为false,即不在捕获阶段处理,一般来说冒泡处
理在各浏览器中兼容性较好

 function showmsg(){

 alert("DOM级添加事件处理程序");

 }

 btn.removeEventListener("click",showmsg,false);//如果想要把这个事件删除,只需要传入同样的参数即可

</script>

这里我们可以看到,在添加删除事件处理的时候,最后一种方法更直接,也最简便。但是马海祥提醒大家需要注意的是,在删除事件处理的时候,传入的参数一定要跟之前的参数一致,否则删除会失效!

四、事件冒泡和事件捕获的流程与区别

说到这里,再给大家来一点代码来说明下事件冒泡和事件捕获的流程,同时也让大家能看出二者的区别:

<!doctype html>
<html lang="en">

<head>

 <meta charset="UTF-">

 <title>Document</title>

 <style>

 #p{width:px;height:px;border:px solid black;}

 #c{width:px;height:px;border:px solid red;}

 </style>

</head>

<body>

 <div id="p">

 i am www.mahaixiang.cn

 <div id="c">i like www.mahaixiang.cn</div>

 </div>

 <script>

 var p = document.getElementById('p');

 
var c = document.getElementById('c');

 c.addEventListener('click', function () {

 alert('子节点捕获')

 }, true);

 c.addEventListener('click', function () {

 alert('子节点冒泡')

 }, false);

 p.addEventListener('click', function () {

 alert('父节点捕获')

 }, true);

 p.addEventListener('click', function () {

 alert('父节点冒泡')

 }, false);

 </script>

</body>
</html>

运行上面的代码,点击子元素的时候,我们会发现,执行的先后顺序是:父节点捕获--子节点捕获--子节点冒泡--父节点冒泡。从这个例子中,大家也就明白了,另外,DOM2级事件规定事件包括三个阶段:

1、事件捕获阶段;

2、处于目标阶段;

3、事件冒泡阶段。

首先是捕获,然后处于目标阶段(即来到事件的发出位置),最后才是冒泡,不科学的是,居然木有DOM1级事件处理程序,大家注意下,别闹出笑话了!

五、补充

1. IE事件处理程序也对应有两个方法:attachEvent()添加事件,detachEvent()删除事件,这两个方法接收相同的两个参数:事件处理程序名称与事处理函数。这里为什么没有布尔值呢?因为ie8以及更早的版本只支持事件冒泡,所以最后一个参数默认的相当于false来处理!(支持IE事件处理程序的浏览器有IE,opera)。

2. 事件对象是用来记录一些事件发生时的相关信息的对象,但事件对象只有事件发生时才会产生,并且只能是事件处理函数内部访问,在所有事件处理函数运行结束后,事件对象就被销毁!

以上所述是小编给大家介绍的JavaScript事件处理的方式(三种),希望对大家有所帮助!

Javascript 相关文章推荐
浅谈JavaScript中Date(日期对象),Math对象
Feb 05 Javascript
javascript中的3种继承实现方法
Jan 27 Javascript
JS事件添加和移出的兼容写法示例
Jun 20 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
Aug 01 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
Jan 09 Javascript
将鼠标焦点定位到文本框最后(代码分享)
Jan 11 Javascript
JavaScript正则替换HTML标签功能示例
Mar 02 Javascript
node.js 利用流实现读写同步,边读边写的方法
Sep 11 Javascript
深入浅析vue组件间事件传递
Dec 29 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
Apr 19 Javascript
vue里的data要用return返回的原因浅析
May 28 Javascript
原生js实现密码强度验证功能
Mar 18 Javascript
学习AngularJs:Directive指令用法(完整版)
Apr 26 #Javascript
jQuery siblings()用法实例详解
Apr 26 #Javascript
JQuery插件Marquee.js实现无缝滚动效果
Apr 26 #Javascript
Angular.js回顾ng-app和ng-model使用技巧
Apr 26 #Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
Apr 26 #Javascript
Bootstrap网格系统详解
Apr 26 #Javascript
Bootstrap每天必学之标签页(Tab)插件
Aug 09 #Javascript
You might like
十天学会php之第四天
2006/10/09 PHP
菜鸟学PHP之Smarty入门
2007/01/04 PHP
php中一个完整表单处理实现代码
2011/11/10 PHP
php动态实现表格跨行跨列实现代码
2012/11/06 PHP
解密ThinkPHP3.1.2版本之模板继承
2014/06/19 PHP
php的闭包(Closure)匿名函数初探
2016/02/14 PHP
从零开始学习jQuery (六) jquery中的AJAX使用
2011/02/23 Javascript
javascript中的循环语句for语句深入理解
2014/04/04 Javascript
js制作简易年历完整实例
2015/01/28 Javascript
浅谈angularJS 作用域
2015/07/05 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
2015/12/09 Javascript
JavaScript匿名函数之模仿块级作用域
2015/12/12 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
2016/05/18 Javascript
js实现获取两个日期之间所有日期的方法
2016/06/17 Javascript
Vue.js 父子组件通讯开发实例
2016/09/06 Javascript
jQuery实现圣诞节礼物动画案例解析
2016/12/25 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
2017/03/09 Javascript
Vue+Element使用富文本编辑器的示例代码
2017/08/14 Javascript
vue监听scroll的坑的解决方法
2017/09/07 Javascript
Node.js net模块功能及事件监听用法分析
2019/01/05 Javascript
微信小程序获取地理位置及经纬度授权代码实例
2019/09/18 Javascript
[02:33]2014DOTA2 TI每日综述 LGD涉险晋级DK闯入胜者组
2014/07/14 DOTA
[53:20]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 VG vs OG
2018/04/03 DOTA
Python 从attribute到property详解
2020/03/05 Python
canvas与html5实现视频截图功能示例
2016/12/15 HTML / CSS
Blue Nile中国官网:全球知名的钻石和珠宝网络零售商
2020/03/22 全球购物
Java Servlet API中forward() 与redirect()的区别
2014/04/20 面试题
社区活动邀请函范文
2014/01/29 职场文书
工程质量承诺书
2014/03/27 职场文书
大学生社团活动总结
2014/04/26 职场文书
三方协议书
2015/01/27 职场文书
检讨书模板
2015/01/29 职场文书
2015年音乐教师个人工作总结
2015/05/20 职场文书
小学远程教育工作总结
2015/08/13 职场文书
初中运动会闭幕词范本3篇
2019/12/09 职场文书
JavaWeb实现显示mysql数据库数据
2022/03/19 Java/Android