JS事件的绑定方式、事件的执行机制、this关键字

iceice0513
69 阅读1分钟

事件的绑定方式

事件属性方式

image.png

赋值式

image.png

image.png

事件监听

ele.addEventLisitner(事件类型，function(){})

兼容性问题

兼容IE7、8

ele.attachEvent(事件类型，function(){}))

onclick +'on'

image.png

image.png

  • 区别：

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

  2. 事件赋值与事件监听

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

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

事件的执行机制

事件的传播

image.png

image.png

事件的传播方向

image.png

image.png

image.png

事件处理三个阶段

image.png

事件目标对象target

image.png

image.png

image.png

阻止事件传播

image.png

事件委托

image.png

image.png

image.png

image.png

image.png

this关键字

函数

  1. 函数定义方式

image.png 2. 自调用函数

image.png 3. arguments

image.png

this关键字

  • 每一个函数内部都有一个关键字是this
  • 可以让我们直接使用的
  • 函数内部的this指向谁，取决于函数的调用方式

image.png

image.png

image.png

image.png

image.png

  • 重点：函数内部的this只和函数的调用方式有关系，和函数的定义方式没有关系
avatar
文章
阅读
粉丝