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高程中的事件内容。 今天才知道,事件冒泡与事件捕获,这两种相反...
    余生筑阅读 373评论 0 0
  • 背景知识 什么是事件?直观的说就是网页上发生的事情,大部分是指用户的鼠标动作和键盘动作,如点击、移动鼠标、按下某个...
    吧啦啦小汤圆阅读 1,876评论 2 15
  • 总结: 鼠标事件 1.click与dbclick事件$ele.click()$ele.click(handler(...
    阿r阿r阅读 1,629评论 2 10
  • 电话销售及面对面的销售都需要一定的技巧,下面的情况一定会遇到的. 1.如果客户说:"我没现在很忙!" 那么销售员应...
    支势阅读 398评论 0 1
  • 春风吹绿了山野 漫山桃花开了十载 你独不开 骄阳热情似火 百亩荷花羞红了脸 你独不开 秋风飒爽 满山黄叶纷纷舞婆娑...
    上官飞鸿阅读 326评论 19 23