改变this指向

事件的绑定方式

1. 事件属性方式

2. 赋值式

3. 事件监听

    <button onclick = "alert()">按钮1<button>
    <button>按钮2<button>        
    <button>按钮3<button>
    
    <scrpt>
        var btn2 = document.querySelectorAll('button')[1]
        btn2.onclick = function(){
            alert("事件赋值")
        }
        var btn3 = document.querySelectorAll('button')[2]
        function fun1(){
            alert('事件监听')
        }
        btn3.addEventListener('click',fun1)
   

区别：

1.事件赋值与事件监听 同 事件属性相比，实现了结构和元素分离

2.事件监听方式后面的事件不会覆盖前面的事件（事件源和事件类型相同）

事件解绑

  1.解绑赋值式绑定事件
      btn2.onclick = null
  2.解绑事件监听
      btn3.removeEventListener('click',事件处理函数名)
 

事件目标对象

  事件对象
       event

  事件目标对象
       target

  当前选中的元素节点
        e.target

  兼容IE
        e.srcElement
        var target = e.target || e.srcElement         
  this关键字: 在事件处理函数中this表示事件源
        console.log('this ',this)  
        

事件传播

1. 嵌套的元素, 事件会传播

2. 事件传播方向问题

      + 事件冒泡
       从事件目标对象开始 -> window对象结束
       由内向外传播的事件方式称为事件冒泡 (默认传播行为)
       
      + 事件捕获
        由外向内传, window对象 -> 事件目标对象
   

3. 事件监听第三个参数设置true表示事件捕获,默认false表示事件冒泡

4. 阻止事件传播

        e.stopPropagation()
   
       兼容ie浏览器
        e.cancelBubble = true                 
        e.stopPropagation?e.stopPropagation():e.cancelBubble = true
        
   

事件委托

事件代理(委托) 利用 事件冒泡实现

事件委托使用场景：

当要给多个元素循环绑定事件的时候可以考虑使用事件委托简化操作

注意： 不支持事件冒泡的不能使用 如:焦点事件

好处:

减少了事件绑定的数量；

对后来动态创建的元素依然有效，

解决动态添加的元素节点无法绑定事件的问题

this关键字

       => this表示当前对象
       => 在同场景下this表示不同的对象         

1. 事件处理函数中的this

      this->事件源
   

2. 普通函数中this

          this -> window对象
   

3. 定时器中this

          this -> window对象
   

4. 自调用函数中this

         this -> window对象
   

5. 对象方法中的this

         Object
         var obj = {
             name:'jack',
             say:function(){
                 this
             }
         }
        调用该方法引用变量指向的对象