最近幾個月，關於最佳JavaScript事件處理的重大討論。 Google的JSACTION庫和即將推出的Ecmascript 7 Object.Observe（）方法（在Chrome 36和Node.js Harmony中已經支持）為這場辯論加劇了這一辯論。 本文探討了各種事件處理模式，權衡了它們的優勢和缺點。
>
密鑰點：
>- > JSACTION庫：該Google庫將事件從其管理中刪除邏輯，部分將其轉移到HTML。 這旨在減輕特定瀏覽器的錯誤，通過減少全局範圍污染並最大程度地減少內存洩漏來提高性能。
>
object.observe（）方法：ecmascript 7的一部分，此方法使本機觀察對像變化，簡化了發布者/訂閱者模式對於反應性編程至關重要。 - >
>聲明框架（角，反應，ractive）：這些框架強制執行MVC模式，將數據結合和事件處理直接集成到DOM元素中，以增強可維護性和性能。
>- 事件處理進化：傳統的內聯事件處理已進化為以解決全球範圍污染和XSS漏洞。 諸如jQuery之類的庫進一步簡化和擴展事件管理。
- 性能和數據結合：object.observe（）和虛擬DOMS（用於React和Ractive）通過優化數據結合和UI更新，減少DOM操縱。
addEventListener 詳細分析： -
JSACTION建立在封閉庫上的，在Evens Listerer Management中解決了瀏覽器的不一致。 它通過使用自定義屬性將邏輯移至HTML來解除事件和處理程序。在旨在提高績效並減少全球範圍污染的同時，其複雜性和不足的用法可能超過許多項目的好處。
>一個增長的趨勢涉及將邏輯直接放在受影響的DOM元素中，而不僅僅是用於事件，而且是數據處理。 諸如Angular，Ractive和React等框架強制執行MVC，從而通過模板實現數據結合和反應性編程。 這種方法雖然在某些情況下可能提高可維護性，但需要仔細考慮以避免緊密耦合的演示和邏輯的陷阱。
> object.observe（）雖然尚未屬於ES6，但通過本地支持出版商/訂戶模式，可以進行重大的性能改進。 聲明性框架已經在利用類似的邏輯，並且Object.Observe（）將進一步提高其效率。從歷史上看，在歷史上，內聯事件處理（屬性）是常態，但是它的局限性（可讀性，可維護性，全球範圍污染，XSS漏洞）導致了採用> 。 像jQuery這樣的庫簡化了此過程，改善了可擴展性和調試。 但是，如果未仔細管理閉合，onclick仍然會導致內存洩漏，尤其是在較舊的瀏覽器中。 addEventListener。
聲明框架提供了令人信服的替代方案，通過虛擬DOMS（React，Ractive）或容器對象（Ember，Ember，Backbone，Ractive）等技術有效地管理數據結合和UI更新。 這些框架通常支持雙向數據綁定，簡化更新並保持DOM和應用程序邏輯之間的一致性。 這與需要明確操縱的更多手動，命令式方法形成對比。 addEventListener>
object.observe（）提供了一種有力的機制，可用於觀察對像變化，從而在不依賴框架的情況下更有效地結合了效率的數據結合。 雖然目前瀏覽器支持限制，但它代表了反應性編程功能的重大進步。
結論：
>最佳JavaScript事件處理方法取決於項目細節。 雖然聲明性框架在可維護性和性能方面具有很大的優勢，但了解不同模式的權衡，包括JSACTION和object.observe（），對於做出明智的決定至關重要。
進一步讀取：
JavaScript上的Crockford - 第四集：Ajax 的變形
Google JavaScript樣式指南
> JavaScript關閉
GitHub上的JSACTION回購
ractive and Angular 之間的差異
- ractive和React
之間的差異
- > ember.js
中的容器和依賴性
- >用object.observe（）的數據結合旋轉，addy osmani
-
- FAQS（摘要）：
- 本節包含了原始文本中提供的常見問題解答的摘要，該文本為簡潔而濃縮。 完整的解釋可在原始文本中獲得。
>
- >事件處理模式：傳統，內聯和高級（使用庫/框架）。
- 事件傳播：捕獲和冒泡。 和
stopPropagation()。 preventDefault()
- 捕獲與冒泡的捕獲： DOM中事件流的方向
>防止默認操作：- 方法。
preventDefault()事件委託： 處理父元素上的事件。 -
正則表達式：
>使用- 。 。
RegExp> javascript設計模式： 可重複使用的常見問題解決方案（模塊，原型，觀察者等）。 - >
>錯誤處理：
-
語句。
try...catch...finally
- vs. ：
==鬆散與嚴格的平等。 ===
>調試JavaScript：-
>，瀏覽器開發人員工具。
console.log()
以上是JavaScript事件處理中的新興模式的詳細內容。更多資訊請關注PHP中文網其他相關文章！
