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 相关文章推荐
js 居中漂浮广告
Mar 21 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
Apr 01 Javascript
js实现每日自动换一张图片的方法
May 04 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
Sep 04 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
Nov 18 Javascript
利用jquery实现下拉框的禁用与启用
Dec 07 Javascript
Bootstrap中datetimepicker使用小结
Dec 28 Javascript
vue页面离开后执行函数的实例
Mar 13 Javascript
React Native日期时间选择组件的示例代码
Apr 27 Javascript
详解vue在项目中使用百度地图
Mar 26 Javascript
js实现整体缩放页面适配移动端
Mar 31 Javascript
JavaScript React如何修改默认端口号方法详解
Jul 28 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+MySQL搭建聊天室功能实例代码
2012/08/20 PHP
PHP中替换换行符的几种方法小结
2012/10/15 PHP
php简单统计字符串单词数量的方法
2015/06/19 PHP
php将html转成wml的WAP标记语言实例
2015/07/08 PHP
PHP实现的DES加密解密封装类完整实例
2017/04/29 PHP
浅谈laravel框架与thinkPHP框架的区别
2019/10/23 PHP
ASP 过滤数组重复数据函数(加强版)
2010/05/31 Javascript
JS实现清除指定cookies的方法
2014/09/20 Javascript
jquery实现简单合拢与展开网页面板的方法
2015/09/01 Javascript
Angularjs实现mvvm式的选项卡示例代码
2016/09/08 Javascript
JavaScript获取服务器时间的方法详解
2016/12/11 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
2016/12/28 Javascript
JS实现简单的二元方程计算器功能示例
2017/01/03 Javascript
JS实现数组去重复值的方法示例
2017/02/18 Javascript
react-native fetch的具体使用方法
2017/11/01 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
2019/05/28 Javascript
基于Vue实现平滑过渡的拖拽排序功能
2019/06/12 Javascript
[02:00]DOTA2英雄COSPLAY闹市街头巡游助威2015国际邀请赛
2015/08/02 DOTA
python实现用户管理系统
2018/01/10 Python
关于python2 csv写入空白行的问题
2018/06/22 Python
Django-xadmin+rule对象级权限的实现方式
2020/03/30 Python
python爬虫中PhantomJS加载页面的实例方法
2020/11/12 Python
Python入门基础之数字字符串与列表
2021/02/01 Python
使用Html5实现异步上传文件,支持跨域,带有上传进度条
2016/09/17 HTML / CSS
德国内衣、泳装和睡衣网上商店:Bigsize Dessous
2018/07/09 全球购物
Blancsom美国/加拿大:服装和生活用品供应商
2018/07/27 全球购物
英文版网络工程师求职信
2013/10/28 职场文书
社会保险接收函
2014/01/12 职场文书
物理专业本科生自荐信
2014/01/30 职场文书
教职工代表大会主持词
2014/04/01 职场文书
党的群众路线教育实践活动整改落实情况报告
2014/10/28 职场文书
2014年城管工作总结
2014/11/20 职场文书
Python答题卡识别并给出分数的实现代码
2021/06/22 Python
Python类方法总结讲解
2021/07/26 Python
Mysql排序的特性详情
2021/11/01 MySQL
为Centos安装指定版本的Docker
2022/04/01 Servers