理解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 相关文章推荐
添加到收藏夹代码(兼容几乎所有的浏览器)
Jan 09 Javascript
滚动图片效果 jquery实现回旋滚动效果
Jan 08 Javascript
js 实现日期灵活格式化的小例子
Jul 14 Javascript
完美解决AJAX跨域问题
Nov 01 Javascript
jQuery中获取checkbox选中项等操作及注意事项
Nov 24 Javascript
Node.js中child_process实现多进程
Feb 03 Javascript
JavaScript显示表单内元素数量的方法
Apr 02 Javascript
超实用的JavaScript表单代码段
Feb 26 Javascript
JQuery为元素添加样式的实现方法
Jul 20 Javascript
js 获取元素所有兄弟节点的实现方法
Sep 06 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
Apr 05 Javascript
详解微信小程序Page中data数据操作和函数调用
Sep 27 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和MySql来与ODBC数据连接
2006/10/09 PHP
php curl模拟post提交数据示例
2013/12/31 PHP
php中convert_uuencode()与convert_uuencode函数用法实例
2014/11/22 PHP
如何使用GDB调试PHP程序
2015/12/08 PHP
利用Laravel生成Gravatar头像地址的优雅方法
2017/12/30 PHP
php 字符串中是否包含指定字符串的多种方法
2018/04/12 PHP
yii2.0框架使用 beforeAction 防非法登陆的方法分析
2019/09/11 PHP
小型js框架veryide.librar源代码
2009/03/05 Javascript
JavaScript CSS修改学习第三章 修改样式表
2010/02/19 Javascript
JavaScript为对象原型prototype添加属性的两种方式
2010/08/01 Javascript
artdialog的图片/标题以及关闭按钮不显示的解决方法
2013/06/27 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
2013/11/29 Javascript
node.js适合游戏后台开发吗?
2014/09/03 Javascript
整理关于Bootstrap警示框的慕课笔记
2017/03/29 Javascript
nodejs入门教程三:调用内部和外部方法示例
2017/04/24 NodeJs
使用Fullpage插件快速开发整屏翻页的页面
2017/09/13 Javascript
详解基于vue-cli优化的webpack配置
2017/11/06 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
2020/07/20 Javascript
JavaScript实现网页计算器功能
2020/10/29 Javascript
python实现带声音的摩斯码翻译实现方法
2015/05/20 Python
Django基础知识 web框架的本质详解
2019/07/18 Python
windows 10 设定计划任务自动执行 python 脚本的方法
2019/09/11 Python
终于搞懂了Keras中multiloss的对应关系介绍
2020/06/22 Python
Python pip安装第三方库实现过程解析
2020/07/09 Python
python如何操作mysql
2020/08/17 Python
Html5页面二次分享的实现
2018/07/30 HTML / CSS
小程序瀑布流解决左右两边高度差距过大的问题
2019/02/20 HTML / CSS
全球最大的跑步用品商店:Road Runner Sports
2016/09/11 全球购物
意大利时尚精品店:Nugnes 1920
2020/02/10 全球购物
银行会计主管岗位职责
2014/10/01 职场文书
债务追讨授权委托书范本
2014/10/16 职场文书
公务员个人年终总结
2015/02/12 职场文书
2015年学生会纪检部工作总结
2015/03/31 职场文书
农民工工资承诺书大全
2015/05/04 职场文书
行政复议决定书
2015/06/24 职场文书
深入理解以DEBUG方式线程的底层运行原理
2021/06/21 Java/Android