DOM2级事件

对象形式的handler、对象形式的EventListenerOptions

window.addEventListener(type,handler,EventListenerOptions)
<!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>Document</title>
    <style>
        [hide] {
            display: none;
        }
    </style>
</head>

<body>
    <h1>
        <a id="aHello" href="#hello">hello</a>
    </h1>
    <button name="submit">提交<span hide>*</span></button>
    <button name="warning">警告<span hide>*</span></button>
    <button name="delete">删除<span hide>*</span></button>
    <button name="confirm">确定<span hide>*</span></button>
    <script>
        // 特性一，对象形式的第三个参数 {capture,once,passive}
        aHello.addEventListener('click', function () {
            console.log(this.textContent);
        });
        window.addEventListener('click', function otherHandler1() {
            console.log('otherHandler1');
        }, true); // useCapture 捕获true、冒泡false(默认)
        window.addEventListener('click', function (evt) {
            console.log('我只触发一次，开启passive时观察锚点');
            evt.preventDefault();
        }, {
                capture: true, // 同useCapture
                once: true,
                passive: true, // 被动模式，提升性能，
                /**
                 * 核心原理：内部无法使用evt.preventDefault()
                 * 浏览器不需要再等待回调执行完成之后，才执行默认行为。
                 * 抛出错误：Unable to preventDefault inside passive event listener invocation.
                 */
            }
        );
        // 特性二，对象形式的handler
        window.addEventListener('click', {
            handleEvent: function entry(evt) {
                if (evt.target.nodeName.toUpperCase() !== 'BUTTON') return;
                let handler = this[evt.target.name]; // 'on' + evt.target.name
                if (handler) {
                    handler.call(event.target, evt);
                }
            },
            delete(evt) {
                console.log(this.textContent, this.innerText, this.innerHTML);
                console.log(this.nodeValue); // null，因为只能用于文本节点
                console.log(this.childNodes[0].nodeValue); // button标签里，第一个文本节点
                this.textContent += 1;
            },
            confirm(evt) {
                // innerText会受样式影响，textContent不会
                console.log(this.textContent, this.innerText, this.innerHTML);
                console.log(this.nodeValue); // null，因为只能用于文本节点
                console.log(this.childNodes[0].nodeValue); // button标签里，第一个文本节点
                this.textContent += 1;
            },
        });
    </script>
</body>

</html>
猜你喜欢
