美文网首页
Day20 事件代理/委托

Day20 事件代理/委托

作者: 反复练习的阿离很笨吧 | 来源:发表于2019-10-31 20:54 被阅读0次
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>IFE ECMAScript</title>
    <style>
        .palette {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .palette li {
            width: 40px;
            height: 40px;
            border: 1px solid #000;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <ul class="palette">
        <li style="background-color:crimson"></li>
        <li style="background-color:bisque"></li>
        <li style="background-color:blueviolet"></li>
        <li style="background-color:coral"></li>
        <li style="background-color:chartreuse"></li>
        <li style="background-color:darkolivegreen"></li>
        <li style="background-color:cyan"></li>
        <li style="background-color:#194738"></li>
    </ul>

    <p class="color-picker"></p>

    <script>
        // var list = document.querySelectorAll("li");
        // for (var i = i = 0, len = list.length; i < len; i++) {
        //     list[i].onclick = function(e) {
        //         var t = e.target;
        //         var c = t.target.style.backgroundColor;
        //         var p = document.getElementsByClassName("color-picker")[0]
        //         p.innerHTML = c;
        //         p.style.color = c;

        //     }
        // }


        var ulNode = document.getElementsByTagName('ul')[0];
        ulNode.onclick = function (e) {
            var t = e.target;
            var c = t.style.backgroundColor;
            var p = document.getElementsByClassName("color-picker")[0];
            p.innerHTML = c;
            p.style.color = c;
        };

        // window.onload = function () {
        //     var ulNode = document.getElementsByClassName("palette")[0];
        //     var p = document.getElementsByClassName("color-picker")[0];
        //     ulNode.addEventListener('click', function (e) {
        //         var t = e.target;
        //         var c = t.style.backgroundColor;
        //         if (t && t.nodeName.toUpperCase() == "LI") {/*判断目标事件是否为li*/
        //             p.innerHTML = c;
        //             p.style.color = c;
        //         }
        //     }, false);
        // };
    </script>
</body>

</html>

可以看到,匿名函数里都是一样的,只是把绑定在li标签的事件,绑在了它的父元素ul上。

坑:
把getElementsByTagName写成(vscode提示成)getElementsByName,一直在报错Uncaught TypeError: Cannot set property 'onclick' of undefined

相关文章

  • Day20 事件代理/委托

    可以看到,匿名函数里都是一样的,只是把绑定在li标签的事件,绑在了它的父元素ul上。 坑:把getElements...

  • 概念

    事件委托,事件代理 事件代理又称之为事件委托。是JavaScript中常用绑定事件的常用技巧。顾名思义,“事件代理...

  • 前端常见面试题(十一)@郝晨光

    什么是事件委托?为什么要用事件委托? 什么是事件委托? 事件委托,又称事件代理,就是将元素的事件处理交由父元素或者...

  • JS写事件代理

    js中的事件委托或是事件代理详解

  • 事件委托

    事件委托 什么是事件委托(事件代理): 事件委托就是利用事件冒泡的原理,将事件注册到父元素上,减少子元素的事件注册...

  • 事件委托(事件代理)

    利用事件的冒泡传播机制(触发当前元素的某个行为,它父级所有的相关行为都会被触发),如果一个容器中很多元素需要绑定事...

  • 事件委托(事件代理)

    链接地址:http://www.cnblogs.com/liugang-vip/p/5616484.htmlhtt...

  • 事件代理/事件委托

    利用事件冒泡机制,通过设置一个事件处理程序,来管理某一类型的所有事件。(例如:取快递、ul-li操作) 1. 取快...

  • 事件委托/事件代理

    什么是事件委托/事件代理?利用事件的冒泡传播机制(触发当前元素的某一个行为,它父级所有元素相关行为都会被触发),如...

  • 事件代理(事件委托)

    事件流 事件从页面中接收事件的顺序 事件捕获 从window对象传到目标节点(上层到下层),成为捕获阶段 事件冒泡...

网友评论

      本文标题:Day20 事件代理/委托

      本文链接:https://www.haomeiwen.com/subject/cdcxbctx.html