js事件流与事件处理程序

时间:2021-11-25 04:35:48
  • 事件冒泡
    -事件开始由最具体的元素接受,然后事件沿着dom树向上传播到最上层元素
  • 事件捕获
    -最顶层元素首先接受到事件,然后事件沿着dom树向下传播,直到传播到事件的实际目标
  • dom事件流
    -dom2级事件规定事件流包括三个阶段:事件捕获阶段,处于目标阶段,事件冒泡阶段。首先发生事件捕获,然后是实际的目标接受到事件,最后一个阶段是冒泡阶段,可以在这个阶段对事件做出响应。
    -从实际目标往上每个节点都会接受到事件,但只有注册了事件处理程序的节点才会对事件做出响应。

  • 事件处理程序
    响应某个事件的函数就叫做事件处理程序。click事件的事件处理程序就是onclick。

  • 绑定事件处理程序的几种方式
    -HTML事件处理程序
    例如:<input type="button" onclick="alert("hello world")"/>
    在HTML中指定事件处理程序有两个缺点:首先,存在时差问题,可能用户触发事件时,js文件还没有加载。而且HTML与JavaScript代码紧密耦合,不利于维护。
    -dom0级事件处理程序
    将一个函数赋值给一个事件处理程序属性。简单并且跨浏览器,是目前最常用的方法。
    例如:btn.onclick=function(){
    //...
    }

    -dom2级事件处理程序
    addEventListener(),removeEventListener()
    -IE事件处理程序
    attachEvent(),detachEvent()
  • event对象
    event对象中包含所有与事件有关的信息。无论什么事件处理程序都会传入event对象