javascript事件详解和事件冒泡, 捕获介绍, 事件委托经典例子

事件

如何绑定事件

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都有