事件绑定

作者: 杰克_王_ | 来源:发表于2019-10-20 14:11 被阅读0次

JS 事件监听、事件委托2018-07-10
JS-事件绑定
事件绑定、事件冒泡与捕获
025 JS事件
IE的attachEvent
JavaScript事件
js事件
绑定事件自定义事件事件冒泡
jQuery事件
2018-10-18

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>事件绑定</title>
    <style>
        div {
            border: 5px red solid;
            margin-bottom: 5px;
        }

        button {
            margin-bottom: 5px;
        }
    </style>
</head>

<body>
    <button onclick="handlerClick()">通过 onclick 属性直接绑定事件</button>
    <br>
    <button id="btn">通过 id 获取html元素，使用 onclick 属性绑定事件</button>
    <br>

    <div id="parentDelegate">
        <button data-event="event1">用事件委托的方式绑定事件1</button>
        <button data-event="event2">用事件委托的方式绑定事件2</button>
        通过 id 获取父级元素的方式绑定事件
    </div>

    <div class="parentDelegate">
        <button data-event="event1">用事件委托的方式绑定事件1</button>
        <button data-event="event2">用事件委托的方式绑定事件2</button>
        通过 class 获取父级元素的方式绑定事件
    </div>
    <br>
</body>

<script>
    function handlerClick() {
        console.log("--------handlerClick--------");
        console.log(this);
        console.log(Array.from(arguments));
    }

    document.getElementById("btn").onclick = handlerClick;

    // 事件委托，利用冒泡原理，把事件添加到父元素上，触发执行

    // 1. 通过ID获取父级元素的方式绑定事件
    document.getElementById("parentDelegate").addEventListener("click", function (e) {
        // debugger;
        console.log("--------parentDelegate for ID--------");
        console.log("this: ", this.valueOf());

        console.log('arguments:', Array.from(arguments).valueOf());

        var target = e.target,
            attributeName = "data-event",
            defaultAttributeValue = "";
        console.log("event target: ", e.target);

        /*
        es6中的${}——用于字符串拼接
        https://blog.csdn.net/weixin_43207791/article/details/82740557
        */
        var attributeValue = target.getAttribute(attributeName) || defaultAttributeValue;
        switch (attributeValue.toLowerCase()) {
            case "event1":
                console.log(`${attributeValue}被点击`)
                break;
            case "event2":
                console.log(`${attributeValue}被点击`)
                break;
            default:
                console.log("父级元素或未知子元素被点击")
                break;
        }

        console.log("");
    });

    // 2. 通过class获取父级元素的方式绑定事件
    for (const parent of document.getElementsByClassName("parentDelegate")) {
        parent.addEventListener("click", function (e) {
            // debugger;
            console.log("--------parentDelegate for class--------");
            console.log("this: ", this.valueOf());

            console.log('arguments:', Array.from(arguments).valueOf());

            var target = e.target,
                attributeName = "data-event",
                defaultAttributeValue = "";
            console.log("event target: ", e.target);

            /*
            es6中的${}——用于字符串拼接
            https://blog.csdn.net/weixin_43207791/article/details/82740557
            */
            var attributeValue = target.getAttribute(attributeName) || defaultAttributeValue;
            switch (attributeValue.toLowerCase()) {
                case "event1":
                    console.log(`${attributeValue}被点击`)
                    break;
                case "event2":
                    console.log(`${attributeValue}被点击`)
                    break;
                default:
                    console.log("父级元素或未知子元素被点击")
                    break;
            }

            console.log("");
        });
    }
</script>

</html>