JS之事件监听
一 如果事件监听类似于如下写法,则最终只会执行最后一个事件监听,其他监听都会被覆盖掉。
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之事件监听的更多相关文章
- JS通用事件监听函数
JS通用事件监听函数 版本一 //把它全部封装到一个对象中 var obj={ readyEvent:function (fn){ if(fn==null){ fn=document; } var o ...
- js添加事件监听的方式与this
js添加事件监听与this js添加事件监听的方式与this 在标签中调用自定义函数 DOM0级事件处理程序 DOM2级事件处理程序 this 代表谁? js添加事件监听的方式与this <di ...
- JS的事件监听机制
很久以前有个叫Netscape的姑娘,她制订了Javascript的一套事件驱动机制(即事件捕获) 后来又有一个叫“IE”的小子,这孩子比较傲气,他认为“凭什么我要依照你的规则走”,于是他又创造了一套 ...
- js实现事件监听与阻止监听传播
监听事件: 使用attachEvent(用于IE)和addEventListener(用于谷歌.火狐)时则可以实现多个事件处理函数的调用 1.下面都是dom对象的方法,可以实现一种事件绑定多个事件处理 ...
- Node.js之事件监听和发送
演示事件的发送和监听 const events = require("events"); function Account() { this.balance = 0; events ...
- JS键盘事件监听
window.onload=function(){ var keyword = document.getElementById("keyword"); keyword.onkeyu ...
- js事件监听-addEventListener (w3c标准) 和 attachEvent(ie)
研究了一个小时,没看懂这两个属性 window.onload = function(){ var oDiv = document.getElementById("J_myDiv") ...
- React.js 小书 Lesson9 - 事件监听
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson9 转载请注明出处,保留原文链接和作者信息. 在 React.js 里面监听事件是很容易的事情 ...
- javascript的事件监听与捕获和冒泡
在前端开发中,我们经常需要对某些事件进行监听.这样只要在指定的元素上触发了该事件,就会执行一个回调来进行相关的操作. 而js中事件监听方法总共有三种,分别如下所示: element.addEventL ...
随机推荐
- 【BZOJ2790】[Poi2012]Distance 筛素数+调和级数
[BZOJ2790][Poi2012]Distance Description 对于两个正整数a.b,这样定义函数d(a,b):每次操作可以选择一个质数p,将a变成a*p或a/p, 如果选择变成a/p ...
- Inside a super fast CSS engine: Quantum CSS (aka Stylo)
https://hacks.mozilla.org/2017/08/inside-a-super-fast-css-engine-quantum-css-aka-stylo/?utm_source=d ...
- 洛谷 1641 [SCOI2010]生成字符串
题目戳这里 一句话题意 求\(C_{m+n}^{m}\)-\(C_{m+n}^{m-1}\) Solution 巨说这个题目很水 标签居然还有字符串? 但是我还不很会用逆元真的太菜了,还好此题模数P为 ...
- PAT 1051. 复数乘法 (15)
复数可以写成(A + Bi)的常规形式,其中A是实部,B是虚部,i是虚数单位,满足i2 = -1:也可以写成极坐标下的指数形式(R*e(Pi)),其中R是复数模,P是辐角,i是虚数单位,其等价于三角形 ...
- SUBMIT 用法
[转自http://lz357502668.blog.163.com/blog/static/16496743201241195817597/] 1.最普通的用法 *Code used to exec ...
- 【windows】远程桌面报错:由于CredSSP加密Oracle修正
对于windows家庭版用户,无法打开gepdit.msc需要手动修改注册表 创建红色部分目录 [HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\Curre ...
- GIT笔记:GITHUB教程【官方自译版】
GIT笔记:将项目发布到GITHUB GITHUB是什么 GitHub是版本控制和协作的代码托管平台.它可以让你和其他人在任何地方一起工作. 1.创建一个新的仓库 存储库通常用于组织单个项目.存储库可 ...
- gulp 打包报错:ReferenceError: internalBinding is not defined
> gulp build internal/util/inspect.js:31 const types = internalBinding('types'); ^ ReferenceError ...
- OSI 与 TCP/IP
OSI参考模型 物理层(Physical Layer) --- 数据表示.物理层规定了激活.维持.关闭通信端点之间的机械特性.电气特性. 功能特性以及过程特性.该层为上层协 ...
- 暑假集训第一周比赛C题
http://acm.hust.edu.cn/vjudge/contest/view.action?cid=83146#problem/C C - 学 Crawling in process... C ...