--事件篇

js事件

事件類型

鼠標事件

當用戶在文檔上移動和單擊鼠標時都會產生鼠標事件。這些事件在鼠標指針所對應的最深嵌套元素上觸發。但其會冒泡直到文檔的最頂層。 clientX和clientY屬性指定了鼠標在窗口座標中的位置。button和which屬性指定了按下的鼠標鍵是哪一個。 當鼠標輔助鍵按下的時候，對應的屬性爲altkey和ctrlkey和metakey和shiftkey會設置爲true，對於click事件，detail屬性指定了其是單擊，雙擊，仍是三擊。 每當用戶移動和拖動鼠標時，會觸發mousemove事件，當用戶按下或釋放鼠標按鍵的時候觸發mousedown和mouseup事件。 在mousedown和mouseup事件隊列以後，瀏覽器也會觸發click事件，若是用戶在很短的時間內單擊兩次鼠標，則第二個事件爲dblclic事件，當單擊鼠標右鍵時，瀏覽器會顯示上下文菜單，在顯示菜單以前，也會觸發contextmenu事件，若是取消這個事件將會阻止菜單的顯示，該事件爲得到鼠標右擊通知的最簡單方法。 當用戶移動鼠標指針從而使它懸停到新元素上時，瀏覽器就會在該元素上觸發mouseover事件，當鼠標移動指針從而使它不在懸停在某個元素上時，瀏覽器會觸發mouseout事件，（該事件有relatedTarget屬性指明這個過程涉及的其餘元素） 當用戶滾動鼠標的時候，瀏覽器觸發mousewheel事件，傳遞事件對象屬性指定輪子轉動的大小和方向。

做者：mySoul 連接：juejin.im/post/5b6ff5… 來源：掘金

常見鼠標事件

click   //點擊事件
mousedown   //鼠標按下
mouseup     //鼠標擡起
mouseenter  //鼠標進入
mouseleave  //鼠標離開
mouseover   //鼠標懸停
mouseout    //鼠標離開
mousemove   //鼠標移動
...
//不論鼠標指針離開被選元素仍是任何子元素，都會觸發 mouseout 事件。只有在鼠標指針離開被選元素時，纔會觸發 mouseleave 事件,能夠參考下這裏:
http://www.w3school.com.cn/tiy/t.asp?f=jquery_event_mouseleave_mouseout
複製代碼

鍵盤事件

常見鍵盤事件

keydown     //按鍵按下
keypress    //按鍵持續按下
keyup   //按鍵擡起
...
//這裏介紹個小技巧，因爲某些緣由(應該是避免誤操做)，鍵盤在長按不擡起的狀況下，每次鍵盤事件循環觸發是有間隔的，會致使一種卡頓感，當遇到一些須要長按的使用場景時，建議可使用一個狀態標記，即按下時建立一個狀態，當鬆開後纔會修改該狀態，這樣就使得本來長按會一卡一卡的效果變得十分流暢了
複製代碼

UI事件

load    //資源加載完成觸發事件
unload  //離開頁面觸發事件
resize  //瀏覽器窗口大小改變事件
scroll  //頁面滾動事件
複製代碼

事件監聽(原生JS)

//實現一個鼠標點擊按鈕更改背景顏色的樣例（只列出js部分）
var btn = document.getElementById("btn");
btn.addEventListener('click',function(){
    body.style.backgroundColor = "blue";
},false);

addEventListener函數:第一個參數爲監聽的事件名，第二個參數爲事件觸發時的回調函數，第三個參數決定捕獲(true)仍是冒泡(false)
複製代碼

冒泡&捕獲

當鼠標點擊所看到的的按鈕時，其實發生了一系列的事件傳遞，能夠想象一下，button其實是被body「包裹」起來的，body是被html「包裹」起來的，html是被document「包裹」起來的，document是被window「包裹」起來的。因此，在你的鼠標點下去的時候，最早得到這個點擊的是最外面的window，而後通過一系列傳遞纔會傳到最後的目標button，當傳到button的時候，這個事件又會像水底的泡泡同樣慢慢往外層穿出，直到window結束。綜上，一個事件的傳遞過程包含三個階段，分別稱爲：捕獲階段，目標階段，冒泡階段

<div id="div1">
    <p id='p1'>
        <span id="span1">
            "Click Me!"
        </span>
    </p>
</div>
複製代碼

//給最外層元素div綁定事件
var div = document.getElementById('div1');
div.addEventListener("click",function(){
    console.log("div1");
},false);
//給p元素綁定事件
var p = document.getElementById('p1');
p.addEventListener("click",function(){
    console.log("p");
},false);
複製代碼

點擊Click Me後結果以下：
> p
> div
//首先觸發p的事件，而後觸發div的事件，與冒泡模型指望一致
//能夠嘗試將冒泡模型更改成捕獲模型試一下，打印結果應與如今相反
//將p元素綁定的事件代碼修改以下:
p.addEventListener("click",function(event){
    event.stopPropagation();
    console.log("p");
},false);
//再次運行後發現打印結果爲：
> p
//stopPropagation 能夠阻止事件冒泡
複製代碼

事件代理

那什麼叫事件委託呢？它還有一個名字叫事件代理，JavaScript高級程序設計上講：事件委託就是利用事件冒泡，只指定一個事件處理程序，就能夠管理某一類型的全部事件。那這是什麼意思呢？網上的各位大牛們講事件委託基本上都用了同一個例子，就是取快遞來解釋這個現象: 有三個同事預計會在週一收到快遞。爲簽收快遞，有兩種辦法：一是三我的在公司門口等快遞；二是委託給前臺代爲簽收。現實當中，咱們大都採用委託的方案（公司也不會容忍那麼多員工站在門口就爲了等快遞）。前臺收到快遞後，她會判斷收件人是誰，而後按照收件人的要求籤收，甚至代爲付款。這種方案還有一個優點，那就是即便公司裏來了新員工（無論多少），前臺也會在收到寄給新員工的快遞後覈實並代爲簽收。

<ul id="list">
    <li>我是Li1</li>
    <li>我是Li2</li>
    <li>我是Li3</li>
    <li>我是Li4</li>
    <li>我是Li5</li>
</ul>
複製代碼

//針對上述html，想要給每一個li都加一個事件無疑是比較麻煩的，並且也沒法處理後面新加入的li元素，使用事件代理的方式能夠輕鬆搞定:
var ul = document.getElementById('list');
ul.addEventListener('click',function(){
    console.log("click");
},false);
//你會發現點擊每一個li都會觸發事件，這樣就實現了一個簡單的事件代理
複製代碼

event

在addEventListener參數中的回調函數是能夠接收參數的，事件觸發時會把事件做爲第一個參數傳遞給回調函數，事件中記錄了不少信息，包括是由誰觸發的該事件等，能夠將event打印出來查看都包含有哪些信息

做用域

<script src="https://7.url.cn/edu/jslib/jquery/1.9.1/jquery.min.js"></script>
<div id='test1'>
	<div id='test2'>
		Hello World!
	</div>
</div>
複製代碼

原生js：
var d1 = document.getElementById("test1");
d1.addEventListener('click',function(event){
    console.log(this);
},false);
//div2
jQuery:
$('#test1').on("click",'#test2',function(){
    console.log(this)
})
//div1
複製代碼