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 相关文章推荐
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
Jun 26 Javascript
ext 同步和异步示例代码
Sep 18 Javascript
JavaScript中清空数组的三种方法分享
Apr 07 Javascript
node.js中的fs.writeSync方法使用说明
Dec 15 Javascript
JS实现闭包中的沙箱模式示例
Sep 07 Javascript
jQuery中each方法的使用详解
Mar 18 jQuery
Angular 利用路由跳转到指定页面的指定位置方法
Aug 31 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
Oct 16 Javascript
js中!和!!的区别与用法
May 09 Javascript
JQuery获得内容和属性方法解析
May 30 jQuery
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
Jul 27 Javascript
Vue 监听元素前后变化值实例
Jul 29 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
中东人咖啡哲学
2021/03/03 咖啡文化
在VS2008中编译MYSQL5.1.48的方法
2010/07/03 PHP
PHP CURL CURLOPT参数说明(curl_setopt)
2013/09/30 PHP
百度ping方法使用示例 自动ping百度
2014/01/26 PHP
PHP永久登录、记住我功能实现方法和安全做法
2015/04/27 PHP
深入理解PHP之OpCode原理详解
2016/06/01 PHP
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
2013/06/28 Javascript
JS 实现导航栏悬停效果(续2)
2013/09/24 Javascript
JavaScript支持的最大递归调用次数分析
2014/06/24 Javascript
AngularJs入门教程之环境搭建+创建应用示例
2016/11/01 Javascript
解析微信JS-SDK配置授权,实现分享接口
2016/12/09 Javascript
微信小程序 用户数据解密详细介绍
2017/01/09 Javascript
Bootstrap Table列宽拖动的方法
2018/08/15 Javascript
NodeJS 实现多语言的示例代码
2018/09/11 NodeJs
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
2019/05/14 Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
2020/03/10 Javascript
Javascript异步编程async实现过程详解
2020/04/02 Javascript
react 不用插件实现数字滚动的效果示例
2020/04/14 Javascript
在antd中setFieldsValue和defaultVal的用法
2020/10/29 Javascript
解决Element中el-date-picker组件不回填的情况
2020/11/07 Javascript
python通过pil为png图片填充上背景颜色的方法
2015/03/17 Python
简单了解Python下用于监视文件系统的pyinotify包
2015/11/13 Python
Python实现数据库并行读取和写入实例
2017/06/09 Python
Tesserocr库的正确安装方式
2018/10/19 Python
解决Python正则表达式匹配反斜杠''\''问题
2019/07/17 Python
Python configparser模块常用方法解析
2020/05/22 Python
pandas to_excel 添加颜色操作
2020/07/14 Python
BeautifulSoup中find和find_all的使用详解
2020/12/07 Python
Jupyter Notebook 安装配置与使用详解
2021/01/06 Python
需要知道的CSS3动画技术
2010/01/01 HTML / CSS
浅析与CSS3的loading动画加载相关的transition优化
2015/05/18 HTML / CSS
美国帽子俱乐部商店:Hat Club
2019/07/05 全球购物
有关爱国演讲稿
2014/05/07 职场文书
2015年春训学习心得体会范文
2015/03/09 职场文书
联村联户简报
2015/07/21 职场文书
CSS link与@import的区别和用法解析
2023/05/07 HTML / CSS