理解JS绑定事件


Posted in Javascript onJanuary 19, 2016

本文为大家详细分析了JS绑定事件,供大家参考,具体内容如下

绑定事件有兼容性问题,在IE早期版本中使用的是obj.attachEvent(),而其他浏览器使用的则是addEventListener()。
这两个方法都有三个参数,分别为:事件类型,事件函数,最后一个是布尔值,true或者是false。
true表示在事件捕获阶段执行,false表示在事件冒泡阶段执行。
由于IE只支持事件冒泡,所以同大多数情况下,都是将事件处理程序添加到事件流的冒泡阶段,即默认为”false”
这样可以最大限度地兼容各种浏览器。 最好只在需要在是事件到达目标之前截获它的时候将事件处理程序添加到捕获阶段。 如果不是特别需要,不建议在事件捕获阶段注册事件处理程序。
兼容各浏览器的事件绑定:

function addEvent(obj, eventType, callback, bubble){
 if(obj.addEventListener){
  obj.addEventListener(eventType, callback, bubble);
 }else{
  obj.attachEvent(eventType, callback, bubble);
 }
 }

调用时,注意callback函数不需要加括号,与setTimeout类似。

这部分都比较容易理解,对于最后一个参数,相信很多人并不是非常理解,总之我还是需要写程序测试一下才真正弄通。

HTML部分内容:

<!doctype html>
<html lang="en">
  <head>
  <!--网站编码格式,UTF-8 国际编码,GBK或 gb2312 中文编码-->
    <meta charset="UTF-8">
    <meta name="Keywords" content="关键词一,关键词二">
    <meta name="Description" content="网站描述内容">
    <meta name="Author" content="">
    <title>Document</title>
  <!--css js 文件的引入-->
  </head>
  <body>
    <div id="out"> 
    <p>我是路人甲</p>
    <div id="middle"> 
      <div id="inner">最里面的</div> 
    </div> 
    <p>我是路人乙</p>
    </div>
  </body>
</html>

js内容:(第一种情况)

<script>
  var out = document.getElementById('out'); 
  var middle = document.getElementById('middle'); 
  var inner = document.getElementById('inner'); 
  //点击inner时,触发顺序为:inner-------middle------out
  out.addEventListener('click',function(){alert("我是最外面的");},false);   
  middle.addEventListener('click',function(){alert("我是中间的");},false);    
  inner.addEventListener('click',function(){alert("我是最里面的");},false); 
</script>

js内容:(第二种情况)

<script>
  var out = document.getElementById('out'); 
  var middle = document.getElementById('middle'); 
  var inner = document.getElementById('inner'); 
  //点击inner时,触发顺序为:out------inner-------middle
  out.addEventListener('click',function(){alert("我是最外面的");},true);   
  middle.addEventListener('click',function(){alert("我是中间的");},true);  
  inner.addEventListener('click',function(){alert("我是最里面的");},true); 
</script>

js内容:(第三种情况)

<script>
  var out = document.getElementById('out'); 
  var middle = document.getElementById('middle'); 
  var inner = document.getElementById('inner'); 
  //点击inner时,触发顺序为:out------inner-------middle
  out.addEventListener('click',function(){alert("我是最外面的");},true);   
  middle.addEventListener('click',function(){alert("我是中间的");},false);    
  inner.addEventListener('click',function(){alert("我是最里面的");},false);
</script>

js内容:(第四种情况)

<script>
  var out = document.getElementById('out'); 
  var middle = document.getElementById('middle'); 
  var inner = document.getElementById('inner'); 
  //点击inner时,触发顺序为:out-------middle------inner
  out.addEventListener('click',function(){alert("我是最外面的");},true);   
  middle.addEventListener('click',function(){alert("我是中间的");},true);  
  inner.addEventListener('click',function(){alert("我是最里面的");},false);
</script>

js内容:(第五种情况)

<script>
  var out = document.getElementById('out'); 
  var middle = document.getElementById('middle'); 
  var inner = document.getElementById('inner'); 
  //点击inner时,触发顺序为:middle-------inner------out
  out.addEventListener('click',function(){alert("我是最外面的");},false);   
  middle.addEventListener('click',function(){alert("我是中间的");},true);  
  inner.addEventListener('click',function(){alert("我是最里面的");},false);
</script>

js内容:(第六种情况)

<script>
  var out = document.getElementById('out'); 
  var middle = document.getElementById('middle'); 
  var inner = document.getElementById('inner'); 
  //点击inner时,触发顺序为:out-------inner------middle
  out.addEventListener('click',function(){alert("我是最外面的");},true);   
  middle.addEventListener('click',function(){alert("我是中间的");},false);    
  inner.addEventListener('click',function(){alert("我是最里面的");},true);
</script>

看完以上六种情况对应的结果,相信您已经能够深刻理解,最后一个参数为true或false的区别了。

Javascript 相关文章推荐
Javascript客户端将指定区域导出到Word、Excel的代码
Oct 22 Javascript
JQuery悬停控制图片轮播——代码简单
Aug 05 Javascript
基于JavaScript实现简单的随机抽奖小程序
Jan 05 Javascript
Bootstrap导航条学习使用(二)
Feb 08 Javascript
Bootstrap中data-target 到底是什么
Feb 14 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
Mar 09 Javascript
jQuery:unbind方法的使用详解
Aug 14 jQuery
Node.js学习之地址解析模块URL的使用详解
Sep 28 Javascript
浅谈微信JS-SDK 微信分享接口开发(介绍版)
Aug 15 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
Sep 29 Javascript
JavaScript的变量声明与声明提前用法实例分析
Nov 26 Javascript
vue 避免变量赋值后双向绑定的操作
Nov 07 Javascript
AngularJS模块学习之Anchor Scroll
Jan 19 #Javascript
jQuery unbind()方法实例详解
Jan 19 #Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
Jan 19 #Javascript
详解JavaScript对象序列化
Jan 19 #Javascript
学习JavaScript设计模式之单例模式
Jan 19 #Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
Jan 19 #Javascript
学习JavaScript设计模式之装饰者模式
Jan 19 #Javascript
You might like
php中去除所有js,html,css代码
2010/10/12 PHP
ASP和PHP实现生成网站快捷方式并下载到桌面的方法
2014/05/08 PHP
PHP正则表达式替换站点关键字链接后空白的解决方法
2014/09/16 PHP
解决laravel-admin 自己新建页面里 js 需要刷新一次的问题
2019/10/03 PHP
在Laravel中使用GuzzleHttp调用第三方服务的API接口代码
2019/10/15 PHP
复制小说文本时出现的随机乱码的去除方法
2010/09/07 Javascript
jQuery插件-jRating评分插件源码分析及使用方法
2012/12/28 Javascript
jquery子元素过滤选择器使用示例
2013/06/24 Javascript
JS中三目运算符和if else的区别分析与示例
2014/11/21 Javascript
javascript框架设计读书笔记之模块加载系统
2014/12/02 Javascript
Javascript中的几种URL编码方法比较
2015/01/23 Javascript
JS 全屏和退出全屏详解及实例代码
2016/11/07 Javascript
React学习笔记之条件渲染(一)
2017/07/02 Javascript
springmvc接收jquery提交的数组数据代码分享
2017/10/28 jQuery
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
2020/05/19 jQuery
微信小程序自定义顶部组件customHeader的示例代码
2020/06/03 Javascript
vue 通过绑定事件获取当前行的id操作
2020/07/27 Javascript
Vue3配置axios跨域实现过程解析
2020/11/25 Vue.js
[01:04:05]VG vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python实现定时备份mysql数据库并把备份数据库邮件发送
2018/03/08 Python
查找python项目依赖并生成requirements.txt的方法
2018/07/10 Python
pyqt5 删除layout中的所有widget方法
2019/06/25 Python
Apache部署Django项目图文详解
2019/07/30 Python
Python 字符串、列表、元组的截取与切片操作示例
2019/09/17 Python
python爬虫爬取幽默笑话网站
2019/10/24 Python
python缩进长度是否统一
2020/08/02 Python
如何解决pycharm调试报错的问题
2020/08/06 Python
Python爬虫后获取重定向url的两种方法
2021/01/19 Python
CSS3中31种选择器使用方法教程
2013/12/05 HTML / CSS
一款纯css3实现的动画加载导航
2014/10/08 HTML / CSS
优秀少先队员事迹材料
2014/12/24 职场文书
工作保证书怎么写
2015/02/28 职场文书
离婚起诉书怎么写
2015/05/19 职场文书
幼儿园托班开学寄语(2015秋季)
2015/05/27 职场文书
工作表现证明
2015/06/15 职场文书
Golang 获取文件md5校验的方法以及效率对比
2021/05/08 Golang