javascript事件之核心問答(持續更新)

時間 2019-11-08

標籤 javascript 事件核心問答持續更新欄目 JavaScript 简体版

原文原文鏈接

一.基本概念:事件流是什麼?有哪些事件流?

事件流是描述頁面接收事件的順序javascript

具體的有 事件冒泡 事件捕獲 DOM事件流html

事件冒泡又叫IE的事件流，即事件開始時由最具體的元素（文檔中嵌套層次最深的那個節點）接收，而後逐級向上傳播到較爲不具體的節點（文檔）。java

事件捕獲的思想是不太具體的節點應該更早的接收到事件，而最具體的節點應該在最後接收到節點。事件捕獲的用意在於事件到達預約目標以前捕獲它。編程

DOM2級事件流規定的事件流包括三個階段：事件捕獲階段、處於目標階段和冒泡階段。首先發生的是事件捕獲，爲截獲事件提供了機會。而後是實際的目標接收到事件。最後一個階段是冒泡階段，能夠在這個階段對事件做出響應。以簡單的HTML頁面爲例，單擊瀏覽器

<dom

div>元素會按照下圖順序觸發事件函數式編程

二.瀏覽器支持的狀況

IE8及更早的版本不支持DOM事件流函數

三.事件和事件處理程序的區別?

事件是用戶或瀏覽器執行的動做,如 click
事件處理程序是響應某個事件的函數:如 onclick();也稱爲事件偵聽器this

四.事件處理程序分爲哪幾類?

1.html事件處理程序
2.DOM0級事件處理程序
3.DOM2級事件處理程序
4.IE事件處理程序
5.跨瀏覽器事件處理程序code

html事件處理程序優勢:簡單,方便 缺點:javascript和html緊密耦合,不方便維護和修改
DOM0級事件處理程序:函數式編程,支持IE8如下
DOM2級事件處理程序:用addEventListener() 能夠添加多個事件處理函數,即多個hander()

<body>
        <button onclick="html_event();">html event處理程序</button>
        <button id="btn_dom0">DOM0 events</button>
        <button id="btn_dom2">DOM2 events</button>
        <script type="text/javascript">

//html event處理程序
        function html_event(){
            alert("this a html event處理程序");
        }
            function g(id){
            return  document.getElementById(id);
            }

    //DOM0 events處理程序
            var btn_dom0=g("btn_dom0");
            btn_dom0.onclick= function(){
                alert("DOM0 events處理程序!");
            }

    //this is a DOM2 event!
            var btn_dom2=g("btn_dom2");
            function hander(){
                alert("this is a DOM2 event!");
            }
            btn_dom2.addEventListener("click",hander,false);
            //三個參數分別是,
            //事件:click,
            //處理函數hander(),
            //false表示在事件冒泡中調用處理hander()函數,ture表示在事件捕獲階段調用
            </script>