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 ...
随机推荐
- [Sdoi2013]随机数生成器(BSGS)
#include<cstdio> #include<cstring> #include<cmath> #include<iostream> #inclu ...
- thinkphp5, 模板继承、模板布局
---------------------------------------------------------------------------------------------------- ...
- spring jdbcTemplate的CRUD操作
一.jdbcTemplate准备 1.导入与jdbcTemplate相关的jar包 2.设置数据库信息 3.创建jdbcTemplate对象,设置数据源 二.添加操作 1.代码 2.结果 三.修改操作 ...
- activiti踩坑
最近在学习activiti,偶然间遇到一个错误:加载引擎的时候报错,显示空指针错误,跟代码发现初始化配置文件返回为null.几经排查,可能是因为我发布流程后又清空了数据库数据导致的.然后我把表全部删除 ...
- LeetCode:贪婪算法
LeetCode:贪婪算法 贪婪算法基础 我 717. 1-bit and 2-bit Characters class Solution { public boolean isOneBitChara ...
- iOS block 闭包的学习
iOS 闭包 学习 理解: 1 . 闭包外界无法访问内部变量 ,它是一个独立的代码块. 2 . 闭包可以作为 一个方法 ,甚至局部变量 全局 变量 3 . 闭包 是一种引用类型 注 ...
- Hadoop Pig
Pig包括两部分: 用于描述数据流的语言,称为Pig Latin. 用于执行Pig Latin程序的执行环境,当前有两个环境:单JVM中的本地执行环境和Hadoop集群上的分布式执行环境. Pig内部 ...
- 【FLASK模板】set,with语句
# set with 语句 ###set语句:在模板中, 可以使用 ‘set’语句来定义变量, 实例如下: <body> {% set username='zhiliaoketang' % ...
- Java强引用、 软引用、 弱引用、虚引用
Java强引用. 软引用. 弱引用.虚引用 2012-07-09 1.对象的强.软.弱和虚引用 在JDK 1.2以前的版本中,若一个对象不被任何变量引用,那么程序就无法再使用这个对象.也 ...
- nginx+tomcat负载均衡搭建
一. 单独部署tomcat和nginx Nginx版本:nginx-1.13.5 Tomcat版本:apache-tomcat-8.5.8 操作系统:win10 必须先部署一个tomcat服 ...