关于js事件执行顺序小技巧

js事件执行顺序是js中一个老生常谈的一个话题,

聊这个话题之前我们先谈谈怎么给页面元素绑定我们需要的事件

1.给页面元素绑定事件

a)直接在元素上面加上需要绑定的事件,如

<button type="button" onclick="console.log('111')"></button>

结果如下:

此方法不建议使用,有两方面的原因,

1)此方法绑定的方法必须为一个全局的方法,而通常我们需要绑定的方法都是针对某一处特定的方法,并不具备通用性,如果全部写成全局方法,不利于我们模块化开发。

2)此绑定方法只能给元素绑定一个方法,而我们对于元素绑定的方法可能有多个。

b)dom元素生成后,给其绑定方法。

注:此处插入一句,保证dom元素已经生成了是我们给其绑定方法的前提。

  jquery1.7版本弃用了live,目前笔者查阅资料没有找到可以给未来元素绑定事件的方法,如果有那我读者知道相关的方法,欢迎给笔者留言。

<button type="button">点我</button>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$('button').on('click',function(){
console.log('111');
})
</script>

结果如下:

此方法的好处就是可以解决直接在元素上面添加方法的两个弊端,并且事件的执行顺序是按照我们给元素添加事件的顺序依次进行。

这里就讲到了我们现在要说的事件执行顺序,大多数时候,事件执行顺序的控制,就通过我们添加事件顺序来控制。

但是,有时候,我们项目中会应用一些别人的插件,而此时,我们想要控制事件在插件事件之后就不是很好控制了,比较插件事件可能并没有回调函数的设置。

这时,笔者就想到了事件的另外一个特性,事件冒泡。

事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件。相反的,事件冒泡是自下而上的去触发事件。绑定事件方法的第三个参数,就是控制事件触发顺序是否为事件捕获。true,事件捕获;false,事件冒泡。默认false,即事件冒泡。Jquery的e.stopPropagation会阻止冒泡,意思就是到我为止,我的爹和祖宗的事件就不要触发了。

关于事件冒泡和事件捕获这里就不再赘述,不懂的童鞋请移步https://www.cnblogs.com/christineqing/p/7607113.html

如上 所示,如果我们要在chilid上面绑定的所有方法都执行完了以后执行一个方法,如,console.log('111')

我们可以将此方法绑定到parent上,这样就可以保证,此方法一定是在child上面绑定的所有方法执行完成了以后执行。

http://www.cnblogs.com/nianhappyhouse/p/9482679.html

最新文章

  1. Node.js在Chrome进行调试
  2. IOS BLE蓝牙4.0
  3. Clone Graph
  4. HTML5 – 3.加强版ol
  5. 6、UITableView表的分割线左对齐
  6. Spring框架下的 “接口调用、MVC请求” 调用参数、返回值、耗时信息输出
  7. 关于ASP.NET MVC4 Web API简单总结
  8. spark streaming 实时计算
  9. hadoop2的伪分布部署
  10. BZOJ1679: [Usaco2005 Jan]Moo Volume 牛的呼声
  11. windbg 调试技巧
  12. C++(MFC)中WebBrowser去除3D边框的方法(实现IDocHostUIHandler接口)
  13. 为什么要学Python
  14. 使用offsetof对结构体指针偏移操作
  15. numpy鸢尾花
  16. 网络操作系统 第六章 Window Server 2008 活动目录
  17. Hive内部表与外部表的区别
  18. (原)DropBlock A regularization method for convolutional networks
  19. Jmeter修改自身启动IP
  20. js中random的应用

热门文章

  1. project 2013 显示标题
  2. yarn如何全局安装命令以及和环境变量的关系
  3. 【HDU5950】Recursive sequence(矩阵快速幂)
  4. Angular、React.js 和Node.js到底选谁?
  5. Leetcode 27.移除元素 By Python
  6. RabbitMQ图解
  7. luogu5020 [NOIp2018]货币系统 (完全背包)
  8. [JSOI2008]Blue Mary的职员分配
  9. 【lua】lua安装学习
  10. 杨辉三角 II