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