js事件监听
/*
事件监听器
addEventListener()
removeEventListener()
传统事件绑定：
1、重复添加会，后添加的后覆盖前面的。
*/
示例代码中的html结构：
<body>
<button id = "btn1">按钮</button>
</body>
//代码示例
window.onload = function(){
//传统事件绑定
var oBtn = document.getElementById('btn1');
oBtn.onclick = function(){
alert('hello world');
}
//此处省略100行代码
oBtn.onclick = function(){
alert('world hello');
}
}
/*上面的结果是下面的oBtn.onclick事件会覆盖到上面的oBtn.onclick事件
最后页面上输出的结果也是 world hello;*/
//怎么才能让他两个事件都存在呢？这里我们要用到事件监听器
//addEventListener()
//removeEventListener()
/*
事件监听器
addEventListener()
格式：
node.addEventListener(事件类型, 函数_要执行的匿名函数, false)
第三参数：false 事件冒泡 true 事件捕获
removeEventListener()
格式：
node.removeEventListener(事件类型, 函数名);
传统事件绑定：
1、重复添加会，后添加的后覆盖前面的。
*/
//代码示例：
window.onload = function(){
//事件监听绑定
var oBtn = document.getElementById('btn1');
oBtn.addEventListener ('click', function(){
alert('hello world');
}, false)
//此处省略100行代码
//再添加一个监听事件用来监听click 点击
oBtn.addEventListener ('click', function(){
alert('world hello');
}, false)
}
//这样就不会发生重叠现象，点击按钮时会 弹出 hello world 和 world hello；
//我再来看一下移除事件监听 removeEventListener,首先先看一下传统的移除事件
//我们修改html结构如下
<body>
<button>添加事件</button>
<button>按钮</button>
<button>删除事件</button>
</body>
//具体演示代码如下
window.onload = function(){
//获取3个button按钮元素节点
var aBtns = document.getElementsByTagName('button');
//给第二个按钮添加一个传统的点击事件
aBtns[1].onclick = function(){
alert('原有的事件');
}
//当点击第一个按钮的时候再给第二个按钮添加一个传统的点击事件
aBtns[0].onclick = function(){
aBtns[1].onclick = show;
}
//点击第三个按钮的时候，将第二按钮点击事件赋值成 null 即为空
aBtns[2].onclick = function(){
aBtns[1].onclick = null;
}
//方便演示的函数
function show(){
alert('hello world');
}
}
//在演示过程中，我们可以看出每次都是相互覆盖的关系，刚开始的时候 点击第二个按钮 会弹出 原有的事件， 我们再去点一下 第一个按钮 后
//再回来点 第二个按钮 这时的内容 就变成了 hello world 说明第二次添加的事件 把原有的事件就覆盖了，点击 第三个按钮 也是同样的道理
//所在 再次点击 第二个时 就什么也不弹出来。
//我们再来看一下移除事件监听 removeEventListener与上面的区别，
//代码如下
window.onload = function(){
var aBtns = document.getElementsByTagName('button');
aBtns[1].addEventListener('click', function(){
alert('原有的事件');
}, false);
aBtns[0].onclick = function(){
aBtns[1].addEventListener('click', show, false);
}
aBtns[2].onclick = function(){
aBtns[1].removeEventListener("click", show);
}
}
function show(){
alert('hello world');
}
//可以看出用事件监听的方法可以不覆盖原有的事件，还能自由可控制，移除添加的事件。
/*但是这种方法 是ie9 以后才出来的，所以ie9以前不兼容，但是他给我们了两个功能一样的函数，
IE下
attachEvent()
格式
只有两个参数
attachEvent(on事件类型, 函数_要执行的匿名函数或函数)
detachEvent(on事件类型, 函数_要取消的匿名函数或函数)*/
/*所以我们封装兼容所有浏览器的 监听事件方法（函数）*/
/*---------封装兼容所有浏览器的 监听事件方法（函数--------------*/
//封装添加监听事件的函数
// 形参说明
// obj 是要添加的元素节点对象
// event 是事件类型（是click还是mousedown等）
// func 是事件触发后要执行的函数
function addEvent(obj, eventType, func){
if(obj.addEventListener){
obj.addEventListener(eventType, func, false);
}else{
obj.attachEvent("on" + eventType, func);
}
}
//封装移除监听事件的函数
function removeEvent(obj, eventType, func){
if(obj.removeEventListener){
obj.removeEventListener(eventType, func);
}else{
obj.detachEvent("on" + eventType, func);
}
} /*---------封装兼容所有浏览器的 监听事件方法（函数)end--------------*/
/*总结
传统事件绑定可以满足我们对于事件绑定的大部分需求。
事件监听器可以补充我们传统事件绑定不能满足的更高的要求。
*/
js事件监听的更多相关文章
- js 事件监听 冒泡事件
js 事件监听 冒泡事件 的取消 [自己写框架时,才有可能用到] <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitiona ...
- js 事件监听 兼容浏览器
js 事件监听 兼容浏览器 ie 用 attachEvent w3c(firefox/chrome) 用 addEventListener 删除事件监听 ie 用 detachEven ...
- js事件监听机制(事件捕获)总结
在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒 ...
- js事件监听机制(事件捕获)
在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒 ...
- js 事件监听封装
var eventUtil={//添加句柄 //element,节点 //type,事件类型 //handler,函数 addHandler:function(element,type,handler ...
- js事件监听-addEventListener (w3c标准) 和 attachEvent（ie）
研究了一个小时,没看懂这两个属性 window.onload = function(){ var oDiv = document.getElementById("J_myDiv") ...
- 前端学习历程--js事件监听
一.事件监听使用场景 1.事件触发多个方法的时候,后一个方法会把前一个方法覆盖掉. window.onload = function(){ var btn = document.getElement ...
- Js事件监听封装（支持匿名函数）
先看demo:http://liutian1937.github.io/demo/EventListen.html/*绑定事件与取消绑定*/ var handleHash = {}; var bind ...
- （转载）JS事件监听 JS:attachEvent和addEventListener使用方法
(转载)http://www.chhua.com/web-note146 attachEvent和addEventListener使用方法 Js代码 <html> <head> ...
随机推荐
- P4891 序列
P4891 序列 题目描述 给定两个长度为 n 的序列 A 和 B,定义序列 \(C_i=\max\limits_{j=1}^i A_j\) 定义当前的价值是 $\prod\limits_{i=1}^ ...
- 20190311 Java处理JSON的常用类库
1. Gson 1.1. 背景 谷歌 1.2. 简单使用 Gson gson = new Gson(); System.out.println(gson.toJson(1)); // ==> 1 ...
- Nginx核心配置文件常用参数详解
Nginx核心配置文件常用参数详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 关于Nginx权威文档的话童鞋们可以参考Nginx官方文档介绍:http://nginx.org/ ...
- nginx-1.12.1编译参数详情
一下nginx-1.12.1编译参数详情 #/usr/local/nginx/sbin/nginx -V nginx version: nginx/1.12.1 built by gcc 4.4.7 ...
- 基于windows server 2012 的微软桌面虚拟化实战教程
http://abool.blog.51cto.com/8355508/1587489/ Windows Server2012 中的“远程桌面服务”服务器角色中就提供了允许用户连接到虚拟机.Remot ...
- 机器学习课程-第8周-降维(Dimensionality Reduction)—主成分分析(PCA)
1. 动机一:数据压缩 第二种类型的 无监督学习问题,称为 降维.有几个不同的的原因使你可能想要做降维.一是数据压缩,数据压缩不仅允许我们压缩数据,因而使用较少的计算机内存或磁盘空间,但它也让我们加快 ...
- Javaweb学习笔记——（三）——————JavaScript基础&DOM基础
day031.js的String对象 **创建String对象 ***var str = "abc"; **方法和属性(文档) ***属性 lenth:字符串的长度 ***方法 ( ...
- luogu P3707 [SDOI2017]相关分析
传送门 对于题目要求的东西,考虑拆开懒得拆了 ,可以发现有\(\sum x\sum y\sum x^2\sum xy\)四个变量影响最终结果,考虑维护这些值 下面记\(l,r\)为区间两端点 首先是区 ...
- luogu P3978 [TJOI2015]概率论
看着就是要打表找规律 使用以下代码 for(int i=3;i<=20;i++) { int a1=0,a2=0; for(int j=1;j<i;j++) { for(int k=0;k ...
- WPF工具开发: 第三库选择
PropertyGrid Winforms's PropertyGrid 非WPF原生支持, 需要借助WinFormHost 风格不可定制 PropertyInspectorView 算是" ...