事件

事件

事件中的名词

  • 事件目标(event target):发生的事件或与之相关的对象(常见window,document,element)
  • 事件类型(event type):什么类型事件的字符串(click,blur)
  • 事件处理程序或事件监听程序:处理或响应事件的函数
  • 事件对象(event object):特定事件相关且包含有关该事件详细信息的对象(作为参数传递给处理程序的函数)
  • 事件传播:(单个对象的特定事件(window对象的load事件),必须是不能传播的)
    a:事件的捕获(常用与处理鼠标的拖放)(在target本身上注册的捕获处理事件不会被调用)
    b:事件的冒泡

注册事件处理程序的三种方式

  • js对象属性为事件处理程序
  target.onclick = function(event){}
  • 设置html标签属性为事件处理程序
  <div onclick="send()"></div>
  • 采用事件监听的形式
  /**
   * type:事件类型
   * callback:事件处理程序
   * boolean:事件传播(true => 捕获; false => 冒泡) 默认值为false
   */
  addEventListener(type,callback,boolean)

事件的调用顺序

  • 通过设置对象的属性或者html属性注册的处理程序一直优先调用
  • 使用addEventListener注册处理程序按照它们注册的顺序进行调用
  • 使用attachEvent()可能按照顺序进行调用(Ie8以及以前的版本才有attachEvent)

事件相关的方法

event.preventDefault() // 阻止事件的默认行为(例如:点击超链接有跳转的行为使用这个方法就可以阻止跳转)
event.stopPropagation() // 阻止事件的传播

事件的三个阶段

1. 捕获阶段

事件从根节点流向目标节点,途中流经各个DOM节点,在各个节点上触发捕获事件,直到达到目标点。

2. 目标阶段

事件到达目标节点时,就到了目标阶段,事件在目标节点上被触发

3. 冒泡阶段

事件在目标节点上触发后,不会终止,一层层向上冒,回溯到根节点。

事件的委托(解决事件处理程序过多)

  • 可以优化性能并且
  • 添加进来的元素也可以绑定事件
  • 一般在冒泡中使用(冒泡兼容所有的主流的浏览器)

  转载请注明: 迷一样的自信 事件

 上一篇
事件轮询 事件轮询
事件轮询解释  主线程从任务队列中读取事件,这个过程是循环不断的。   所有任务都可以分为:同步任务(都在主线程)与异步任务(任务队列中)。 运行的机制 所有同步任务都在主线程上执行,形成一个执行栈(每执行一条代码,向栈中压入这条代码)。
2018-01-14
本篇 
事件 事件
事件事件中的名词 事件目标(event target):发生的事件或与之相关的对象(常见window,document,element) 事件类型(event type):什么类型事件的字符串(click,blur) 事件处理程序或事件
2018-01-06
  目录