一 如果事件监听类似于如下写法,则最终只会执行最后一个事件监听,其他监听都会被覆盖掉。

window.onload=funtion(){console.log(1);};

window.onload=funtion(){console.log(2);};

window.onload=funtion(){console.log(3);};

//最终只会输出:"3"

二 如果事件监听类似于如下写法,则每个事件监听都会被执行,其他监听都不会被覆盖掉。

--是否冒泡或捕获都不会影响输出结果的次数(3次)

window.addEventListener("load",function(evt){console.log(1);},false);

window.addEventListener("load",function(evt){console.log(2);},false);

window.addEventListener("load",function(evt){console.log(3);},false);

//最终输出:"1 2 3"

小结:

1 window只是一个对象,可替换成其他标签对象,如divObj...。但最终输出是一样的。

2 如果用了window.onload模式,则必须保证页面中必须只有一个这样的事件监听。

3 jquery里面的$(document).ready(function(e){})...估计里面是实现了第二种的监听模式(addEventListener)

JS之事件监听的更多相关文章

  1. JS通用事件监听函数

    JS通用事件监听函数 版本一 //把它全部封装到一个对象中 var obj={ readyEvent:function (fn){ if(fn==null){ fn=document; } var o ...

  2. js添加事件监听的方式与this

    js添加事件监听与this js添加事件监听的方式与this 在标签中调用自定义函数 DOM0级事件处理程序 DOM2级事件处理程序 this 代表谁? js添加事件监听的方式与this <di ...

  3. JS的事件监听机制

    很久以前有个叫Netscape的姑娘,她制订了Javascript的一套事件驱动机制(即事件捕获) 后来又有一个叫“IE”的小子,这孩子比较傲气,他认为“凭什么我要依照你的规则走”,于是他又创造了一套 ...

  4. js实现事件监听与阻止监听传播

    监听事件: 使用attachEvent(用于IE)和addEventListener(用于谷歌.火狐)时则可以实现多个事件处理函数的调用 1.下面都是dom对象的方法,可以实现一种事件绑定多个事件处理 ...

  5. Node.js之事件监听和发送

    演示事件的发送和监听 const events = require("events"); function Account() { this.balance = 0; events ...

  6. JS键盘事件监听

    window.onload=function(){ var keyword = document.getElementById("keyword"); keyword.onkeyu ...

  7. js事件监听-addEventListener (w3c标准) 和 attachEvent(ie)

    研究了一个小时,没看懂这两个属性 window.onload = function(){ var oDiv = document.getElementById("J_myDiv") ...

  8. React.js 小书 Lesson9 - 事件监听

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson9 转载请注明出处,保留原文链接和作者信息. 在 React.js 里面监听事件是很容易的事情 ...

  9. javascript的事件监听与捕获和冒泡

    在前端开发中,我们经常需要对某些事件进行监听.这样只要在指定的元素上触发了该事件,就会执行一个回调来进行相关的操作. 而js中事件监听方法总共有三种,分别如下所示: element.addEventL ...

随机推荐

  1. 【BZOJ3747】[POI2015]Kinoman 线段树

    [BZOJ3747][POI2015]Kinoman Description 共有m部电影,编号为1~m,第i部电影的好看值为w[i]. 在n天之中(从1~n编号)每天会放映一部电影,第i天放映的是第 ...

  2. vscode 全局安装和配置 stylelint 像 webstorm 等 ide 一样来检查项目

    商店里安装完插件以后全局安装或者在项目中(记得加--save-dev)安装配置: npm install stylelint-config-recommended -g 然后在vscode setti ...

  3. [笔记]我的Linux入门之路 - 02.***-Qt5配置

    作为一个学习中的程序员,查wiki等,***肯定是刚需.况且没有它很多东西都下不下来.我在windows环境下使用的是shadowsocks,那么在linux下也使用它. 一.SS版本 SS版本众多, ...

  4. CentOS7.1安装 Vsftpd FTP 服务器

    # yum install vsftpd 安装 Vsftpd FTP 编辑配置文件 ‘/etc/vsftpd/vsftpd.conf’ 用于保护 vsftpd. # vi /etc/vsftpd/vs ...

  5. 学习Sharding JDBC 从入门到出门-02:源码揣测

    sjdbc有读写分离的功能,要使用这个功能,在创建数据源对象是要使用类:MasterSlaveDataSource,并且设置主备数据源和数据库名称 这个对象有下面的属性: name:数据库的名称 ma ...

  6. 关于Future

    1 为什么需要Callable和Future Runnable没有返回值,也不抛异常,这样主线程不能知道子线程的执行结果. 为了解决这个问题就有了Callable和Future.Callable提供的 ...

  7. iPhone快速获取UUID

    1.一张图解决不懂iPhone手机的小白获取UDID的方式

  8. Qt状态机框架(状态机就开始异步的运行了,也就是说,它成为了我们应用程序事件循环的一部分了)

    状态机框架 Qt中的状态机框架为我们提供了很多的API和类,使我们能更容易的在自己的应用程序中集成状态动画.这个框架是和Qt的元对象系统机密结合在一起的.比如,各个状态之间的转换是通过信号触发的,状态 ...

  9. eclipse revert resources 很慢的解决办法

    eclipse启动无响应,停留在Loading workbench状态,或老是加载不了revert resources 做开发的同学们或多或少的都会遇到eclipse启动到一定程度时,就进入灰色无响应 ...

  10. Shell传参的多种方式

    Shell 传参的多种方式 使用$1 $2 这种类似占位符的方式 # 命令行调用 start.sh 8080 9090 # 脚本中获取 port1=$1 # 8080 port2=$2 # 9090 ...