JavaScript事件监听
一、事件event对象
- Event事件对象,用来获取事件的详细信息:鼠标位置、键盘按键。在主流浏览器下默认传参给事件函数的第一个参数,ie低版本会挂载在window下的event属性里,保存了触发事件参数,这是个全局对象。
- Event对象的兼容:e = e || window.event;
obj.onclick = function(e){e = e || window.event;
}
复制代码
event.type
返回事件的类型。- 取消事件的传递,主流浏览器下使用
e.stopPropagation();
方法,IE浏览器下使用e.cancelBubble=true
属性。
二、DOM事件
- DOM 0级事件,
onclick
被认为是元素的属性方法,只能绑定一个。 - DOM 2级事件,主流浏览器下使用
addEventListener(事件名称,事件函数,是否捕获)
注册事件,第一个参数传事件类型(click),第二个参数传事件函数,第三个函数传是否捕获,true使用捕获,默认false使用冒泡。事件名称没有on
,事件执行的顺序是正序
,this
指触发该事件的对象。IE浏览器下使用attacheEvent(事件名称,事件函数)
注册事件,第一个参数传事件类型(onclick),第二个参数传事件函数。没有捕获,事件名称有on
,this
指向window
。 - DOM 2级事件,主流浏览器下使用
removeEventListener(事件名称,事件函数,是否捕获)
注销事件,第一个参数传事件类型(click),第二个参数传事件函数,第三个参数传是否捕获,状态要和注册事件一一对应。IE浏览器使用detachEvent(事件名称,事件函数)
注销事件。第一个参数传事件类型(onclick)。
var oBox = document.getElementById('box');
var captrue = true; //捕获
document.addEventListener('click', function(){console.log('document点击')
},captrue);document.body.addEventListener('click', function(e){e.stopPropagation(); //停止事件传递,下面的oBox点击事件不会触发console.log('body点击')
},captrue);oBox.addEventListener('click',function(e) {e.stopPropagation();console.log('box点击')
},captrue);
复制代码
//IE浏览器下
var fn = function(e){e = e || window.event;//e.stopPropagation();e.cancelBubble = true;console.log('点击box')
};
oBox.attachEvent('onclick',fn);
//oBox.addEventListener("click",fn);var timer;
document.onclick = function(){timer = setTimeout(function(){console.log('单击')},300);
}
//文档双击就会取消 oBox的点击事件
document.ondblclick = function(){console.log('双击');clearTimeout(timer);oBox.detachEvent('onclick',fn);
}
复制代码
三、事件冒泡
- 事件冒泡指子元素触发事件的时候,会 冒泡(触发)父级的相同的事件 。
- 主流浏览器下使用
e.stopPopagation();
,IE浏览器下使用e.cancelBubble=true;
四、兼容事件注册
evenetBind(box,'click',function(event){console.log(event);eventUnbind(this,'click',true);
},true);/*
* 绑定事件
* ele 元素节点
* event 事件类型
* hadler 处理事件函数
* capture 是否捕获
*/
function evenetBind(ele,eventType,handler,capture) {//用包装函数做处理ele['evet'+eventType] = handler;//先判断是否为主流浏览器if(ele.addEventListener){ele.addEventListener(eventType,ele['evet'+eventType],capture);}else if(ele.attachEvent){//ie需要做处理ele['evet'+eventType] = function(){//处理低版本ie 的this指向问题handler.call(ele,window.event);};ele.attachEvent('on'+eventType,ele['evet'+eventType]);}else{ele['on'+eventType] = handler;}
}//注销事件
function eventUnbind(ele,event,capture){//如果在就是主流浏览器if(ele.removeEventListener){ele.removeEventListener(event,ele['evet'+event],capture);}else if(ele.detachEvent){ele.detachEvent('on'+event,ele['evet'+event]);}else{ele['on'+event] = null;}
}
复制代码
JavaScript事件监听相关推荐
- JavaScript事件监听完整实例(含注释)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- javascript事件监听与事件委托
事件监听与事件委托 在js中,常用到element.addEventListener()来进行事件的监听.但是当页面中存在大量需要绑定事件的元素时,这种方式可能会带来性能影响.此时,我们可以用事件委托 ...
- 转帖 javascript事件监听
原帖地址: http://www.cnblogs.com/AganCN/archive/2008/05/24/1206272.html 考虑这样的情形在IE浏览中处理,需要响应页面的按钮点击事件,有哪 ...
- JavaScript 基础--- (正则表达式 / 事件监听与绑定)
正则表达式 创建正则表达式: 方法一: var reg = /pattern/; 方法二:var reg = new RegExp('pattern'); RegExp 对象的常用方法: 示例: &l ...
- JavaScript 的addEventListener() 事件监听详解!
JavaScript 的addEventListener() 事件监听详解! addEventListener() 用于向指定元素添加事件. 可以向一个元素添加多次事件或者多次不同事件,后面的事件是 ...
- JavaScript之事件触发on和事件监听addEvent及addEventListener的区别和作用
一.on事件 为dom节点添加多个on事件只会执行最后的那个事件,因为最后的指定的on事件指向最后的那个函数,代码如下所示: function method1(){console.log('我是方法1 ...
- JavaScript原生实现事件监听及手动触发
事件监听 标签中的onxxx,比如<button οnclick="btnHandler">按钮</button> js中的onxxx,比如document ...
- 从jQuery的缓存到事件监听
很久以前,我还在cnblogs里面逛的时候就提出过一个问题(刚找了半天没找到).不知道大家有没有发现,用jQuery选择器"选择"之后的DOM上会添加jQuery********* ...
- 事件绑定、事件监听、事件委托
2019独角兽企业重金招聘Python工程师标准>>> 在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定.事件监听.事件委托(事件代理)等 ...
最新文章
- 【Sprint3冲刺之前】TD学生助手测试用例
- Python基础——PyCharm版本——第五章、循环(for、while、break、continue)
- java.net.sockettimeoutexception read timed out
- StringTokenizer的使用
- 数据结构之树状数组(候补)
- java statement 参数_java statement详细用法
- dx 游戏 hook 画面截取 鼠标_关于DX-30E 个人简评
- mpvue 使用wxParse解析html
- part 8 App电量优化
- 计算机中xp系统中qq文件,从做完xp系统怎样恢复qq文?
- csgo fps不稳定和服务器,win10玩csgofps不稳定怎么办
- JSP Servlet Mysql学生签到考勤请假系统
- input框的23种类型
- php 虚线怎么画,photoshop中设置虚线样式的方法总结
- 站长紧急:新站要沉得住气
- 倪文迪陪你学蓝桥杯2021寒假每日一题:1.25日(2019省赛A组第3题)
- html效果浮窗效果,网页浮窗成效
- 解读:学习网络安全自学好还是报培训班好
- k8s tekton 实现CI流程,从git到docker registry
- AD之PCB各层说明