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 ...
随机推荐
- 九度OJ 1343:城际公路网 (最小生成树)
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:445 解决:178 题目描述: 为了加快城市之间的通行和物资流动速度,A国政府决定在其境内的N个大中型城市之间,增加修建K条公路.已知这N个 ...
- centos samba 服务器的配置和使用
1.安装samba服务 #yum install samba samba-client samba-swat 2.修改配置文件 #vi /etc/samba/smb.conf security = u ...
- git本地分支管理
查看分支:git branch创建分支:git branch dev重命名分支:git branch -m dev dev1删除分支:git branch -d dev切换分支:git checkou ...
- Bootstrap学习3--栅格系统
备注:最新Bootstrap手册:http://www.jqhtml.com/bootstraps-syntaxhigh/index.html 目录1.简介2.栅格选项3.列偏移4.嵌套列5.列排序 ...
- IntelliJ IDEA(2017)安装和破解(转发)
IntelliJ IDEA(2017)安装和破解 IDEA 全称 IntelliJ IDEA,是Java语言开发的集成环境,IntelliJ在业界被公认为最好的java开发工具之一,尤其在智能代码助手 ...
- eclipse安装Activiti Designer插件(转载:http://blog.csdn.net/qq_33547950/article/details/54926435)
为了完成毕业设计,需要学习Activiti.万事开头难,果然刚开始就遇到了问题.<Activiti实战>和视频教程里提供的安装Activiti Designer插件方法(即下文方法一)不能 ...
- Python socket TCPServer Demo
#coding:utf-8 from SocketServer import TCPServer,BaseRequestHandler import traceback class MyBaseReq ...
- Redis缓存全自动安装shell脚本
我只是把命令放到shell文件中了,方便安装,代码如下: #!/bin/bash # shell的执行选项: # -n 只读取shell脚本,但不实际执行 # -x 进入跟踪方式,显示所执行的每一条命 ...
- ELK日志分析系统-Logstack
ELK日志分析系统 作者:Danbo 2016-*-* 本文是学习笔记,参考ELK Stack中文指南,链接:https://www.gitbook.com/book/chenryn/kibana-g ...
- mysql设置有外键的主键自增及其他
有外键的主键设置自增. ; ALTER TABLE `<table>` MODIFY COLUMN `id` ) NOT NULL AUTO_INCREMENT FIRST; 创建数据库, ...