Web API中的Event

天啦嚕嚕發表於2020-10-16
WebAPI

文章目錄

一、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介面

相關文章