JS事件1(冒泡/捕获)

事件是JS中的关键部分,所以小小的跳一下,先了解JS高程中的事件内容。

今天才知道,事件冒泡与事件捕获,这两种相反的事件流分别是IE公司与Netscape公司的产物。有趣,让人想起爱迪生与斯特拉的直交流电之争。商业的博奕意味着你一次只能站定一个立场,可所谓人类的进步,却总是包容并蓄,不为个人或一家公司的输赢所左右。


从头说起。

图片发自简书App

举个栗子

图片发自简书App

页面上有3个html元素,按钮,黄色div,红色div。假设这3个元素各自有自己的点击函数。那么当我点击按钮时,请问3个元素的3个函数发生顺序是什么?

事件冒泡:按钮的函数一>黄色div的函数->红色div的函数

事件捕获:红色div的函数一>黄色div的函数一>按钮的函数。


具体的实现是通过事件监听实现的。

图片发自简书App


图片发自简书App


图片发自简书App


图片发自简书App

点击"冒泡",出现4-3-2-1

点击"捕获",出现1-2-3-4



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

推荐阅读更多精彩内容

  • 事件是JS中的关键部分,所以小小的跳一下,先了解JS高程中的事件内容。 今天才知道,事件冒泡与事件捕获,这两种相反...
    余生筑阅读 140评论 0 0
  • 背景知识 什么是事件?直观的说就是网页上发生的事情,大部分是指用户的鼠标动作和键盘动作,如点击、移动鼠标、按下某个...
    吧啦啦小汤圆阅读 1,866评论 2 15
  • (续jQuery基础(1)) 第5章 DOM节点的复制与替换 (1)DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 1,360评论 0 8
  • 当你的伴侣是红色 因为总觉得生活无乐趣,没人欣赏自己,红色很容易感到沮丧。 他们通常的想法是:“生活就是工作,没有...
    鹿伟伦阅读 1,299评论 0 2
  • TableView 全表截图 APP中有一个类似于分析报告的页面,需要全部分享,包括超出屏幕之外的cell。直接截...
    eversterd阅读 3,344评论 6 5