js中的事件绑定方法总结

一 查漏补缺 知识点记录

事件处理程序：事件捕获 目标对象 事件冒泡。

事件绑定方法有几种呢？分别有什么区别？

一 直接绑定在htm元素上。

• this指向的是当前的目标对象，但是因为执行函数的时候是在全局执行，所以函数内部调用的this是指向全局的。
• 默认会有一个event的事件对象,你不需要从函数中传进去，也不需要在函数内部定义。
• 在html上的onclick传入的是js的代码，所以需要加括号，当事件触发的时候，自动执行。
• 处理程序发生在事件冒泡阶段。

this指向 默认有event对象

<button id='mybtn' onclick='handleClick(this.id)' >点击提交</button>
//js代码部分
function handleClick(test) {
    console.log(this, '测试this的指向', test, event);
 }
// 输出 window，测试this的指向，mybtn，event（事件对象）

事件处理发生在冒泡阶段。当点击子按钮的时候，先执行子按钮的事件处理，再执行父元素的事件处理程序。

// html代码
  <div class='father'>
      <div class='son' onclick="handleClick('我是父亲')">
        <button class='mybtn'>按钮</button>
        <button class='btn2' onclick="handleClick('我是儿子')">3333</button>
      </div>
   </div>

// js代码
  function handleClick(num) {
    // console.log(this, '测试this的指向', event, num);
    console.log(num);
  }

//输出
我是儿子
我是父亲

二 使用DOM0级处理程序（在事件冒泡阶段被处理）

使用目标的对象事件

• 事件处理程序发生在冒泡阶段。
• this指向当前的目标对象。
• 使用btn.onclick = null去清除删除事件处理程序。

btn.onclick = function(){}
btn.onclick = handleClick;
btn.onclick = null ;

三 使用DOM2级事件处理。(false则发生在事件冒泡，true则发生在事件捕获阶段。)

• 可以通过设置第二个参数来确定要发生在哪个阶段。
• this的指向是当前事件处理的对象。
• 使用btn.removeEventListener('click, handleClick, false')来消除事件。（匿名函数不可消除。）
• 当一个元素绑定了一个点击事件，调用了两次函数，那么事件处理程序会以添加它们的相同的顺序被触发。

   father.addEventListener('click', function(event){
          console.log(this.className, '这是父亲的');
          console.log(event.target.className, '这是真正被点击的对象');
          console.log(event.currentTarget.className, '这是事件正在被触发的时候的对象');
        }, false)

        son.addEventListener('click', function(event){
          console.log(this.className, '这是儿子的');
          console.log(event.target.className, '这是真正被点击的对象');
          console.log(event.currentTarget.className, '这是事件正在被触发的时候的对象');
        }, false)

- 

father.addEventListener('click', handleClick, true) 
son.addEventListener('click', handleClick, true)

father.removeEventListener('click', handleClick, true)
son.removeEventListener('click', handleClick, true)

四 IE中使用attachEvent 来实现（发生在事件冒泡阶段。）

• this指向的是window对象。
• 可以使用btn.detachEvent('onclick', handleClick)来实现事件消除。
• 事件名称前需要加on。
• 当一个元素绑定了一个点击事件，调用了两次函数，那么事件处理程序会以添加它们的相反的顺序被触发。

btn.attachEvent('onclick', function(){
 window === this // true
})

事件处理中的event需要知道的几个点

• event.target : 用户进行操作处理的事件对象。
• event.currentTarget: 因为事件冒泡或者事件捕获而被处理的事件对象。
  😆举个例子。

  // dom2 window.addeventlistener
// 其中son是father的子元素，false，所以事件发生在冒泡阶段。
        father.addEventListener('click', function(event){
          console.log(this.className, '这是父亲的this');
          console.log(event.target.className, '这是真正被点击的对象');
          console.log(event.currentTarget.className, '这是事件正在被触发的时候的对象');
      }, false)

        son.addEventListener('click', function(event){
          console.log(this.className, '这是儿子的this');
          console.log(event.target.className, '这是真正被点击的对象');
          console.log(event.currentTarget.className, '这是事件正在被触发的时候的对象');
        }, false)

// 当点击son的时候，输出如下,因为是发生在冒泡阶段
// 所以当son被点击之后，先执行son的函数，其中event.target是此次真正被用户点击的对象，则为son。
// 而event.currentTarget则是动态的，看整个事件流到哪里，就是谁。
son 这是儿子的this
son 这是真正被点击的对象
son 这是事件正在被触发的时候的对象
father 这是父亲的this
son 这是真正被点击的对象
father 这是事件正在被触发的时候的对象

五 使用跨浏览器的事情件处理

TODO：// 待完成。