1. 使用'对象.事件=函数'的形式绑定响应函数，它只能同时为一个与元素的一个绑定事件绑定一个响应函数。

1. addEventListener() 增加IE9及以上

  1. -->这是一个增加事件监听器
  2.    通过这个方法为元素绑定响应函数
  3. -->参数 1 事件的字符串，不要'on'
  4.               2 回调函数
  5.         3 是否在捕获阶段触发事件，需要一个布尔值，一般都传false
  6. -->可以同时为一个元素的相同事件同时绑定多个响应函数，这样当事件被触发时，响应函数将会按照函数的绑定顺序执行
  7.         例：
  8.             btn.addEventListener('click',function(){},false)

2. attachEvent() 只支持IE浏览器5.0 - 10

  1. -->参数 1 事件的字符串，要'on'
  2.                 2 回调函数
  3.    例：
  4.            btn.attachEvent('onclick',function(){})
  5. -->执行顺序和addEvEventListener()相反
  1. --> addEventListener()中的this，是绑定事件的对象
  2. --> attachEvent()中的this，是window，需要统一两个方法的this
  1.     <button id="btn1">按钮</button>
  2.     <script>
  3.         let btn1 = document.getElementById('btn1')
  4.         function bind(obj,eventStr,callback){
  5.             if(obj.addEventListener){
  6.                 // IE9及以上还有其它浏览器
  7.                 obj.addEventListener(eventStr,callback,false)
  8.             }else{
  9.                 // this是谁由调用方式决定
  10.                 // callback.call(obj)
  12.                 // IE8及以下
  13.                 obj.attachEvent('on'+eventStr,function(){
  14.                     callback.call(obj)
  15.                 })
  16.             }
  17.         }
  18.         bind(btn1,'click',function(){
  19.             alert(2)
  20.         })
  21.     </script>

4. 封装事件监听器

  1. function bind(obj,eventStr,callback){
  2.             if(obj.addEventListener){
  3.                 // IE9及以上还有其它浏览器
  4.                 obj.addEventListener(eventStr,callback,false)
  5.             }else{
  6.                 // this是谁由调用方式决定
  7.                 // callback.call(obj)
  9.                 // IE8及以下
  10.                 obj.attachEvent('on'+eventStr,function(){
  11.                     callback.call(obj)
  12.                 })
  13.             }
  14.         }
  15. 调用：bind(btn1,'click',function(){alert('哈哈')})