分享興趣，傳播快樂，
增長見聞，留下美好！
親愛的您，這裡是LearningYard新學苑。
今天小編為你帶來話說前端26-事件監聽，
歡迎您的訪問！
Shareinterests, spread happiness,
increaseknowledge, and leave beautiful!
Dearyou, this is LearningYard Academy.
Today,the editor brings you the knowledge of using flexsim software ,
welcomeyour visit!
下面小編將從實體的創建與實體的連接兩部分進行介紹。
The following Xiaobian will introduce how to create entities and connect entities.
事件監聽：給元素添加事件，稱為註冊事件或者綁定事件。註冊事件有兩種方式：傳統方式和方法監聽註冊方式。
Event monitoring: adding events to elements, called registration events or binding events. There are two ways to register events: the traditional way and the method of monitoring registration.
事件監聽和普通事件的區別：
我們之前使用普通的綁定事件感覺和事件監聽事件都能達到同樣的效果，那麼我們在這裡為什麼要學習事件監聽呢，並事件監聽也是我們最為推薦的寫法。這裡就要說到這兩者的區別了。
The difference between event monitoring and ordinary events:
Before, we used the common binding event feeling and event monitoring to achieve the same effect, so why should we learn event monitoring here, and event monitoring is also our most recommended writing method. Here's the difference between the two.
這兩者除了寫法有明顯的區別之外，當然也是有其他的區別的，比如當我們在給一個對象綁定事件的時候,普通事件綁定同一事件寫多個的時候會被覆蓋。
但是通過事件監聽的方式去綁定事件的話，就是不會產生這個覆蓋。
Apart from the obvious differences in writing, there are other differences. For example, when we bind an event to an object, the common event will be overwritten when the same event is bound to more than one.
However, if you bind events by means of event monitoring, this coverage will not occur.
當然還有的區別就是，普通事件是沒辦法獲取事件捕獲；而事件監聽是可以捕獲到的。(事件流)
事件的解綁：
傳統方式的解綁方式：target.onclick = null;
事件監聽方式解綁：target.removeEventListener(『type』，function，useCapture )
Another difference, of course, is that there is no way to capture ordinary events; And event monitoring can be captured. (event flow)
Unbinding of events:
Traditional unbinding method: target.onclick = null;
Unbinding the event monitoring mode: target.removeeventlistener ('type', function, useCapture)
其中在事件監聽事件的解綁要注意：
綁定事件寫的時候有幾個參數，那麼解綁事件的時候也是要把參數對應起來，否則就是不起作用的。
Among them, attention should be paid to the unbinding of event monitoring events:
When the binding event is written, there are several parameters, so when unbinding the event, the parameters should also be corresponding, otherwise it will not work.
DOM事件流：
事件流：當事件發生時，會在發生事件的元素節點與DOM樹根節點之間按照特定的順序進行傳播， 這個過程稱之為事件流。
（通俗易懂的來說就是當頁面觸發一個事件時，會按照一定的順序來響應事件，事件的響應過程稱為事件流。）
DOM event stream:
Event: When an event occurs, it will be propagated between the element node where the event occurs and the DOM root node in a specific order. This process is called event flow.
(In plain English, when a page triggers an event, it will respond to the event in a certain order. The response process of the event is called event flow. )
DOM事件流分為3個階段：
捕獲階段
當前目標階段
冒泡階段
DOM event flow is divided into 3 stages:
Capture stage
Current target stage
Bubble stage
事件代理：
為什麼我們在這裡需要講這個事件冒泡和事件捕獲呢，究其原因還是因為使用事件冒泡可以在某在情況下能夠給我們很大的便利。就是事件代理。
事件代理：就是給許多子元素註冊相同事件時，儘量不要給每個字元素綁定事件，會消耗性能。可以考慮用事件代理，給其父元素註冊事件，如此便可提高性能。
Event agent:
Why do we need to talk about this event bubbling and event capture here? The reason is that using event bubbling can give us great convenience in certain situations. Is the event agent.
Event: When registering the same event for many sub-elements, try not to bind the event to each word element, which will consume performance. You can consider using an event proxy to register events for its parent elements, which can improve performance.
今天的分享就到這裡了，
如果您對文章有獨特的想法，歡迎給我們留言。
讓我們相約明天，祝您今天過得開心快樂！
That'sit for today's sharing.
If you have a unique idea about the article.
please leave us a message.
Let us meet tomorrow，
I wish you a happy day today!
翻譯：百度翻譯
參考資料：百度百科
聲明：本文由LearningYard新學苑原創，如有侵權，請聯繫刪除！
文案&排版|李仕陽
審核|維安