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('');
})
</script>

结果如下:

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

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

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

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

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

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

而这里要说的是利用事件冒泡的特性,来控制事件执行顺序。

<div id="parent">
 <div id="child" class="child"></div>
</div>

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

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

今天就到这里啦,谢谢大家,如果有错误,请大家多多指出来~

关于js事件执行顺序小技巧的更多相关文章

  1. 关于js事件执行顺序

    关于js事件执行顺序小技巧 js事件执行顺序是js中一个老生常谈的一个话题, 聊这个话题之前我们先谈谈怎么给页面元素绑定我们需要的事件 1.给页面元素绑定事件 a)直接在元素上面加上需要绑定的事件,如 ...

  2. js事件执行顺序

    http://ejohn.org/blog/how-javascript-timers-work/

  3. 【js】中的小技巧

    本文主要介绍一些JS中用到的小技巧 1. 类型强制转换   1.1 string强制转换为数字 可以用*1来转化为数字(实际上是调用.valueOf方法) 然后使用Number.isNaN来判断是否为 ...

  4. JS、JQ相关小技巧积攒

    JS.JQ相关小技巧积攒,以备不时之需. 1.js 获取时间差:时间戳相减.new Date().getTime()  获得毫秒数,除以(1000*60*60*24) 获得天数. 2.重定向操作:页面 ...

  5. js代码执行顺序问题

      前  言 LiuDaP 今天就给大家介绍一个特别基础的东西,javascript中函数的一点儿小知识(js代码的执行顺序),希望对大家有那么一点点帮助吧!!! 一.js--->单线程 严格意 ...

  6. jquery ajax 中各个事件执行顺序

    jquery ajax 中各个事件执行顺序如下: 1.ajaxStart(全局事件) 2.beforeSend 3.ajaxSend(全局事件) 4.success 5.ajaxSuccess(全局事 ...

  7. Wex5页面事件执行顺序

    wex5 事件执行顺序data组件的onCustomRefresh→ model组件的onLoad→ windowReceiver组件的onReceive

  8. ASP.NET Page对象各事件执行顺序(转)

    很久没写 asp.net 的东西了,search 了一下 page 的事件执行顺序,找到如下的东西,仅仅做记录用 Page.PreInit 在页初始化开始时发生 Page.Init 当服务器控件初始化 ...

  9. jquery中各个事件执行顺序如下:

    jquery中各个事件执行顺序如下: 1.ajaxStart(全局事件) 2.beforeSend 3.ajaxSend(全局事件) 4.success 5.ajaxSuccess(全局事件) 6.e ...

随机推荐

  1. CSS响应式网站开发

    <html> <head> //当设备屏幕最大宽度小于1024px时加载如下CSS内容 @media screen and (max-width: 1024px){       ...

  2. js排序方法

    function swap(ary, x, y) { if (x === y) return let temp = ary[x] ary[x] = ary[y] ary[y] = temp } //生 ...

  3. Oracle测试环境参数调整.

    测试环境上面Oracle数据库性能参数设置 1. 关闭回收站 alter system set recyclebin=off 2. 修改redo日志的大小 11g的默认大小是50m 如果redo fi ...

  4. IDEA 操作及快捷键总结

    一.设置IDEA使用Eclipse快捷键 File->Settings->Keymap->选择Eclipse,就可以使用Eclipse的快捷键了,但是不能修改.如果想要修改,需要点击 ...

  5. input 的 oninput onkeypress onkeydown onchange 事件的区别

    事件执行顺序: <input type="text" id="foo" onkeydown="console.log('down')" ...

  6. 17mysql2█▓

    一.数据库的查询用法 1. 数据表记录的查询: 运算符.虑重.列运算.别名.排序.聚合函数.分组 1.1数据准备 create table exam(   id int primary key aut ...

  7. DeBruijin HDU - 2894(????????)

    题意: 莫名其妙 看不懂..只能靠别人的题意混日子 a完就懂了  就是 POJ1392  不求第k个了  直接输出这个路径 emm ...就改了一下那个代码 #include <iostream ...

  8. QT 5 安装 vs2017 后,出现找不到 rc.exe 问题

    QT 5 安装 vs2017 后,出现找不到 rc.exe 问题 qt 5 cannot run 'rc.exe' 出现这种错误,是因为,rc.exe  未找到,也就是 SKD 路径不对. 找到相应的 ...

  9. python3.5opencv3图像文字标注

    import cv2 cv2.namedWindow("mark", cv2.WINDOW_AUTOSIZE) image = cv2.imread("../images ...

  10. 洛谷P3959 宝藏(NOIP2017)(状压DP,子集DP)

    洛谷题目传送门 Dalao的题解多数是什么模拟退火.DFS剪枝.\(O(3^nn^2)\)的状压DP之类.蒟蒻尝试着把状压改进了一下使复杂度降到\(O(3^nn)\). 考虑到每条边的贡献跟它所在的层 ...