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

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. 多语言中的“默认语言”设置

    最近在搞一个多语言的东西,打算如果用户是中文环境就显示中文,其他任何非中文环境就显示英文.换句话说,把默认语言设置成英文. 不过因为VS是中文的,发现即使默认资源文件是英文(AppResource.r ...

  2. 记录-配置tomcat不加项目名即可访问项目

    环境:tomcat 在eclipse中  打开Servers  下的server.xml文件,在最下方你会看到类似 <Context docBase="/vankeplatform&q ...

  3. openssl将私钥和crt证书合成pfx证书

    pfx是什么文件:公钥加密技术12号标准(Public Key Cryptography Standards #12,PKCS#12)为存储和传输用户或服务器私钥.公钥和证书指定了一个可移植的格式.它 ...

  4. 关于Ninja中上传下载文件

    上传得时候 根据类型来判断一下: 然后下载的时候需要:在url的最后一个/ 后面加上你要下载的类型如/download/app.apk; 下载成功就是app.apk了;

  5. java访问微信接口发送消息

    最近在开发activiti流程的时候有个需求:流程到达每个审批节点后,需要向该节点的审批人发送一个消息,提示有审批需要处理. 参考了一下微信的开发者文档和网络上的一些技术博客,现在记录一下.以便后续继 ...

  6. 如何禁止eclipse对js文件的校验(building validate)

    在项目(project)上点击右键,依次选择1.Select Properties -> JavaScript -> Include Path2.Select Source tab. ( ...

  7. setTimeout解决循环值的几种方法

    for(var i=0;i<5;i++){ setTimeout(function(){ console.log(`错误 ${i}`); },0) } for(var i=0;i<5;i+ ...

  8. python3 生成随即激活码

    import string import random #激活码中的字符和数字 field = string.ascii_letters + string.digits #获得四个字母和数字的随即组合 ...

  9. 关于tomcate跨域配置的配置问题和表头加入新属性的过滤

    1 .在项目中常常遇到本地访问服务器上的链接数据访问不到,并出现如下问题: 这是因为tomcate 的配置中过滤了请求方式, 解决方案: 1.在tomcate中引入两个jar包:java-proper ...

  10. vue双向绑定补充说明方法

    本文总结自: https://segmentfault.com/a/1190000006599500,将每一个流程提炼出来做一个简单的说明,以免自己被繁杂的逻辑弄昏头脑~ observer: 遍历数据 ...