理解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 性能优化指南(2)
May 21 Javascript
JavaScript解析URL参数示例代码
Aug 12 Javascript
JS仿Windows开机启动Loading进度条的方法
Feb 26 Javascript
Angularjs注入拦截器实现Loading效果
Dec 28 Javascript
Bootstrap carousel轮转图的使用实例详解
May 17 Javascript
ES6中Math对象的部分扩展
Feb 20 Javascript
微信小程序动态的加载数据实例代码
Apr 14 Javascript
基于 Bootstrap Datetimepicker 联动
Aug 03 Javascript
react 父子组件之间通讯props
Sep 08 Javascript
详解vue 数组和对象渲染问题
Sep 21 Javascript
详解vue.js移动端配置flexible.js及注意事项
Apr 10 Javascript
node.js 如何监视文件变化
Sep 01 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
dedecms 批量提取第一张图片最为缩略图的代码(文章+软件)
2009/10/29 PHP
destoon二次开发模板及调用语法汇总
2014/06/21 PHP
Codeigniter检测表单post数据的方法
2015/03/21 PHP
CodeIgniter视图使用注意事项
2016/01/20 PHP
关于B/S判断浏览器断开的问题讨论
2008/10/29 Javascript
Javascript的匿名函数小结
2009/12/31 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
2014/01/10 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
2014/11/17 Javascript
js中split和replace的用法实例
2015/02/28 Javascript
JavaScript创建一个object对象并操作对象属性的用法
2015/03/23 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
2015/03/24 Javascript
JS获取IMG图片高宽的简单实例
2016/05/17 Javascript
一个可复用的vue分页组件
2017/05/15 Javascript
利用vue和element-ui设置表格内容分页的实例
2018/03/02 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
2018/08/08 jQuery
一文看懂如何简单实现节流函数和防抖函数
2019/09/05 Javascript
Vue请求java服务端并返回数据代码实例
2019/11/28 Javascript
d3.js实现图形缩放平移
2019/12/19 Javascript
JavaScript onclick事件使用方法详解
2020/05/15 Javascript
Python创建日历实例
2014/08/21 Python
在Django中进行用户注册和邮箱验证的方法
2016/05/09 Python
Python中struct模块对字节流/二进制流的操作教程
2017/01/21 Python
python实现银联支付和支付宝支付接入
2019/05/07 Python
python 图片二值化处理(处理后为纯黑白的图片)
2019/11/01 Python
OpenCV Python实现拼图小游戏
2020/03/23 Python
keras得到每层的系数方式
2020/06/15 Python
Python爬虫逆向分析某云音乐加密参数的实例分析
2020/12/04 Python
Java如何获得ResultSet的总行数
2016/09/03 面试题
就业意向书范文
2014/04/01 职场文书
我有一个梦想演讲稿
2014/05/05 职场文书
学校党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
走群众路线剖析材料
2014/10/09 职场文书
财务总监岗位职责
2015/02/03 职场文书
统计员岗位职责范本
2015/04/14 职场文书
2016年大学生就业指导课心得体会
2015/10/09 职场文书
MySQL外键约束(FOREIGN KEY)案例讲解
2021/08/23 MySQL