js—addEventListener() 方法

1、element.addEventListener(event, function, useCapture)方法用于向指定元素添加事件句柄。

• event 必须。字符串，指定事件名。不要使用 “on” 前缀。 例如，使用 “click” ,而不是使用 “onclick”。
• function 必须。指定要事件触发时执行的函数。
• useCapture 可选。布尔值，指定事件是否在捕获或冒泡阶段执行。

抓取元素

var t1 = document.querySelector('#t1'); 
var btn = document.querySelector('#btn')

在事件源身上添加addEventListener

btn.addEventListener('click', function () {
  t1.innerHTML = '小王，hello！'
})

代码演示：

如果浏览器不支持 addEventListener() 方法, 你可以使用 attachEvent() 方法替代。

function fn1() {
  console.log(this);
}

function fn2() {
  console.log(100);
}
if (btn.addEventListener) {
  btn.addEventListener('click', function () {
    t1.innerHTML = '小王，hello！'
  })
} else if (btn.attachEvent) {
  btn.addEventListener('click', function () {
    t1.innerHTML = '小王，hello！'
  })
}

2、把addEventListener()和attachEvent()方法，兼容性写法封装到一个函数中

分析：需要三个参数

• obj—事件源(操作的对象)
• evename—事件名称
• fn—事件触发的函数

function bind(obj, evename, fn) {
  if (obj.addEventListener) {
    obj.addEventListener(evename, fn, false)
  } else if (obj.attachEvent) {
    obj.attachEvent('on' + evename, fn)
  }
}
bind(btn, 'click', fn1);
bind(btn, 'click', fn2);