事件（三）事件对象

六.事件对象

1. event || window.event用于IE
2. 事件源对象：事件对象上的属性，是事件触发的源头

• event.target 火狐只有这个
• event.srcElement IE只有这个
• 这俩chrome都有

//html

      

//js
var wrapper = document.getElementsByClassName('wrapper');
var box = document.getElementsByClassName('box');
wrapper.onclick = function(e){
        var event = e || window.event;//event为事件对象
        var target = event.target || event.srcElement;//事件源对象
        console.log(target);//此时点击box区域，会打印box，即此点击事件触发的源头
}

3. 兼容性写法

七.事件委托

• 利用事件冒泡，和事件源对象进行处理
• 优点：
  （1）性能 不需要循环所有的元素一个个绑定事件
  （2）灵活 当有新的子元素时不需要重新绑定事件
  eg:点击任意li，输出相应的数字内容。

//html

    
1
    
2
    
3
    
4
    
5
    
6
    
7
    
8
    
9

//js
var ul = document.getElementsByTagName('ul')[0];
ul.onclick = function (e) {
      //li在ul内部，点击li部分时，会逐步冒泡给ul
      var event = e || window.event;//事件对象
      var target = event.target || event.srcElement;//事件源对象
      console.log(target.innerText);
}

比for循环性能更好，事件没有绑定在li上