事件冒泡与事件捕获

var evt = e ? e:window.event;
window.event? window.event.cancelBubble = true : evt.stopPropagation();
window.event? window.event.returnValue = false : evt.preventDefault();

阻止默认动作的发生

  • 先查看event.cancelable属性来判断一个事件的默认动作是够可以被取消。若为false,则preventDefault方法无效。
  • event.preventDefault() 在事件触发后的任何阶段调用该方法来取消该事件
  • preventDefault方法会引起event.defaultPrevented属性变为true.

事件冒泡

  • 事件是默认的;
  • event.stopPropagation():终止事件再传播过程中的捕获、目标处理或冒泡的进一步传播;阻止冒泡、捕获和处于目标阶段
  • 冒泡最终会冒泡到这个页面的window
  • 事件冒泡是相对独立的

事件捕获

  • addEventListener('click',fn,true); 第三个参数确定是否捕获。为true为事件捕获方式获得
  • DOM3级的stopImmediatePropagation()阻止事件捕获,也可以阻止事件冒泡。

DOM事件流(DOM2级)

  • 事件捕获阶段
  • 处于目标阶段
  • 事件冒泡阶段

IE 提出事件冒泡流
Netscape提出事件捕获流

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 8,924评论 1 11
  • 首先我们需要知道所谓的事件冒泡与事件捕获是怎么来的 微软提出了名为事件冒泡(event bubbling)的事件流...
    张镕凡阅读 4,937评论 0 97
  • JavaScript 程序采用了异步事件驱动编程模型。在这种程序设计风格下,当文档、浏览器、元素或与之相关的对象发...
    劼哥stone阅读 5,043评论 3 11
  • JavaScript与HTML之间的交互是通过事件来实现的,事件就是当文档或者浏览器窗口发生一些特定的交互瞬间,事...
    plainnany阅读 4,654评论 1 2
  • js之事件机制 1、事件初探 1.1 js事件的概述 JavaScript事件:JavaScript是基于事件驱动...
    道无虚阅读 7,321评论 0 2

友情链接更多精彩内容