首页 > 试题广场 >

事件委托

[编程题]事件委托
  • 热度指数：20375 时间限制：C/C++ 3秒，其他语言6秒 空间限制：C/C++ 256M，其他语言512M
  • 算法知识视频讲解
请补全JavaScript代码，要求如下：
1. 给"ul"标签添加点击事件
2. 当点击某"li"标签时，该标签内容拼接"."符号。如：某"li"标签被点击时，该标签内容为".."
注意：
1. 必须使用DOM0级标准事件（onclick）
算法知识视频讲解
添加回答
HTML/CSS/JavaScript
虚心丶头像 虚心丶
事件委托  得父节点接受事件并且交由被点击的子节点进行处理
有一个很好的博客： 
// 补全代码
//获取事件的根节点 
let ulTags = document.getElementsByTagName('ul')[0]
//对根节点绑定事件  => 回调函数的参数为事件本身 因事件有taget 属性所以可以得知是那个子节点被点击
ulTags.addEventListener('click',(event)=>{
    //  兼容性判断
    let ev = event || window.event;
    var target = ev.target || ev.srcElement;
    //对点击的子节点进行处理
    if(target.nodeName.toLowerCase() == 'li'){
        target.innerHTML+='.';
    }
})
发表于 2021-12-01 19:11:58 回复(1)
HTML/CSS/JavaScript
__sgf__头像 __sgf__ 
<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
    	<ul>
            <li>.</li>
            <li>.</li>
            <li>.</li>
        </ul>

        <script type="text/javascript">
            // 补全代码
            let ul = document.querySelector('ul');
            ul.onclick = function (e) {
                console.log(e)
                e.target.innerText += '.'
            }
        </script>
    </body>
</html>

发表于 2022-01-10 16:54:15 回复(4)
N…头像 N… 
<script type="text/javascript">
            // 补全代码 不考虑兼容 粗糙解决
            document.getElementsByTagName('ul')[0].onclick=function(e){
                e.target.innerHTML+='.';                                                    
            }
        </script>

发表于 2022-01-09 13:21:31 回复(0)
HTML/CSS/JavaScript
矜持的微笑头像 矜持的微笑
  <script type="text/javascript">
          var ul=document.querySelector('ul'),
            lis=ul.children;
            for(var i=0;i<lis.length;i++){
           (function(i){
             lis[i].onclick=function(){
                 lis[i].innerHTML+='.'
             }  
           })(i)
                
            }
</script>
发表于 2021-12-25 14:23:14 回复(0)
牛客115198121号头像 牛客115198121号
发表于 2022-01-25 15:56:45 回复(0)
HTML/CSS/JavaScript
刚入门的小萌新头像 刚入门的小萌新
        <script type="text/javascript">
            // 补全代码
            var ul = document.getElementsByTagName("ul")[0];
            ul.onclick = function(event){
                event = event || window.event;
                event.target.innerHTML = ".."
            }
        </script>
发表于 2021-12-22 14:59:36 回复(0)
错把路灯当月光头像 错把路灯当月光 
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
       /* 填写样式 */
    </style>
</head>

<body>
    <ul>
            <li>.</li>
            <li>.</li>
            <li>.</li>
        </ul>
    <!-- 填写标签 -->
    <script type="text/javascript">
        // 填写JavaScript
        document.querySelector('ul').onclick = e => {
            if(e.target.tagName==='LI'){
                e.target.innerHTML+='.'
            }
}
    </script>
</body>

</html>

发表于 2024-03-26 14:52:23 回复(0)
Mancuoj头像 Mancuoj 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <style>
      /* 填写样式 */
    </style>
  </head>

  <body>
    <ul>
      <li>.</li>
      <li>.</li>
      <li>.</li>
    </ul>
    <!-- 填写标签 -->
    <script type="text/javascript">
      // 填写JavaScript
      document.querySelector('ul').onclick = (event) => {
        event.target.innerText += '.'
      }
    </script>
  </body>
</html>
发表于 2024-03-17 21:04:41 回复(0)
猪胖胖头像 猪胖胖
https://codesandbox.io/s/crimson-wildflower-gh94n3?file=/index.html
发表于 2023-07-09 16:58:34 回复(0)
anjoht头像 anjoht 
// 补全代码
    var ulN = document.querySelector("ul")
    ulN.onclick = function (e) {
      e = event || window.event;
      e.target.innerText += ".";
    }

发表于 2023-06-28 16:47:12 回复(0)
码上到岗头像 码上到岗
let uls = document.getElementByTagName("ul")[0];
uls.onclick = function(event){
    let a = event.target;
    if(a.tagName.toLowerCase() === 'li'){
        a.innerText += '.';
}
}
发表于 2023-02-01 12:27:05 回复(0)
HTML/CSS/JavaScript
尐殀头像 尐殀
为什么不用Jquery:$("ul").on("click", (e) => {
                $(e.target).html("..")
            })
发表于 2022-12-30 18:31:13 回复(0)
HTML/CSS/JavaScript
释怀鸟头像 释怀鸟
<script type="text/javascript">
            document.querySelectorAll("li").forEach((item)=>{
                // 获取li节点内容然后forEach循环
                item.onclick = ()=>{
                    // 绑定点击事件
                    item.innerHTML = ".."
                    // 点击事件结果
                }
            })
</script>
发表于 2022-11-29 20:02:43 回复(0)
HTML/CSS/JavaScript
咸鱼鱼鱼鱼鱼鱼鱼鱼头像 咸鱼鱼鱼鱼鱼鱼鱼鱼
来点花的
<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
        <ul  onclick="dofunction()">
            <li>.</li>
            <li>.</li>
            <li>.</li>
        </ul>

        <script type="text/javascript">
            // 补全代码
      function dofunction(){
   arguments.callee.caller.arguments[0].target.innerHTML +='.'
           }
        </script>
    </body>
</html>
发表于 2022-11-12 11:31:30 回复(0)
HTML/CSS/JavaScript
前端中白头像 前端中白
// 补全代码--改变内容使用innerText
        var ul = document.querySelector('ul')
        ul.onclick = function (e) {
            console.log(e.target);
            e.target.innerText += "."
        }
发表于 2022-11-09 20:03:30 回复(0)
HTML/CSS/JavaScript
geekwaner头像 geekwaner
      const ul = document.querySelector('ul')  //获取ul的dom
        ul.onclick = function (event) {
            //判断是否点击到li标签  
            if (event.target.nodeName === 'LI') {
                event.target.innerHTML += '.'
            }
        }
发表于 2022-10-16 20:55:53 回复(0)
HTML/CSS/JavaScript
牛客977672806号头像 牛客977672806号
1.首先给ul添加点击事件   注意DOM0级事件，就是onClick
2.利用冒泡事件给ul添加的事件，点击子元素的时候可以触发
发表于 2022-09-21 19:39:57 回复(0)
初来乍到小牛牛头像 初来乍到小牛牛 
let ul = document.querySelector('ul')
ul.onclick = function (e) {
    if (e.target.tagName === 'LI') {
          e.target.innerHTML = e.target.innerHTML + '.'
    }
}

发表于 2022-09-21 00:38:28 回复(0)
HTML/CSS/JavaScript
空瞳_头像 空瞳_
  var li = document.getElementsByTagName('li')
            //  document.getElementsByTagName 获取的不是数组，使用 Array.from 转成数组
            var arr = Array.from(li)
            arr.forEach(item => {
                item.onclick = function(){
                   item.innerText = '..'
                }
            });
发表于 2022-07-28 21:06:52 回复(0)
HTML/CSS/JavaScript
怯场怪头像 怯场怪
以下是个人理解参考网上资料：
事件流里面有 三个特殊点：冒泡阶段 ，捕获阶段， 目标阶段
        1.冒泡：简单理解就是水泡从水底冒泡到水面的过程，  即 事件的触发反应从  当前点击的元素 一路冒泡到最外层，一步步触发沿途元素的事件（如果沿途元素有设置事件的话）
        2.捕获：和冒泡是相反的，可以理解成 我要抓水底的鱼，从水面撒网一直沉到底部（好吧，比喻的不是很恰当），总之流程和冒泡是相反的
        3.目标阶段：         
        与上面三个阶段相关的就是 防止冒泡、防止捕获的方法（preventXXX 、stopXX）等等...这些知识点常考，可以去百度
        
        事件委托，实际上就是事件冒泡的一个应用场景，将当前点击的子元素的触发事件 交给父元素代理，  
        好处：一个父元素代理了所有子元素的处理事件，遇到数量多的子元素可以一键代理；同时还能保证新加进来 新创建的子元素也能拥有代理的触发事件，动态帮子元素绑定
        
        代码如下：
        <!DOCTYPE html>
        <html>
            <head>
                <meta charset=utf-8>
            </head>
            <body>
                <ul>
                    <li>.</li>
                    <li>.</li>
                    <li>.</li>
                </ul>
                <script type="text/javascript">
                    //事件委托，将li的点击事件冒泡给 上一级父元素，通过父元素代理处理点击事件
                    //通过function(e)中的e.target来获取当前目标对象，因为要委托，所以li委托的父元素就是ul， 然后处理 只需要每次点击都加上一个 '.'（用innerText来获取目标文本内容）
        
                    document.querySelector('ul').onclick =function(e){
                        //兼容性，不同的浏览器版本不一样，处理方式不一样
                        //IE 和chorme等浏览器不同，IE8要用window获取event对象
                        //IE8也无法获取e.target 当前对象，想用到就得做兼容
                        //据说有些国企公司还在用IE8及其更老的版本，为的是稳定
                        //所以这里提前做兼容是可以的
                          var event = e || window.event;
                          var target = event.target || event.srcElement;
        
                          event.target.innerText +='.'
                    } 
                </script>
            </body>
        </html>
        
        //由于题目要求用DOM0级别的  onclick  所以这里不要用addEventListener，其实 测试了一下是可以用的,做法大致一样，换了个皮而已
         document.querySelector('ul').addEventListener("click", function(e){
                          var event = e || window.event;
                          var target = event.target || event.srcElement;
                          event.target.innerText +='.'
          })
发表于 2022-07-08 13:42:41 回复(0)
提交观点

问题信息

难度：
28条回答 412浏览

热门推荐

通过挑战的用户

查看代码

相关试题

扫一扫，把题目装进口袋

求职之前，先上牛客

扫描二维码，进入QQ群

扫描二维码，关注牛客公众号