讀書時間《JavaScript高級程序設計》六：事件

時間 2019-12-08

標籤讀書時間 javascript 高級程序設計事件欄目 JavaScript 简体版

原文原文鏈接

　　Javascript與HTML之間的交互是經過事件實現的。javascript

　　1. 事件流html

　　事件流描述的是從頁面中接收事件的順序。java

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>事件流</title>
</head>
<body>
    <div id="box"></div>
</body>
</html>

　　事件冒泡瀏覽器

　　　　事件開始 - 具體的元素（文檔嵌套層次最深的那個節點）- 逐級向上傳播 - 最外圍的節點（文檔）。app

　　　　<div> - <body> - <html> - document 　　框架

　　事件捕獲函數

　　　　事件開始 - 最外圍的節點 - 依次向下傳播 - 具體的事件節點性能

　　　　document - <html> - <body> - <div>url

　　DOM 事件流: 事件捕獲階段 - 處於目標階段 - 事件冒泡階段spa

　　document - <html> - <body> - <div> - <body> - <html> - document

　 IE8及更早的瀏覽器不支持DOM事件流（不支持事件捕獲）

　　2. 事件處理程序

　　事件就是用戶或者瀏覽器自身執行的某種動做。如：‘click’，‘load’，‘mousedown’ 等是事件的名稱，響應事件的函數就是事件處理程序（或者事件偵聽器）。

　　HTML事件處理　

<div onclick="alert('點擊')">點擊我</div>

　　DOM 0級事件處理程序　

<div id="box">點擊我</div>
<script type="text/javascript">
    var box = document.getElementById('box');
    box.onclick = function(){
        alert('彈出');
    };
</script>

　　 DOM 2級事件處理程序　

<div id="box">點擊我</div>
<script type="text/javascript">
    var box = document.getElementById('box');
    box.addEventListener('click', function(){
        alert('彈出');
    }, false);
</script>

　　IE8及更早的瀏覽器的事件處理程序

<div id="box">點擊我</div>
<script type="text/javascript">
    var box = document.getElementById('box');
    box.attachEvent('onclick', function(){
        alert('彈出');
    });
</script>

　　兼容的事件處理程序　

function addEvent(o, type, fn) {
    if (o.addEventListener) {
        o.addEventListener(type, fn, false);
    } else if (o.attachEvent) {
        o.attachEvent('on' + type, fn);
    } else {
        o['on' + type] = fn;
    }
}

function removeEvent(o, type, fn) {
    if (o.removeEventListener) {
        o.removeEventListener(type, fn, false);
    } else if (o.detachEvent) {
        o.detachEvent('on' + type, fn);
    } else {
        o['on' + type] = null;
    }
}

　　3. 事件對象

　　事件會將一個 event 對象傳入到事件處理程序中。

<div id="box">點擊我</div>
<script type="text/javascript">
    var box = document.getElementById('box');
    // DOM
    box.addEventListener('click', function(event){
        alert(event.type);
    }, false);
    //IE DOM0
    box.onclick = function(){
        var event = window.event;
        alert(event.type);
    };
    //IE DOM2
    box.attachEvent('onclick', function(event){
        alert(event.type);
    });
</script>

　　event對象包含與建立它的特定事件有關的屬性和方法。

　　IE的事件對象

　　4. 事件類型

　　瀏覽器中發生的事件有不少種類型，不一樣的事件類型有不一樣的信息。

　　　UI事件

　　　load 當頁面徹底加載後在window上面觸發，當全部框架都加載完在框架集上觸發，當圖像加載完成時在img元素上觸發。

　　　unload 當頁面卸載後在window上觸發，當全部框架都卸載後在框架集上觸發

　　　select 當用戶選擇文本框（input textarea）中的字符時觸發

　　 resize 當窗口或框架的大小變化時在window上或框架上觸發

　　　scroll 滾動帶滾動條的元素的內容時，在該元素上觸發（<body>元素包含所加載頁面的滾動條）

　　　焦點事件

　　焦點事件會在頁面得到焦點貨失去焦點時觸發

　　　blur 元素失去焦點時觸發

　　　focus 元素得到焦點時觸發

　　　鼠標與滾輪事件

　　　click 單擊鼠標主鍵或者按下回車鍵時觸發

　　　dbclick 雙擊鼠標主鍵時觸發

　　　mousedown mousemove mouseup

　　　mouseover mouseout

<div id="box">點擊我</div>
<script type="text/javascript">
    var box = document.getElementById('box');
    // DOM
    box.addEventListener('click', function(event){
        var keys = [];
        if(event.ctrlKey){
            keys.push('ctrl');
        }
        if(event.altKey){
            keys.push('alt');
        }
        if(event.shiftKey){
            keys.push('shift');
        }
        alert(keys.join(',')); // 按下了哪些修改鍵
    }, false);
</script>

　　鍵盤和文本事件

　　使用鍵盤時會觸發鍵盤事件

　　keydown 按下鍵盤上的任意鍵時觸發

　　keypress 按下鍵盤上的字符鍵時觸發按住不放會重複觸發 Esc鍵也會觸發

　　keyup 釋放鍵盤上的鍵時觸發

　　對應鍵的鍵碼

　　　HTML5事件

　　　contextmenu 上下文菜單

<ul id="box" style="display: none;">
    <li>複製</li>
    <li>剪切</li>
    <li>粘貼</li>
</ul>
<script type="text/javascript">
    var box = document.getElementById('box');
    document.addEventListener('contextmenu', function(event){
        event.preventDefault();
        box.style.display = 'block';
    }, false);
    document.addEventListener('click', function(event){
        box.style.display = 'none';
    }, false);
</script>

　　　beforeunload 頁面卸載前觸發

　　　DOMContentLoaded 在DOM樹加載完成時觸發

　　　readystatechange 提供文檔或者元素的加載狀態有關的信息

function loadJS(url, callback) {
    var doc = document,
        script = doc.createElement('script'),
        head = doc.getElementsByTagName('head')[0];
    script.type = 'text/javascript';
    if (script.readyState) {
        script.onreadystatechange = function() {
            if (script.readyState == 'loaded' || script.readyState == 'complete') {
                script.onreadystatechange = null;
                callback && callback();
            }
        };
    } else {
        script.onload = function() {
            callback && callback();
        };
    }
    script.src = url;
    head.appendChild(script);
}