JavaScript事件和事件委托

事件

• 1. 事件類型
• 2. 事件綁定
• • 1.事件綁定
  • 2. 标準浏覽器的事件綁定和ie浏覽器的事件綁定的差別：
  • 3. 事件取消
• 3. 事件流
• • 阻止事件冒泡
• 4. 事件預設行為
• 5. 鍵盤事件
• 6. 事件委托

事件處理函數： 事件觸發的時候調用的函數

事件對象：

ie和chrome： window.event，事件發生的時候，會将事件相關的所有内容儲存在時間對象中（事件類型，實踐目标，滑鼠等）；

ff(火狐浏覽器): 火狐的事件對象通過時間處理函數的第一個參數傳入；

相容：

document.onclick = function(ev){
	var ev = window.event || ev;
}

           

1. 事件類型

• type： 擷取事件類型；
• target（scrElement(ie8-)） ： 擷取觸發時間的對象；
• clientX、clientY： 擷取目前滑鼠的位置，相對于螢幕；
• pageX、pageY： 擷取目前滑鼠的位置，相對與頁面；
• shiftKey、ctrlKey、altKey： 布爾值，是否按了對應的鍵；

  document.onclick = function(ev){
  var ev = window.event || ev;
  console.log(ev.type);//事件類型;
  console.log(ev.target || ev.srcElement);//時間那觸發對象;
  condole.log(ev.clientX+"-------"+ev.clientY);//滑鼠的坐标;
  console.log(ev.pageX+"--------"+ev.clientY);//滑鼠點選的坐标位置
  }
             

2. 事件綁定

1.事件綁定

标準浏覽器： 标簽.addEventListener(事件類型[不加on]，時間處理函數，是否捕獲[預設是false])；

var xBtn = document.getElmentById("button")[0];
function fun1(){
	alert(1);
}
xBtn.addEventListener("click",fun1);
           

ie浏覽器： 标簽.attachEvent(事件類型[加on]，時間處理函數)；

xBtn,addachEvent("onclick',fun1);
           

2. 标準浏覽器的事件綁定和ie浏覽器的事件綁定的差別：

• ie沒有擷取，标準有擷取；
• ie的事件名稱前面有on，标準沒有；
• 标準的ie會根據事件的順序正序執行，非ie标準逆序，标準正序；
• ie的this是window，标準的是觸發這事件的對象；
• 标準浏覽器的事件綁定和ie浏覽器的事件綁定是不共存的，是以需要相容；

  if(oDiv.addEventListener){
  	oDiv.addEvetListener("click",fun); //标準浏覽器
  }else{
  	oDiv.arrachEvent("onclick",fun); //undefined-假 ie浏覽器
  }
             

3. 事件取消

```
标簽.事件 = null;
标簽.removeELvenListener(事件類型，時間處理函數，書否捕獲);
标簽.detachEvent(事件類型，事件處理函數);
```
           

3. 事件流

事件流： 事件發生後經過的一系列過程

事件捕獲機制： 事件發生的是偶，将時間從最不确定的window開始，依次往子元素傳遞，一直到事件目标；

事件冒泡機制： 從實踐目标開始處理事件，處理完之後将時間依次向父元素傳遞，一直傳到window；

在綁定事件： addEvenListener(事件類型，處理函數，是否捕獲)中有3個參數，最後一個參數預設是

false:

表示冒泡，

true:

表示捕獲；

//HTML 
<div style="padding: 40px;background: cornflowerblue" id="box1">
    <div style="padding: 40px;background: sandybrown" id="box2">
        <div style="padding: 40px;background: greenyellow" id="box3">
            <div style="padding: 40px;background: salmon" id="box4"></div>
        </div>
    </div>
</div>

//JavaScript
 var oDiv = document.getElementsByTagName("div");
    function fun() {
        alert(this.id);
    }
    oDiv[0].addEventListener("click",fun,true);
    oDiv[1].addEventListener("click",fun,true);
    oDiv[2].addEventListener("click",fun,true);
    oDiv[3].addEventListener("click",fun,true);
           

阻止事件冒泡

子元素接收到事件之後，阻止子元素再給父元素傳播事件，阻止事件的方法：

标準浏覽器： ev.stopPropagation();

IE浏覽器： ev.cancelBubble = true;

<div style="padding: 40px;background: cornflowerblue" id="box1">
    <div style="padding: 40px;background: sandybrown" id="box2">
        <div style="padding: 40px;background: greenyellow" id="box3">
            <div style="padding: 40px;background: salmon" id="box4"></div>
        </div>
    </div>
</div>

//JavaScript
<script>
    var oDiv = document.getElementsByTagName("div");
    function fun(ev) {
        var ev = window.event || ev;
        alert(this.id);
        ev.stopPropagation ? ev.stopPropagation() :ev.cancelBubble = true;
    }
    oDiv[0].onclick = fun;
    oDiv[1].onclick = fun;
    oDiv[2].onclick = fun;
    oDiv[3].onclick = fun;
</script>
           

4. 事件預設行為

給予了元素特殊的操作，如點選連結或跳轉到其他的網頁，在浏覽器中右擊滑鼠會彈出菜單；

取消預設行為：
标簽.事件--->return false; 阻止
标簽.addEventListener -->ev.preventDefault(); 阻止
标簽.attachEvent -->ev.returnValue = false; 阻止

<ul>
    <li>右擊</li>
    <li>重新整理</li>
    <li>右擊</li>
    <li>右擊</li>
    <li>右擊</li>
</ul>
js：
<script>
    var xUl = document.getElementsByTagName("ul")[0];
    var xLi = document.getElementsByTagName("li");
    document.oncontextmenu = function(ev){
        var ev = window.event || ev;
        xUl.style.display = "block";//讓ul顯示出來
        xUl.style.left = ev.clientX + "px";
        xUl.style.top = ev.clientY + "px";
        return false;//阻止預設行為（菜單）
    };
</script>
           

5. 鍵盤事件

• onkeydown： 鍵盤按下
• onkeyup： 鍵盤彈起
• onkeypress： 按下

// onkeydown
window.onkeydown = function(ev){
	var ev = window.event || ev;
	console.log("按下");
	console.log(ev.key); //具體的按鍵
	alert(ev.keyCode);//按鍵對應的編碼
	
	//3個特殊的按鍵，可以直接判斷是否按下ctrlkey altkey shiftkey;
	alert(ev.shiftKey);	-->有沒有按住shift鍵，按了true，沒按false
	alert(ev.altkey);	-->有沒有按住alt鍵，按了true，沒按false
	alert(ev.ctrlkey);	-->有沒有按住ctrl鍵，按了true，沒按false
	
	console.log(ev.key);
	console.log(ev.keyCode); -->不區分大小寫，全部都是大寫編碼
}

//onkeypress
document,onkeypress = function(ev){
	var ev = window.event || ev;
	console.log(ev.key);
	console.log(ev.keyCode); -->區分大小寫
}
           

6. 事件委托

将事件添加給父元素，事件發生的時候榮國冒泡觸發父元素事件，父元素就會去找對應的子元素處理事件

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

js:
var oUl = document.getElementsByTageName("ul")[0];
oUl.onclick = function(){
	var ev = window.event || ev;
	//擷取事件目标（被點選的li）
	var target = ev.target || ev.scrElement;//相容
	target.style.background = "red";//給被點選的li添加背景顔色
	//後期添加的元素也會有點選事件
	oUl.innerHTML += "<li>6</li>";
}