现在的位置: 首页 > 综合 > 正文

原生js底层基础(二十)事件冒泡、事件捕获及取消默认事件方法

2019年11月12日 综合 ⁄ 共 561字 ⁄ 字号 评论关闭

  1.事件冒泡、捕获

  事件冒泡:

  结构上(非视觉上)嵌套关系的元素,会存在事件冒泡的功能,即同一事件,自子元素冒泡向父元素。(自底向上)

  事件捕获:

  结构上(非视觉上)嵌套关系的元素,会存在事件冒泡的功能,即同一事件,自父元素捕获至子元素(事件源元素)。(自顶向下)

  触发顺序:先捕获,后冒泡。

  focus,blur,change,submit,reset,select等事件不冒泡

  2.取消冒泡事件

  有的时候我们不想触发事件的冒泡事件,那么我们可以采取以下方法:

  (1) event.stopPropagation

  此方法为W3C标准的方法,但是不兼容IE9以下的版本

  (2)event.cacelBubble = true

  IE独有的一个方法,版本都

  3.封装取消冒泡事件的函数

  4.阻止默认事件

  默认事件就是表单提交、a标签跳转、右键菜单等

  阻止默认事件的方法有:

  (1)return false;

  以对象属性方式注册的事件才生效

  (2)event.preventDefault();

  W3C的标准方法,IE9以下不兼容

  (3)event.returnValue = false;

  可以兼容IE

  5.封装阻止默认事件的函数

  例如:

  取消默认右键菜单事件

  a标签默认可点击事件

抱歉!评论已关闭.