理解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 相关文章推荐
jQuery 跨域访问问题解决方法
Dec 02 Javascript
jQuery中next方法用法实例
Apr 24 Javascript
整理Javascript流程控制语句学习笔记
Nov 29 Javascript
第三章之Bootstrap 表格与按钮功能
Apr 25 Javascript
JS使用onerror捕获异常示例
Aug 03 Javascript
react.js 翻页插件实例代码
Jan 19 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
Mar 27 Javascript
JavaScript解析任意形式的json树型结构展示
Jul 23 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
Jan 07 Javascript
iview实现select tree树形下拉框的示例代码
Dec 21 Javascript
在Vue项目中使用Typescript的实现
Dec 19 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
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
星际初学者游戏中永远要做的事
2020/03/04 星际争霸
使用php判断浏览器的类型和语言的函数代码
2013/02/28 PHP
PHP中防止SQL注入方法详解
2014/12/25 PHP
Yii实现单用户博客系统文章详情页插入评论表单的方法
2015/12/28 PHP
详解Yaf框架PHPUnit集成测试方法
2017/12/27 PHP
PDO::prepare讲解
2019/01/29 PHP
javascript中encodeURI和decodeURI方法使用介绍
2013/05/06 Javascript
Javascript中Event属性搜集整理
2013/09/17 Javascript
jQuery中:only-child选择器用法实例
2015/01/03 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
2015/08/24 Javascript
javascript实现自动填写表单实例简析
2015/12/02 Javascript
学做Bootstrap的第一个页面
2016/05/15 HTML / CSS
jQuery实现可展开折叠的导航效果示例
2016/09/12 Javascript
bootstrapValidator表单验证插件学习
2016/12/30 Javascript
react+redux仿微信聊天界面
2019/06/21 Javascript
Python实现矩阵转置的方法分析
2017/11/24 Python
Python的条件表达式和lambda表达式实例
2019/01/31 Python
利用python-pypcap抓取带VLAN标签的数据包方法
2019/07/23 Python
Python使用指定字符长度切分数据示例
2019/12/05 Python
django formset实现数据表的批量操作的示例代码
2019/12/06 Python
python打印异常信息的两种实现方式
2019/12/24 Python
你可能不知道的Python 技巧小结
2020/01/29 Python
Python实现自动签到脚本功能
2020/08/20 Python
关于老式浏览器兼容HTML5和CSS3的问题
2016/06/01 HTML / CSS
英国著名的小众美容品牌网站:Alyaka
2017/08/08 全球购物
大唐面试试题(CPU,UNIX等等)
2012/01/11 面试题
关爱留守儿童标语
2014/06/18 职场文书
党员目标管理责任书
2014/07/25 职场文书
合伙购房协议样本
2014/10/06 职场文书
法人身份证明书
2014/10/08 职场文书
党员学习群众路线心得体会
2014/11/04 职场文书
房产公证书
2015/01/23 职场文书
项目安全员岗位职责
2015/02/15 职场文书
十二生肖观后感
2015/06/12 职场文书
话题作文之呼唤
2019/12/18 职场文书
Win11跳过联网界面创建本地管理账户的3种方法
2022/04/20 数码科技