Web API中的Event

最新推荐文章于 2023-03-12 14:43:30 发布

天啦噜噜

最新推荐文章于 2023-03-12 14:43:30 发布

阅读量239

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45819246/article/details/109112241

版权

文章目录

一、Event是什么？
- 1.创建和触发自定义事件
二、事件冒泡和事件捕获
总结

一、Event是什么？

Event是事件接口，可以通过这个接口创建事件，并把它分配给目标元素。

1.创建和触发自定义事件

通过构造器Event创建了一个build事件，使用dispatchEvent将事件分配给elem元素，并监听事件。

<body>
    <div id = "container" style="height: 100px;width: 100px;background-color: black;">
    </div>
    <script>
        const event = new Event('build');
        const elem = document.getElementById('container')
        // Listen for the event.
        elem.addEventListener('build', function () {console.log('this is build')}, false);
        // Dispatch the event.
        elem.dispatchEvent(event);
    </script>
</body>

通过CustomEvent创建事件，可以添加更多自定义信息

        const event2 = new CustomEvent('build2', { detail: {myData:"hello"}});
        function eventHandler(e) {
            console.log('My data is: ' + e.detail.myData);
        }
        elem.addEventListener('build2', eventHandler)
        elem.dispatchEvent(event2);

运行结果

二、事件冒泡和事件捕获

1.产生原因

因为元素的嵌套，结构上重叠，事件可能会依次被触发，触发的顺序取决于事件冒泡和事件捕获在每一个元素上的设置情况。

2.事件冒泡

希望从子元素触发事件，并让祖先捕获该事件，顺序是由子到父。

使用：event.bubbles = true | false

将eventAwesome事件分发给textArea，其父元素Form能监听eventAwesome。

<body>
    <form>
        <textarea></textarea>
    </form>
    <script type="text/javascript" language="javascript">
        const form = document.querySelector('form');
        const textarea = document.querySelector('textarea');

        // Create a new event, allow bubbling, and provide any data you want to pass to the "detail" property
        const eventAwesome = new CustomEvent('awesome', {
            bubbles: true,
            detail: { text: () => textarea.value }
        });

        // The form element listens for the custom "awesome" event 
        // and then consoles the output of the passed text() method
        // e指的是eventAwesome事件
        form.addEventListener('awesome', e => console.log(e.detail.text()));
        // As the user types, the textarea inside the form dispatches/triggers the event to fire,
        // and uses itself as the starting point
        //e指的是input事件 e.target = <textarea></textarea>
        textarea.addEventListener('input', e => {e.target.dispatchEvent(eventAwesome);console.log(e.target)});

    </script>
</body>

3.事件委托

如果需要实现这样一个需求：点击li标签（li标签数量会改变），并显示其内容，该如何高效的进行事件绑定？

可以将事件绑定在li的父元素ul标签上，通过e.target获得具体的li标签。每次点击li标签,其父元素ul标签都会监听到并执行hide函数。

    <script>
        // Make a list
        var ul = document.createElement('ul');
        document.body.appendChild(ul);

        var li1 = document.createElement('li');
        var li2 = document.createElement('li');
        ul.appendChild(li1);
        ul.appendChild(li2);

        function hide(e) {
            // e.target 引用着 <li> 元素
            // 不像 e.currentTarget 引用着其父级的 <ul> 元素.
            e.target.style.visibility = 'hidden';
        }

        // 添加监听事件到列表，当每个 <li> 被点击的时候都会触发。
        ul.addEventListener('click', hide);
    </script>

总结

本文仅仅简单介绍Event的使用，具体的可以参考：Event——Web API接口

天啦噜噜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web API中的Event

文章目录一、Event是什么？1.创建和触发自定义事件二、事件冒泡和事件捕获1.产生原因2.事件冒泡3.事件委托总结一、Event是什么？Event是事件接口，可以通过这个接口创建事件，并把它分配给目标元素。结构上的重叠，事件处理函数可能会依次被触发，触发的顺序取决于事件冒泡和事件捕获在每一个元素上的设置情况。1.创建和触发自定义事件通过构造器Event创建了一个build事件，使用dispatchEvent将事件分配给elem元素，并监听事件。<body> <div.
复制链接

扫一扫