文章目錄

一、event對象和事件冒泡

1.1 什麼是event對象

Event 對象代表事件的狀態，比如事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態，可以幫助我們去獲取事件的一些信息。

1.2 document

每個載入瀏覽器的 HTML 文檔都會成爲 Document 對象。
Document 對象使我們可以從腳本中對 HTML 頁面中的所有元素進行訪問。
提示：Document 對象是 Window 對象的一部分，可通過 window.document 屬性對其進行訪問。
document 可以把它想象成是<！DOCUTYPE HTML>和<html> 的父級

類似這樣：

<document>
	<!DOCTYPE html>
	<html>
	</html>
<document>

我們可以使用 document.onclick 來監聽整個頁面的點擊事件

1.3 event.clientX event.clientY 鼠標點擊的X座標和Y座標

clientX 返回當事件被觸發時，鼠標指針的水平座標。
clientY 返回當事件被觸發時，鼠標指針的垂直座標。

注意: event.clientX和event.clientY 是可視區的橫縱座標
注意兼容性：IE6-IE8 是ev 其他是event 示例：

<script>
    window.onload=function(){
        //兼容性寫法：IE6-IE8是ev 其他是event
        document.onclick=function(ev){
            var event = ev||event;
            alert("X:"+event.clientX+" Y:"+event.clientY);
        }
    }
</script>

效果：

1.4 事件冒泡

簡單點來說就是子級的事件會傳遞給父級，直到傳遞給document
例如：

<!DOCTYPE html>
<html lang="en" onclick="alert('html')">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件冒泡</title>
    <style>
        div{
            padding: 100px;
        }
    </style>
</head>
<body onclick="alert('body')">
    <div style="background: #ccc;" onclick="alert(this.style.background)">
        <div style="background: green;" onclick="alert(this.style.background)">
            <div style="background: red;" onclick="alert(this.style.background)"></div>
        </div>
    </div>    
</body>
</html>

如果點擊最裏邊的紅色DIV會依次彈出5個DIV
如圖：

1.5 event.cancelBubble=true 取消事件冒泡

使用event.cancelBubble = true; 可以取消事件冒泡
例如：

<style>
    #div1{
        width: 400px;
        height: 300px;
        background: #ccc;
        display: none;
    }
</style>
<body>
    <input id="btn" type="button" value="顯示">
    <div id="div1"></div>
</body>
<script>
    window.onload=function(){
        var btn = document.getElementById('btn');
        var div = document.getElementById('div1');
        btn.onclick=function(ev){
            var event=ev||event;
            event.cancelBubble=true;
            div.style.display='block';
        }
        document.onclick=function(){
            div.style.display='none';
        }
    }   
</script>

這個例子的意思是當我們點擊按鈕過後，顯示一個預設好的div,但是如果沒有取消事件冒泡的話，document.onclick默認會執行，會把div再次隱藏，而我們把事件冒泡取消了，所以點擊按鈕不會隱藏，需要點擊頁面的其他地方纔會隱藏，
如圖：

二、鼠標事件

2.1 onmousemove 鼠標移動事件

onmousemove 事件會在鼠標指針移動時發生。

示例：

<style>
    #div1{
        width: 200px;
        height: 200px;
        background: red;
        position: absolute;
    }
</style>
<body style="height: 2000px;">
    <div id="div1"></div>
</body>
<script>
    document.onmousemove=function(){
        var div=document.getElementById('div1');
        //可視區到頁面頂部的距離
        var scrollTop = document.documentElement.scrollTop;
        var scrollLeft = document.documentElement.scrollLeft;
        div.style.left=event.clientX+scrollLeft+'px';
        div.style.top=event.clientY+scrollTop+'px';
    }
</script>

這個例子的意思是，監聽頁面的鼠標移動事件，並且把div的left與top綁定到鼠標當前位置。
需要注意的是由於 event.clientY獲取的是可視區的Y座標，因此需要我們加上scrollTop
效果如圖：

這裏我們把當前的鼠標位置封裝成一個函數，以便以後使用，返回值是返回一個json類型的數據：

function getPos(){
     var scrollTop = document.documentElement.scrollTop;
     var scrollLeft = document.documentElement.scrollLeft;
     return {x:event.clientX+scrollLeft,y:event.clientY+scrollTop};
}

2.2 實例一串跟着鼠標移動的DIV

這裏DIV的數量自己設置，數量越多，跟着鼠標的數量也就越多。

<style>
    div{
        width: 10px;
        height: 10px;
        background: red;
        position: absolute;
    }
</style>
<script>
    function getPos(){
        var scrollTop = document.documentElement.scrollTop;
        var scrollLeft = document.documentElement.scrollLeft;
        return {x:event.clientX+scrollLeft,y:event.clientY+scrollTop};
    }

    document.onmousemove=function(ev){
        var aDiv=document.getElementsByTagName('div');
        
        for(var i=aDiv.length-1;i>0;i--){
            aDiv[i].style.left=aDiv[i-1].offsetLeft+'px';
            aDiv[i].style.top=aDiv[i-1].offsetTop+'px';
        }
        var pos=getPos();
        aDiv[0].style.left=pos.x+'px';
        aDiv[0].style.top=pos.y+'px';

    };
</script>

效果;

三、鍵盤事件

3.1 onkeydown 鍵盤按下事件

鍵盤按下觸發 onkeydown事件

<script>
    document.onkeydown=function(){
    	//按下a、b、c、d  對應 65、66、67、68
        alert(event.keyCode);
    }
</script>

3.2 onkeyup 鍵盤松開事件

3.3 onkeypress 鍵盤按下並且沒有鬆開

onkeypress 事件在用戶按下並放開任何字母數字鍵時發生。但是系統按鈕（例如：箭頭鍵、功能鍵）無法得到識別。

3.4 ctrlKey 判斷ctrl是否按下

3.5 shiftKey 判斷shift是否按下

3.6 altKey 判斷alt是否按下

ctrlKey 事件屬性可返回一個布爾值，指示當事件發生時，Ctrl 鍵是否被按下並保持住。

3.7 實例 Ctrl+enter 提交內容

我們可以使用onkeydown+ctrlKey,實現Ctrl+Enter提交內容
示例：

<body>
    <input id="txt1" type="text">
    <input id="btn1" type="button" value="發佈">
    <br>
    <textarea name="" id="txt2" cols="30" rows="10"></textarea>
</body>
<script>
    window.onload=function(){
        var txt1=document.getElementById('txt1');
        var txt2=document.getElementById('txt2');
        // var btn=document.getElementById('btn1');

        //13回車鍵
        txt1.onkeydown=function(){
            if(event.keyCode==13 && event.ctrlKey){
                txt2.value+=txt1.value+'\n';
                txt1.value='';
            }
        }
    }
</script>

效果：

JS學習筆記13-事件基礎-event對象