事件
如何绑定事件
- ele.onxxx = function(event) { }
- 兼容性好, 但是一个元素的同一个事件上只能绑定一个处理程序
- 基本等同于写在HTML行间
- obj.addEventListener(type, function( ){ }, flase);
- IE9以下不兼容, 可以为一个事件绑定多个处理程序
- obj.attachEvent('on' + type, fn);
- IE独有, 一个事件同样可以绑定多个处理程序
事件处理程序的运行环境
- ele.onxxx = function(event) { }
- 程序this指向是dom元素本身
- obj.addEventListener(type, fn, false);
- 程序this指向是dom元素本身
- obj.attachEvent('on' + type, fn);
- 程序this指向window
- 封装兼容性的addEvent(elem, type, handle);方法
function addEvent(elem, type, handle) {
if(elem.addEventListener) {
elem.addEventListener(type, handle, false);
}else if(elem.attachEvent) {
elem['temp'] = function() {
handle.call(elem);
}
elem.attachEvent('on' + type, elem['temp']);
}else{
elem['on' + type] = handle;
}
}
解决事件处理程序
- ele,.onclick = flase/ ' '/ null;
- ele.removeEventListener(type, fn, false);
- ele.detachEvent('on' + type, fn);
- 注: 若绑定匿名函数, 则无法解除
- 封装的兼容方法
function removeEvent(elem, type, handle) {
if(elem.removeEventListener) {
elem.removeEventListener(type, handle, false);
}else if(elem.detachEvent) {
elem.detachEvent('on' + type, handle);
}else{
elem['on' + type] = null;
}
}
事件处理模型--事件冒泡 \ 捕获
事件冒泡
- 结构上(非视觉上)嵌套的元素, 会存在事件冒泡的功能, 即同一个事件, 自子元素冒泡向父元素(自底向上)
**Tips: addEventListener中的第三个参数false/true, 当为true是事件变为捕获机制 , flase时为冒泡机制 **
事件捕获
- 结构上(非视觉上)嵌套关系的元素, 会存在事件捕获的功能, 即同一个事件, 自父元素捕获至子元素(事件源元素). (自顶向下)
- IE没有捕获事件
EG:
例子
- 当为捕获机制时: 当点击黄色方块时(结构嵌套, 黄色为里面的div, 红色为父级), 先出发的是红色点击事件, 之后是绿色, 黄色;
- 当为冒泡机制时, 先触发黄色事件, 然后依次向父级冒泡, 为绿色, 红色.
即使两个都有, 触发顺序, 先捕获, 后冒泡
focus(鼠标聚焦), blur(鼠标失去焦点), change, submit, reset, select等事件不冒泡
取消冒泡和阻止默认事件
取消冒泡:
- W3C标准event.stopPropagation( );但不支持ie9以下版本
eg:
var div = document.getElementsBYTagName('div')[0];
div.onClick = function() {
console.log('a');
e.stopPropagation();
}
- IE独有event.cancelBubble = true;
- 封装取消冒泡的函数
阻止默认事件:
- 默认事件---表单提交, a标签跳转, 右键菜单等.
- return flase; 以对象属性的方式注册的事件才生效
- event.preventDefault( ); W3C标准, IE9以下不兼容
- event.returnValue = false; 兼容IE
- 封装阻止默认事件的函数cancelHandler(event);
事件对象
- event || window.event 用于IE
eg:
div.onclick = function(e) {
var event = e || window.event;
}
- 事件源对象
- event.target 火狐只有这个
-
event.srcElement IE只有这个
eg1:在HTML中有100个li, 要求点击任意li, 打印出li中的内容
这里写图片描述
注意:又称事件委托!!!!!!!!!
eg2:
var wrapper = document.getElementsByClassName('wrapper')[0];
var content = document.getElementsByClassName('content')[0];
wrapper.onClick = function(e) {
var event = e || window.event;
var target = event.target || event.srcElement//获取事件源对象, 就是找到吹泡泡的人
}
- 以上chrome都有
