事件绑定、事件处理模型、事件委托

如何绑定事件处理函数

• ele.onXXX = functon (event){}
  • 兼容性很好，一个元素的同一个事件上只能绑定一个处理函数
  • 基本等同于写在HTML行间上
• obj.addEventListener(type,fn,false);
  • IE9以下不兼容，可以为同一个事件绑定多个处理程序，同一个函数绑定多次只执行一次
• obj.attachEvent('on'+type,fn);
  • IE独有，一个事件同样可以绑定多个处理程序，并且同一个函数绑定多次就执行多次

鼠标事件

• click、mousedown、mousemove、mouseup、contextmenu、mouseover、mouseout、mouseenter、mouseleave
• 移动端 touchstart、touchmove、touchend
• 用e.button值区分鼠标左右键 0-左键 1-滚轮 2-右键
• DOM3标准规定：click事件只能监听左键，只能通过mousedown和mouseup来判断鼠标键

键盘事件

• keydown、keyup、keypress
• 执行顺序 keydown > keypress > keyup
• keydown 和 keypress的区别
  • keydown可以响应任意键盘按键，keypress只可以响应字符类键盘按键（ASCII中存在的）
  • keypress 返回ASCII码，可以转换成相应字符 String.fromCharCode(e.charCode)

文本类事件

• input、focus、change、blur

  //属实不明白为什么用这个写法
  <input type="text"
   value="请输入用户名" 
   onfocus="if(this.value == '请输入用户名'){this.value = '';this.className = 'text'}" 
   onblur="if(this.value == ''){this.value = '请输入用户名';this.className = 'placeholder'}"/>
  

窗口操作类（window上的事件）

• scroll、load(效率较低)
• IE6不支持固定定位，利用scroll和绝对定位实现固定定位效果

事件绑定中的this指向问题

• ele.onXXX = function(event){}
  • 程序this指向dom元素本身
• obj.addEventListener(type,fn,false);
  • 程序this指向dom元素本身
• obj.attachEvent('on' + type,fn);
  • 程序this指向window

  	//解决this指向
  	div.attachEvent('onclick',function(){
  		fn.call(div)
  	})
  	function fn(){}
  

事件添加封装函数

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

解除事件处理程序

• ele.onclick = false/ '' / null;
• ele.removeEventListener(type,fn,false);
• ele.detachEvent('on' + type, fn);
• 若绑定匿名函数，则无法解除

事件处理模型

• 事件冒泡
  • 结构上嵌套关系的元素，会存在事件冒泡功能，即同一事件，自子元素冒泡向父元素。
• 事件捕获
  • 结构上嵌套关系的元素，会存在事件捕获功能，即同一事件，自父元素捕获至子元素。
  • IE没有捕获事件
• 触发顺序，先捕获，后冒泡（触发顺序指父元素，子元素先绑定的先执行）
• focus，blur，change，submit，reset，select等事件不冒泡

IE中另类的事件捕获

• ele.setCapture(); 将页面中的所有发生的事件捕获到自己身上
• ele.releaseCapture() 关闭该捕获机制

取消冒泡

• W3C标准 event.stopPropagation(); 但不支持IE9以下版本
• IE(Chrome也支持):event,cancelBubble = true;
• 封装取消冒泡函数

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

阻止默认事件

• return false; 以对象属性的方式注册的事件才生效

  div.oncontextmenu = function () {
  	console.log('a');
  	return false;
  }
  //相当于
  <a href="javascript:void(false)" > demo</a>
  

• event.preventDefault(); W3C标注，IE9以下不兼容
• event.returnValue= false; 兼容IE
• 封装阻止默认事件的函数

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

  事件对象

  • 事件源对象
    • event.target 火狐只有这个
    • event.srcElement IE只有这个
    • chrome 都有
    • 兼容写法

div.onclick = function (e){
	var event = e || window.event;
	var target= event.target || event.srcElement;
	console.log(target)
}

事件委托

• 利用事件冒泡，和事件源对象进行处理
• 优点：
  • 性能 不需要循环所有的元素一个个绑定事件
  • 灵活 当有新的子元素是不需要重新绑定事件

	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>
	<script>
	ul.onclick = function (e){
		var event = e || window.event;
		var target= event.target || event.srcElement;
		console.log(target.innerText)
	}
	</script>