事件(三)事件对象

六.事件对象

  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,即此点击事件触发的源头
}
  1. 兼容性写法

七.事件委托

  • 利用事件冒泡,和事件源对象进行处理
  • 优点:
    (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上

你可能感兴趣的:(事件(三)事件对象)