JavaScript的事件机制

JavaScript的事件是以一种流的形式存在的,一个事件会有多个元素同时响应。具体分为:捕获型事件、冒泡型事件(所有浏览器都支持)。

捕获型事件是自上而下的,而冒泡型事件是自下而上的。下面这张图说的很明了:

1.捕获型事件:

下图中id为div1和div2的两个元素都被绑定了捕捉阶段的事件处理函数:

当点击#div1(红色区域)时,应该会alert出”div1″当点击#div2(黄色区域)时,应该会先alert出”div1″,再alert出”div2″,因为在事件捕捉阶段,事件是从根元素向下传播的,#div1是#div2的父元素,自然绑定在#div1上的click事件也会先于#div2上的click事件被执行。

2.冒泡型事件:

一个典型的例子:

结果:

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

推荐阅读更多精彩内容

  • 以下文章为转载,对理解JavaScript中的事件处理机制很有帮助,浅显易懂,特分享于此。 什么是事件? 事件(E...
    jxyjxy阅读 3,076评论 1 10
  • 在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定、事件监听、事件委托(...
    你期待的花开阅读 423评论 0 5
  • jQuery基础 什么是JQ?一个优秀的JS库,大型开发必备JQ的好处?一简化JS的复杂操作二不再需要关心兼容性三...
    幺七阅读 956评论 0 2
  • 事件绑定的方式 给 DOM 元素绑定事件分为两大类:在 html 中直接绑定 和 在 JavaScript 中绑定...
    Bruce_zhuan阅读 1,061评论 0 6
  • 职场拼搏的我们,通过出售时间来换取金钱,而我们20岁以后这个年纪很多人都会迷茫。究竟是打磨技能?还是学习管理? 有...
    Darren_Lin阅读 1,572评论 4 1