2.事件委托

本文通过一个生动的例子介绍了如何使用DOM事件委托来优化事件处理过程。讲述了事件冒泡原理及如何利用这一特性仅在目标元素上触发事件处理函数,而不是父元素。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

委托,顾名思义,就是一个人不想干啥事就把他交给另一个人办了呗
你需要掌握点DOM节点的知识
  • #####创建元素节点createElement
    • #####把一个元素xx追加到对象yy上 yy.appendChild( xx);
现在生成一个li节点,然后,把他追加给父元素ul,这样,ul里的孩子节点就有仨了

image.png

现在我们想,当点击每个li的时候,都能弹出对应li里面的内容

image.png

没错,他在点击第三个li的时候,并没有像我们想象的那样,输出内容。举个例子,就像一个家庭,本来有俩姑娘,但是父母还想要个儿子,于是他们通过试管婴儿要了个儿子,有一天,父母让孩子们出去玩,俩女儿都出去了,但是那个儿子不去,因为他一直觉得自己不是亲生的,是试管婴儿
那好,现在父母开始给小儿子讲生物了,他们告诉他试管婴儿只是受精卵是在试管里,发育的过程还是在母亲的子宫里,也就是说他还是他妈生出来的(给父元素ul绑定事件)

image.png

这样儿子就开开心心出去玩了

image.png

但此时,你点击li和ul都会输出内容,但是我不想让点击ul的时候输出,只是在点击li的时候才输出li的内容,咋办呢,判断一下,当前点击的事件源的标签名是不是li吧

image.png

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值