JS事件冒泡 事件委託

如何綁定事件處理函數

• ele.on+事件類型 = function(event){}（句柄式）
• 兼容性好，但是在一個元素的同一個事件上只能綁定一個處理程序
• 基本等同於寫在HTML上
• 程序this指向Dom元素本身
• obj.addEventListener(‘事件類型’,函數,false)
• IE9以下不兼容，可以爲一個事件綁定多個處理程序
• 程序this指向dom元素本身
• obj.attachEvent(‘on’+type,fn);
• IE獨有，一個事件可綁定多個處理程序
• 程序this指向window
• 解決：

var div = document.getElementsByTagName('div)[0];

div.attachEvent('onclick',function(){
	handle.call(div);
});
function handle(){
	//事件處理程序
}

封裝addEvent(elem,type,handle)

function addEvent(elem,type,handle){//elem元素名 type事件名 handle處理函數
	if(elem.addEventListener){
		elem.addEventListener(type,handle,false);
	}else if(elem.attachEvent){
		elem.attachEvent('on'+type,function(){
		handle.call(elem);
		})
	}else {
		elem['on'+type] = handle;
	}
}

解除事件綁定

• ele.on+‘事件類型’ = null/false
• dom.removeEventListener(type,fn,false);
• ele.detachEvent(‘on’+type,fn);
  若綁定匿名函數，則無法解除

事件處理模型

• 事件冒泡：結構上（非視覺）嵌套關係的元素，會存在事件冒泡的功能，即同一事件，子元素冒泡向父元素（自底向上）；
• 事件捕獲：結構上（非視覺）嵌套關係的元素，會存在事件捕獲的功能，即同一事件，自父元素捕獲至子元素（事件源元素）。（自頂向下）。（IE沒有捕獲事件）
• 綁定多個事件：觸發順序，先捕獲，後冒泡
• focus ， blur ，change ，submit ， reset ，select等事件不冒泡
• 取消冒泡
  • W3C標準：event.stopPropagation();但IE9以下版本不支持；
  • IE獨有event.cancelBubble = true;

封裝函數 取消冒泡

function stopBubble(event){
	if(event.stopPropagation){
		event.stopPropagation();
	}else{
		event.cancelBubble = true;
	}
}

• 阻止默認事件
  • 默認事件——表單提交，a標籤跳轉，右鍵菜單等
    • 1.return false;以對象屬性的方式註冊的事件才生效
    • 2.event.preventDefault()；W3C標註，IE9以下不兼容
    • 3.event.returnValue = false; 兼容IE
• 封裝阻止默認事件函數

function cancelHandler(event){
   	if(event.preventDefault){
   	event.preventDefault();
   }else{
   	event.returnValue = false;
   }
}

• 取消a標籤跳轉可以在行間加上樣式：<a href="javascript:void(false)">123<a>

事件源對象

• 事件對象event || window.event用於IE
• 找事件源對象：
• event.target 火狐只有這個
• event.srcElement IE只有這個
• 谷歌兼容以上兩個

事件委託

• 利用事件冒泡和事件源對象進行處理

• 優點

• 1.性能 不需要循環所有的元素一個個綁定事件

• 2.靈活 當有新的子元素時不需要重新綁定事件

• 舉個例子 : 利用事件冒泡和事件源對象，進行處理

//打印事件源對象的內容
<ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
</ul>
<script>
	var ul = document.getElementsByTagName("ul")[0];
	ul.onclick  = function(e){   //少去了for循環遍歷
		var event = e ||  window.event;
		var target = event.target || event.srcElement;
		console.log(target.innerText);
	}
</script>

事件分類

• 鼠標事件

  • click 、mousedown 、mousemove、mouseup、contextmenu、mouseover、mouseout、mouseenter、mouseleave(mouseover、mouseout、mouseenter、mouseleave功能與hover類似，但hover速度更快)

• 觸發順序: mousedown–>mouseup–>lick–>mousedown–>moseup–>click–> dblclick

• 用elem.button來區分鼠標的按鍵，0/1/2 左中右

 document.onmousedown = function(e){ //onmouseup也可  但onclick不能監聽右鍵
    if(e.button == 2){
		console.log('right);
	}else if(e.button == 0){
		console.log('left);
	}
}

• DOM3標準規定：click事件只能監聽左鍵，只能通過mousedown和mouseup來判斷鼠標鍵
• 解決mousedown和click的衝突

var firstTime = 0;  //區分拖拽和點擊

var lastTime = 0;
var key = false;

document.onmousedown = function(){
	firstTime = new Date().getTime();
}
document.onmouseup = function(){
	lastTime = new Date().getTime();
	if(lastTime - firstTime <300){
		key = true;
	}
}
document.onclick = function(){
	if(key){
		console.log('click');
		key = false;
	}
}

• 鍵盤事件
  • keydown keyup keypress
• 觸發順序keydown>keypress>keyup
• keydown和keypress的區別
  1. keydown可以響應任意鍵盤按鍵，keypress只可以響應字符類鍵盤按鍵
  2. keypress返回ASCII碼，可以轉換成響應字符
• 文本事件

//輸入框
<input type="text" value = '請輸入用戶名' style='color:#999' onfocus = "if(this.value=='請輸入用戶名'){this.value='';color:'#424242';}" onblur="if(this.value==''){this.value='請輸入用戶名';color:'#999'}">