js中事件委托

最新推荐文章于 2024-08-09 16:54:24 发布

我是打工人

最新推荐文章于 2024-08-09 16:54:24 发布

阅读量504

点赞数 1

本文链接：https://blog.csdn.net/szydqq/article/details/125810992

版权

javascript 前端

1.事件委托：把事件委托给别人干

事件委托的本质史依赖于事件冒泡

事件委托的好处：

①场景1:批量绑定若干子元素的事件,可以大大提高程序绑定事件的效率

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
</body>

<script>
 var oUl = document.querySelector("ul");

    oUl.onclick = function(evt) {
        // 委托中，被被点击的元素不是this
        // this是父元素
        // this.style.backgroundColor = "yellow";

        // 如何获取真实的操作元素
        var e = evt || event;
        // target被操作的真实元素
        var target = e.target || e.srcElement;
        // tagName操作元素的名字，且为大写
        console.log(target.tagName);

        if (target.tagName == "LI") {
            target.style.backgroundColor = "yellow";
        }
    }
</script>

效果图：

②场景2：为未来添加的子元素提前绑定事件

<body>
    <input type="text">
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
    </ul>
    <button>添加</button>
</body>
<script>
var oBtn = document.querySelector("button");
    var oUl = document.querySelector("ul");
    var oInput = document.querySelector("input");

    oUl.addEventListener("mouseover", function(evt) {
        var e = evt || event;

        var target = e.target || e.srcElement;

        if (target.tagName == "LI") {
            target.style.backgroundColor = 'greenyellow';
        }
    });

    oUl.addEventListener("mouseout", function(evt) {
        var e = evt || event;

        var target = e.target || e.srcElement;

        if (target.tagName == "LI") {
            target.style.backgroundColor = '';
        }
    });

    oBtn.onclick = function() {
        if (oInput.value != "") {
            var oLi = document.createElement("li");
            oLi.innerHTML = oInput.value;
            oInput.value = "";
            oUl.appendChild(oLi);
        }
    }
</script>

效果图：