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'}">