理解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 中的内存泄露模式
Aug 13 Javascript
十分钟打造AutoComplete自动完成效果代码
Dec 26 Javascript
在UpdatePanel内jquery easyui效果失效的解决方法
Apr 11 Javascript
JQuery中操作Css样式的方法
Feb 12 Javascript
jQuery大于号(&gt;)选择器的作用解释
Jan 13 Javascript
jQuery多个input求和的实现方法
Feb 12 Javascript
javascript中for/in循环及使用技巧
Sep 01 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
Dec 03 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
Sep 22 Javascript
JS简单实现数组去重的方法分析
Oct 14 Javascript
详解TypeScript+Vue 插件 vue-class-component的使用总结
Feb 18 Javascript
layui表格 列自动适应大小失效的解决方法
Sep 06 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 开发的 8 个技巧
2007/01/02 PHP
PHP session有效期session.gc_maxlifetime
2011/04/20 PHP
关于PHP实现异步操作的研究
2013/02/03 PHP
基于php冒泡排序算法的深入理解
2013/06/09 PHP
解析二进制流接口应用实例 pack、unpack、ord 函数使用方法
2013/06/18 PHP
PHP中读取文件的8种方法和代码实例
2014/08/05 PHP
php调整服务器时间的方法
2015/04/03 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
一次因composer错误使用引发的问题与解决
2019/03/06 PHP
在JavaScript中通过URL传递汉字的方法
2007/04/09 Javascript
Jquery UI震动效果实现原理及步骤
2013/02/04 Javascript
javascript的数组和常用函数详解
2014/05/09 Javascript
JavaScript获取路径设计源码
2014/05/22 Javascript
深入理解ECMAScript的几个关键语句
2016/06/01 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
2017/02/09 Javascript
基于 Vue 的树形选择组件的示例代码
2017/08/18 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
2019/11/11 jQuery
node事件循环和process模块实例分析
2020/02/14 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
2020/03/31 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
2020/07/17 Javascript
Python实现代码统计工具(终极篇)
2016/07/04 Python
教你用Python脚本快速为iOS10生成图标和截屏
2016/09/22 Python
python自动截取需要区域,进行图像识别的方法
2018/05/17 Python
python  创建一个保留重复值的列表的补码
2018/10/15 Python
PacSun官网:加州生活方式服装、鞋子和配饰
2018/03/10 全球购物
Parfumdreams芬兰:购买香水和化妆品
2021/02/13 全球购物
铭立家具面试题
2012/12/06 面试题
高三学生评语大全
2014/04/25 职场文书
竞选生活委员演讲稿
2014/04/28 职场文书
花坛标语大全
2014/06/30 职场文书
民政局副局长民主生活会个人整改措施
2014/10/04 职场文书
2014购房个人委托书范本
2014/10/12 职场文书
读《工匠精神》有感:热爱工作,精益求精
2019/12/28 职场文书
Python 如何安装Selenium
2021/05/06 Python
关于python爬虫应用urllib库作用分析
2021/09/04 Python
GTX1650super好不好 gtx1650super显卡属于什么级别
2022/04/08 数码科技