前端学习第三十更

                                        EVENT下


1、事件的传播

这个就叫做事件的传播:

当元素触发一个事件的时候,其父元素也会触发相同的事件,父元素的父元素也会触发相同的事件

就像上面的图片一样

点击在红色盒子上的时候,会触发红色盒子的点击事件

也是点击在了粉色的盒子上,也会触发粉色盒子的点击事件

也是点击在了body 上,也会触发 body 的点击事件

也是点击在了html 上,也会触发 html 的点击事件

也是点击在了document 上,也会触发 document 的点击事件

也是点击在了window 上,也会触发 window 的点击事件

也就是说,页面上任何一个元素触发事件,都会一层一层最终导致window 的相同事件触发,前提是各层级元素得有注册相同的事件,不然不会触发

在事件传播的过程中,有一些注意的点:

只会传播同类事件

只会从点击元素开始按照html 的结构逐层向上元素的事件会被触发

内部元素不管有没有该事件,只要上层元素有该事件,那么上层元素的事件就会被触发

2、冒泡、捕获、目标

目标

你是点击在哪个元素身上了,那么这个事件的目标就是什么

冒泡

就是从事件目标的事件处理函数开始,依次向外,直到window 的事件处理函数触发

也就是从下向上的执行事件处理函数

捕获

就是从window 的事件处理函数开始,依次向内,只要事件 目标 的事件处理函数执行

也就是从上向下的执行事件处理函数

3、事件委托

就是把我要做的事情委托给别人来做

因为我们的冒泡机制,点击子元素的时候,也会同步触发父元素的相同事件

所以我们就可以把子元素的事件委托给父元素来做

4、事件触发

点击子元素的时候,不管子元素有没有点击事件,只要父元素有点击事件,那么就可以触发父元素的点击事件

target

target 这个属性是事件对象里面的属性,表示你点击的目标

当你触发点击事件的时候,你点击在哪个元素上,target 就是哪个元素

这个target 也不兼容,在 IE 下要使用 srcElement

委托

这个时候,当我们点击li 的时候,也可以触发 ul 的点事件

并且在事件内不,我们也可以拿到你点击的到底是ul 还是 li

这个时候,我们就可以把li 的事件委托给 ul 来做

5、默认行为

默认行为,就是不用我们注册,它自己就存在的事情

不需要我们注册就能实现的事情,我们叫做默认事件

阻止默认行为

有的时候,我们不希望浏览器执行默认事件

比如我给a 标签绑定了一个点击事件,我点击你的时候希望你能告诉我你的地址是什么

而不是直接跳转链接

那么我们就要把a 标签原先的默认事件阻止,不让他执行默认事件

我们有两个方法来阻止默认事件

e.preventDefault() : 非 IE 使用

e.returnValue = false:IE 使用

我们阻止默认事件的时候也要写一个兼容的写法:

try{

e.preventDefault() 

}catch(error){

e.returnValue = false

}

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

推荐阅读更多精彩内容