DOM2级事件

最新推荐文章于 2022-05-25 13:49:00 发布

[暂停使用]日行一善

最新推荐文章于 2022-05-25 13:49:00 发布

阅读量256

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_39571197/article/details/88096567

版权

前端专栏收录该内容

100 篇文章 0 订阅

订阅专栏

对象形式的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>

passive

[暂停使用]日行一善

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM2级事件

对象形式的handler、对象形式的EventListenerOptionswindow.addEventListener(type,handler,EventListenerOptions)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &...
复制链接

扫一扫