javascript的事件

ZweiZhao 發布于2019-08-20 15:37 / 1895人閱讀

摘要：所謂事件呢，就是可以被偵測到的行為。事件傳播的順序對應瀏覽器的兩種事件流模型捕獲型事件流和冒泡型事件流。

去年一直在學習框架的東西，比如VueJs,angularJs的東西，但感覺自己的基礎知識還是很匱乏，因此想著該重新回歸本質，多看看原生javascrip的東西，現在返回去學一些東西，感覺很多都豁然開朗的感覺。

所謂事件呢，就是可以被 JavaScript 偵測到的行為。而具體的事件有哪些呢

鼠標事件

鍵盤事件

window事件

media事件

form事件

當觸發事件時，就需要去處理他，而使用事件處理模型有三種

html事件處理模型----定義：將事件直接綁定到html標簽上----缺點：html和javascript耦合，無法處理多個事件程序

. DOM0級事件處理模型----定義:函數賦值給事件處理程序的方法

var btn=document.getElementById("btn");

 btn.onclick=function(){

 console.log("這是通過DOM 2級處理程序")

};

. DOM 2級事件處理程序----通過addEventListener 和 removeEventListener,這兩個函數的參數要一致

function showMsg(){
console.log("msg")
}
btn.addEventListener("click", showMsg, false)
btn.removeEventListener("click", showMsg, false)

IE事件處理
IE8以下的版本不支持addEventListener
因此需要用attachEvent 添加事件處理程序

       detachEvent 刪除事件處理程序

而事件發生時會在元素節點與根節點之間按照特定的順序傳播，路徑所經過的所有節點都會收到該事件，這個傳播過程即DOM事件流。

事件傳播的順序對應瀏覽器的兩種事件流模型：捕獲型事件流和冒泡型事件流。

事件捕獲：不太具體的DOM節點，具體節點接收到事件

事件冒泡：由具體的DOM節點逐級向上傳遞至最不具體的節點

網上的圖片更形象的表明了

當我們點擊son的時候，控制臺會先后打出

som msg
father msg

可是我們只想顯示son msg，應該怎么處理呢，接著往下看

DOM中的事件對象

在觸發DOM上的事件時都會產生一個對象 
DOM中的 event事件對象
     type:事件類型，
     target:獲取事件目標元素
     stopPropagation:方法 阻止事件冒泡
     preventDefault 方法 阻止事件的默認行為
IE中的事件對象
    type:事件類型
    srcElement 屬性 獲取事件目標元素
    cancleBubble 屬性
    returnValue 屬性 設置為true

通過以上知識，我們可以封裝一個跨瀏覽器的事件對象

    var eventObj= {
         /**
         * 添加事件 
         * element 元素
         * 事件類型
         * 事件處理
         **/
        addEventHandler: function (element, type, handler) {
            if (element.addEventListener) {
                element.addEventListener(type, handler, false)
            } else if (element.attachEvent) {
                element.attachEvent("on" + type, handler)
            } else {
                element["on" + type] = handler;
            }
        },
        /**
        * 移除事件
        * element 元素
        * 事件類型
        * 事件處理
        **/
        removeEventHandler: function (element, type, handler) {
            if (element.removeEventListener) {
                element.removeEventListener(type, handler)
            } else if (element.attachEvent) {
                element.attachEvent("on" + type, handler)
            } else {
                element["on" + type] = null;
            }
        },
        /**
        *獲取事件
        **/
        getEvent: function (e) {
            return e ? e : window.event;
        },
        /**
        * 阻止默認行為
        **/
        preventDefault: function (e) {
            if (e.preventDefault) {
                e.preventDefault()
            } else {
                e.returnValue = false;
            }
        },
        getElement: function (e) {
            return e.target || e.srcElement;
        },
        /** 
        * 阻止事件冒泡
        **/
        stopPropagation: function (e) {
            if (e.stopPropagation) {
                e.stopPropagation()
            } else {
                e.cancelBubble = true;
            }

        }
    };
    eventUtil.addHandler(btn2, "click", showMessage);

云服務器 GPU云服務器 javascript的事件 javascript事件 javascript鍵盤事件 javascript焦點事件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/82372.html

瀏覽器下的 Event Loop

摘要：前言是以單線程的形式運行在宿主環境下，采用了回調的形式來解決異步任務。線程中步就是在瀏覽器下的。前言 javascript 是以單線程的形式運行在宿主環境下，javascript 采用了回調的形式來解決異步任務。為什么是單線程？ javascript 的最開始的出現是為了給 web 頁面增添一些動態的效果，那么就避免不了獲取頁面上的元素信息，如果 javascript 是以多線程的...

forrest23 2019-08-23 16:50 評論0 收藏0
什么是JavaScript 事件循環 ?

摘要：此事件隊列的美妙之處在于它只是函數等待被調用和移動到調用棧的一個臨時存放區域。在事件循環不斷監視調用棧是否為空現在確實是空的時候調用創建一個新的調用棧來執行代碼。在執行完之后進入了一個新的狀態這個狀態調用棧為空事件記錄表為空事件隊列也為空。這篇文章是對個人認為講解　JavaScript　事件循環比較清楚的一篇英文文章的簡單翻譯,原文地址是http://altitudelabs.com...

tracymac7 2019-08-20 16:15 評論0 收藏0
JavaScript 瀏覽器事件解析

摘要：原文瀏覽器事件之間的關系程序采用了異步事件驅動編程模型，維基百科對它的解釋是事件驅動程序設計英語是一種電腦程序設計模型。原文：https://keelii.github.io/2016/09/29/javascript-browser-event/ JavaScript、瀏覽器、事件之間的關系 JavaScript 程序采用了異步事件驅動編程（Event-driven program...

spacewander 2019-08-20 11:26 評論0 收藏0
《JavaScript高級程序設計》學習筆記：JavaScript中的事件流和事件處理程序

摘要：可以使用偵聽器或處理程序來預訂事件，以便事件發生時執行相應的代碼。響應某個事件的函數稱為事件處理程序或事件偵聽器。可以刪除通過級方法指定的事件處理程序。 JavaScript和HTML之間的交互是通過事件實現的。事件：文檔或瀏覽器窗口中發生的一些特定的交互瞬間。可以使用偵聽器（或處理程序來預訂事件），以便事件發生時執行相應的代碼。 1. 事件流事件流：從頁面中接收事件的順序。 ...

Rocko 2019-08-19 17:21 評論0 收藏0
【譯】JavaScript面試問題：事件委托和this

摘要：主題來自于的典型面試問題列表。有多種方法來處理事件委托。這種方法的缺點是父容器的偵聽器可能需要檢查事件來選擇正確的操作，而元素本身不會是一個監聽器。 showImg(http://fw008950-flywheel.netdna-ssl.com/wp-content/uploads/2014/11/Get-Hired-Fast-How-to-Job-Search-Classifieds...

浠ラ箍 2019-08-21 10:32 評論0 收藏0
初窺JavaScript事件機制的實現（一）—— Node.js事件驅動實現概覽

摘要：如果當前沒有事件也沒有定時器事件，則返回。相關資料關于的架構及設計思路的事件討論了使用線程池異步運行代碼。下一篇初窺事件機制的實現二中定時器的實現在瀏覽器中，事件作為一個極為重要的機制，給予JavaScript響應用戶操作與DOM變化的能力；在Node.js中，事件驅動模型則是其高并發能力的基礎。學習JavaScript也需要了解它的運行平臺，為了更好的理解JavaScript的事...

lavor 2019-08-21 10:33 評論0 收藏0