js事件流

一:事件冒泡和事件代理
事件:事件是文档和浏览器窗口中发生特定交互的瞬间,当我们与浏览器中的web页面进行某些类型交互的时候,事件就发生了
事件流:事件流描述的是页面中接受事件的顺序,微软为事件冒泡,网景为事件捕获
事件冒泡:事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点


image.png

事件捕获:从不太具体的dom节点应该更早接收到事件,而具体的节点最后接收到事件(我们借用addEventListener来模拟事件捕获流)


image.png

DOM事件流:dom2事件规定事件流包含三个阶段"事件捕获/目标阶段/事件冒泡"首先发生的事件捕获为截获事件提供机会,然后实际目接收事件,最后一个阶段时事件冒泡阶段,在这个阶段对事件做出响应;dom事件流中,事件的目标在捕获阶段不会接收到事件,这意味着捕获阶段事件从document到ul停止,然后目标阶段事件在li上发生,并在事件处理中被堪称冒泡阶段的一部分,然后冒泡阶段发生事件又传回document


image.png

关于dom2事件处理程序:dom2事件定义了两个方法:addEventListener和removeEventListener他们都包含三个参数(1.处理事件的的方式click..2.事件处理函数(如果是删除函数必须是命名函数3.bool值为true为事件捕获阶段调用,默认为false事件冒泡阶段调用)dom2事件处理程序的好处时可以添加多个事件处理程序,事件处理会按照添加的顺序触发,addEventListenert添加的事件只能用removeEventListener来移除,这也意味着添加的匿名函数将无法移除
image.png
image.png

dom0的事件处理程序
image.png
image.png

二:事件委托
事件委托:利用事件冒泡。指定一个事件处理程序来管理某一类型的所有事件,dom需要由事件处理程序,我们可以直接给每个dom设事件处理程序,如果我们有10000个li添加相同的点击事件,我们可能会用for循环来遍历所有li,然后逐个给它们添加事件,js访问dom的操作越多。引起浏览器重绘与重排的次数也会增多,就会延长整个页面的交互就绪事件,这就是为什么性能优化的的主要思想是减少dom操作,这里如果采用事件委托,就会将所有的操作都放在js程序里。与dom的操作就只需要交互一次。这样就大大减少了与dom的操作,每个函数都是一个对象,是对象就会占用内存,对象越多,内存占用率就越大,自然性能就差了。
事件委托的原理:事件委托利用事件冒泡原理来实现,比如页面有这么一个节点树,div>ul>li,我们给li添加click事件那么这个事件就会一层一层向上执行,执行顺寻li>ul>div,也就是我们给最外面的div添加点击事件。那么里面的ul/li都会冒泡到最外层div,所以都会触发,这就是事件委托,委托他们的父级代为执行事件。
事件委托实例:


image.png

event对象提供了一个属性叫做target,返回事件的目标节点,我们称为事件源,也就是说target可以表示当前事件操作的dom,但不是真正操作dom,我们根据nodeName来判断节点名称
image.png

image.png

事件委托的另一个好处是js动态增加的新节点也会获得同类型的操作
image.png

三:js阻止事件冒泡和默认事件
w3c:e.stopPropagation
ie:window.event.cancelBubble = true
默认事件:是指目标元素的默认行为比如a标签会跳转链接 form会提交表单
w3c:e.preventDefault()
ie:window.event.returnValue = false
另外js中的return false也可以阻止默认行为jq中的return false既可以阻止默认行为也可以阻止冒泡
js学习(ECMAScript,DOM,BOM):https://www.jianshu.com/p/b7136540b379

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,117评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,963评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,897评论 0 240
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,805评论 0 203
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,208评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,535评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,797评论 2 311
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,493评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,215评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,477评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,988评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,325评论 2 252
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,971评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,055评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,807评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,544评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,455评论 2 266

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,099评论 1 45
  • 事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间。 DOM3级事件,规定了以下几类事件*UI事件:当用户与页面...
    Miss____Du阅读 1,464评论 0 8
  • js之事件机制 1、事件初探 1.1 js事件的概述 JavaScript事件:JavaScript是基于事件驱动...
    道无虚阅读 2,253评论 1 3
  • 转载:为了永久查看,我都cv 过来,省的原作者删除后找不到。 起因:1、这是前端面试的经典题型,要去找工作的小伙伴...
    七色烟火阅读 476评论 0 4
  • js事件流触发原理 DOM2.0模型将事件处理流程分为三个阶段:一、事件捕获阶段,二、事件目标阶段,三、事件起泡阶...
    金字笙调阅读 536评论 1 10