为了账号安全，请及时绑定邮箱和手机立即绑定

课程

/前端开发

/jQuery

/jQuery基础(三)—事件篇

冒泡不是从子元素往父元素冒泡么 怎么给父元素绑定click 子元素有行为

冒泡不是从子元素往父元素冒泡么 怎么给父元素绑定click 子元素有行为

念念不忘1223

2016-06-08

源自：jQuery基础(三)—事件篇  6-1

关注问题 我要回答
4597
操作
收起

正在回答

5 回答

慕移动7130648
2019-12-31

从冒泡字面理解，是从有的到无的传播过程，但是在代码编写中就不能这么认为了，制定规则的人事将事件绑定在祖先元素上，然后让后代给祖先冒泡，规则就是这样只能这样理解

0 回复 有任何疑惑可以回复我~
收起回答
慕粉3686312
2016-09-07

因为冒泡机制，点击li元素的时候冒泡到父元素ul，而ul绑定了事件，触发了函数，就影响到了li元素

0 回复 有任何疑惑可以回复我~
收起回答
子涵_program
2016-07-12

对于点击li弹出不同内容，是因为event对象特有的target.textContent属性。虽然你都是冒泡触发ul。但是到底时那个li被点击了，然后冒泡到ul上触发ul绑定的事件的，那么这个event.target就指向具体那个li。相当于li和ul都被点击了，但是ul有事件被触发，而li有内在的东西被event.target这个属性获得并经过alter输出来。你是工作了的还是正在学习

2 回复 有任何疑惑可以回复我~
收起回答
#1

我是卖报的小行家0

您好 我想问一个问题可以吗 这样我不仅仅是点击li可以触发事件 我点击ul空白处也直接触发了事件但是这个时候对象就是ul了 感觉目标就不清楚了很混乱啊
2016-07-13 回复 有任何疑惑可以回复我~
#2

子涵_program 回复 我是卖报的小行家0

因为默认margin=0.你点击ul里面的空白处，都会点击到其中一个li，因为每个li都占满了ul的内部。当然如果设置margin，点击margin外的空白处理论上就是点击了ul。我没实践过不知道对不对
2016-07-13 回复 有任何疑惑可以回复我~
#3

我是卖报的小行家0 回复 子涵_program

ooo 好的 谢谢哈
2016-07-16 回复 有任何疑惑可以回复我~
子涵_program
2016-07-12

这里的例子这样理解：在ul绑定要给点击事件。当我click <li>时，li上没有事件，但是由于冒泡机制的存在，点击li就相当于ul，这也是从子元素往父元素冒泡。用event对象特有的target.textContent属性来获取触发此事件的具体的li元素的文本。

0 回复 有任何疑惑可以回复我~
收起回答
#1

Cassie_yu

能问一下，子元素的内部是不是也是父元素的内部呢？还是说两个是独立的空间呢？ 因为子元素并没有click事件，那么点击子元素导致ul上的click事件触发，可不可以理解为 因为li在ul的内部，所以点击li也相当于点击了ul呢？
2016-07-12 回复 有任何疑惑可以回复我~
#2

子涵_program 回复 Cassie_yu

冒泡机制里，一个元素下面的所有后代元素都会触发祖先元素的事件，所有你的理解也可以的。也就是说ul里面的不管时子元素还是孙子元素。当点击li或者li里面的元素时，都会默认同时点击了ul和ul的祖先元素。而刚好ul绑定有事件。所有触发ul的事件
2016-07-12 回复 有任何疑惑可以回复我~
#3

Cassie_yu 回复 子涵_program

但是我又觉得如果这样理解的话，我就又不能理解为什么点击li的时候会弹出不同的内容了，因为其实都是点击了ul嘛~~
2016-07-12 回复 有任何疑惑可以回复我~
#4

子涵_program 回复 Cassie_yu

对于点击li弹出不同内容，是因为event对象特有的target.textContent属性。虽然你都是冒泡触发ul。但是到底时那个li被点击了，然后冒泡到ul上触发ul绑定的事件的，那么这个event.target就指向具体那个li。相当于li和ul都被点击了，但是ul有事件被触发，而li有内在的东西被event.target这个属性获得并经过alter输出来。你是工作了的还是正在学习
2016-07-12 回复 有任何疑惑可以回复我~
#5

Cassie_yu 回复 子涵_program

好吧 我应该是把this和target.textContent弄混了 谢啦~~
2016-07-12 回复 有任何疑惑可以回复我~
#6

子涵_program 回复 Cassie_yu

你是初学者吗？还是正在做着前端？
2016-07-12 回复 有任何疑惑可以回复我~
#7

panmc2 回复 Cassie_yu

弹出内容的函数是 function(e){ alert('触发的元素是内容是: ' + e.target.textContent) } 这个函数的功能就是弹出“事件对象”的文本内容，因为鼠标点击的对象是不同的，所以弹出的每个“事件对象”的文本内容也不同。
2016-07-21 回复 有任何疑惑可以回复我~
#8

铃铛3 回复 Cassie_yu

应该是点击的是li只是由li冒泡到了ul 触发了事件
2016-08-11 回复 有任何疑惑可以回复我~
查看5条回复
y0n9
2016-06-10

这结果不正是事件冒泡机制的最终目的么~当一个父元素下的多个子元素要表现出相同的效果的时候,利用冒泡机制给父元素绑定事件,以后你只要点击子元素,都会冒泡到父元素,从而利用父元素绑定的事件~这样就不用给每个子元素都去进行绑定,减少了代码冗余呀~~

17 回复 有任何疑惑可以回复我~
收起回答

举报

0/150
提交
取消
jQuery基础(三)—事件篇
  • 参与学习       89997    人
  • 解答问题       625    个

jQuery第三阶段开启事件修炼，掌握对页面进行交互的操作

进入课程

本课相似问答

4 回答event.stopPropagation()没有阻止父级元素的冒泡事件呢？

3 回答为什么直接用本标签绑定事件不行?一定要用父元素或祖先元素绑定才能起作用?

3 回答on绑定click事件和直接给元素绑定click事件有什么区别？

1 回答这个委托机制一定是从最里面的那个元素开始向上冒泡吗

2 回答focusin()在元素包含的元素中产生？？？？？
搜索更多本课相关问答

冒泡不是从子元素往父元素冒泡么 怎么给父元素绑定click 子元素有行为

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信