事件的传播流程

事件 

JavaScript和HTML的交互是通过事件来实现的

事件是某个行为或者触发,比如点击、移动鼠标:

1 当用户点击鼠标时

2 当网页已加载时 

3 当图像已加载时 

4 当鼠标移动到元素上时 

5 当用户按键触发时

事件的传播机制,三个阶段:

捕获阶段:从外向内依次查找元素


不太具体节点更早接受事件,而最具体的元素最后接受事件,和事件冒泡相反  

目标阶段:当前事件源(当前触发的这个元素)本身的操作

冒泡阶段:从内到外依次触发相关的行为


事件开始时由最具体的元素接受,然后逐级向上传播到较为不具体的元素



<div id="box">

      <p>click</p>

</div>

      如果对这两个节点的click事件都设定监听函数,则click事件会被触发四次。<div>和<p>节点的捕获阶段和冒泡阶段各一次:

捕获阶段:事件从<div>向<p>传播时,触发<div>的click事件;

目标阶段:事件从<div>到达<p>时,触发<p>的click事件;

目标阶段:事件离开<p>时,触发<p>的click事件;

冒泡阶段:事件从<p>传回<div>时,再次触发<div>的click事件。

阻止事件传播

      stopPropagation()方法阻止事件在DOM中继续传播,即取消进一步的事件捕获或冒泡,防止再触发定义在别的节点上的监听函数,但是不包括在当前节点上新定义的事件监听函数。

w3c的方法是e.stopPropagation(),IE则是使用e.cancelBubble = true

取消默认事件

preventDefault()方法

    preventDefault它是事件对象(Event)的一个方法,作用是取消一个目标元素的默认行为。既然是说默认行为,当然是元素必须有默认行为才能被取消,如果元素本身就没有默认行为,调用当然就无效了。什么元素有默认行为呢?例如 :a标签的 href 和click事件跳转,提交按钮<input type=”submit”>等

w3c的方法是e.preventDefault(),IE则是使用e.returnValue = false;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,543评论 1 11
  • JavaScript 程序采用了异步事件驱动编程模型。在这种程序设计风格下,当文档、浏览器、元素或与之相关的对象发...
    劼哥stone阅读 1,280评论 3 11
  • js之事件机制 1、事件初探 1.1 js事件的概述 JavaScript事件:JavaScript是基于事件驱动...
    道无虚阅读 2,414评论 0 2
  • JavaScript 与 HTML 之间的交互是通过事件实现的。事件,就是文档或浏览器窗口中发生的一些特定的交互瞬...
    LemonnYan阅读 699评论 0 4
  • 事件流 JavaScript与HTML之间的交互是通过事件实现的。事件,就是文档或浏览器窗口中发生的一些特定的交互...
    DHFE阅读 847评论 0 3