关于事件代理的小问题
来源：2-3 为搜索框添加功能--事件代理和显示隐藏下拉层
键盘f11
2020-10-27 16:05:04
# 具体遇到的问题
$layer.on('click','search-layer-item',function(){
$input.val($(this).html());
$input.parents('form').submit();
})
老师，我想咨询一下上述代码，如视频中所说的，如果对于每个搜索后的提示内容进行事件绑定，会影响内存，和网页的运行速度（假设绑定的事件有数千个或者是数万个），
所以使用到了事件代理，那么为什么事件代理的层级顺序是往上代理的呢？（问题是往上代理的话，父类没有要代理的事件呀？我们需要代理的不就是search-layer-item？就是说点击li标签的时候，触发事件，是由li往上的父类去触发的？是否可以理解，父类就是指search-layer 就是li的父类标签ul呢？）
<div id="header-search" class="search fl">
<form action="https://s.taobao.com/search" class="search-form">
<input type="text" name="q" placeholder="灵魂没事一元抢" autocomplete="off" class="search-inputbox fl" />
<input type="submit" value="搜索" class="search-btn btn fl" />
</form>
<ul class="search-layer">
<li class="search-layer-item text-ellipsis">111</li>
<li class="search-layer-item text-ellipsis">111</li>
<li class="search-layer-item text-ellipsis">111</li>
</ul>
</div>
如上述代码所示，当点击onclick事件触发以后，代理的是search-layer-item往上的父类事件，那这样子的事件代理我感觉和事件绑定有什么区别呢？是否可以理解事件绑定的是逐个的li标签下的onclick事件，而事件代理绑定的是li往上的父类，是单个的类，整个类里面触发的事件，比逐个的li标签是少的，从数目上。
$input.val($(this).html());中的this指代的是search-layer-item，也就是搜索以后，显示的每个li标签里面的内容，那这个val()是什么意思呢？老师 ，$input.val($(this).html());这句话是否是指，onclick点击以后使得li标签里面的内容为空呢？html为空？
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码，切记添加代码注释（请勿截图）
在这里输入代码，可通过选择【代码语言】突出显示
1回答
-
同学你好，针对问题进行回复：
1、事件代理，是利用的事件冒泡机制，事件冒泡是从当前元素，往上级元素传播的，所以要将事件代理到父级元素上。
2、 我们实际上想要监听的是search-layer-item的点击事件，由于search-layer-item有很多，考虑浏览器的性能问题，我们可以利用事件代理，将事件绑定在search-layer-item的父元素search-layer上，即如下代码就是给search-layer绑定click事件：
3、因此，如下理解是正确的：
4、事件代理其实也是事件绑定，只是，它是将事件绑定在了父元素上，而不是直接绑定在触发事件的元素上。
5、如下理解正确：
6、$input.val($(this).html());中的this指代的是当前触发事件的li标签（search-layer-item）；
7、这段代码中的val() 是用来获取被选元素的值。
8、$input.val($(this).html());这段代码的意思是：获取当前触发的li的内容，让获取的内容在input中显示。
可以参考如下代码：
效果：
完整代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style> </head> <body> <ul> <li class="lis">我是内容1</li> <li class="lis">我是内容2</li> <li class="lis">我是内容3</li> </ul> <input type="text"> </body> <script src="jquery.js"></script> <script> var $input = $('input'); $('ul').on('click', ".lis", function() { $input.val($(this).html()); }) </script> </html>祝学习愉快！
0
相似问题