day12 - javascript的事件(下)

1.事件类型：

事件对象.type

2.鼠标的按键信息：

事件对象.button

• 0：左键
• 1：滚轮
• 2：右键

3.键盘码：

事件对象.keycode
事件对象.which // 兼容IE

兼容写法：
document.onkeydown = function(e){     
	var keycode = e.keycode || e.which;    
	console.log(keycode);
}

常见的按键码：
8： 删除键(delete)
9： 制表符(tab)
13： 回车键(enter)
16： 上档键(shift)
17： ctrl 键
18： alt 键
27： 取消键(esc)
32： 空格键(space)
37:  左
38:  上 
39:  右
40:  下

组合键：
altKey ：alt 键按下得到 true，否则得到 false
shiftKey ：shift 键按下得到 true，否则得到 false
ctrlKey ：ctrl 键按下得到 true，否则得到 false

document.onkeyup = function (e) {    
	e = e || window.event    
	keyCode = e.keyCode || e.which    
	if (e.altKey && keyCode === 65) {        
		console.log('你同时按下了 alt 和 a')    
	}
}

4.默认行为：

具有默认行为的常见的两个标签：
链接<a href="/index.php">点我</a>  // 往属性href指定的地址跳转
提交按钮<input type=”submit”>   // 往form表单属性action指定的地址跳转

阻止默认行为的方法：
1.给链接地址设置为javascript:;或 javascript:void(0)
2.在事件中最后return false
3.事件对象.preventDefault()

兼容写法：function stopDefault(event) {    
	var e = event || window.event;    
	if (e.preventDefault){        
		e.preventDefault();   // w3c标准浏览器    
	}else{        
		e.returnValue = false; // IE浏览器    
	}
}

5.事件委托：

概念： 事件委托也叫事件代理（看站谁的角度），使用事件委托技术能避免对每个子节点添加事件监听,相反把事件监听委托给父元素即可，这样可提高绑定事件的性能。

传统的给每个元素绑定事件：
<ul>    
	<li>首页</li>    
	<li>公司介绍</li>    
	<li>产品中心</li>
</ul>

<script>
var oLis = document.getElementsByTagName("li"); // 获取到所有li
for(var i in oLis){    
	oLis[i].onclick = function(){        
		alert(this.innerText);    
	}
}
</script>

代码的缺点：

1. li标签比较多的时候，性能特别差，毕竟使用for循环相当于绑定了多次
2. 当动态给li添加元素的时候，新元素没有事件绑定

解决方案：使用事件委托，将所有子元素的点击事件委托给父元素
<ul>    
	<li>首页</li>    
	<li>公司介绍</li>    
	<li>产品中心</li>
</ul>
<button id="btn">添加新元素</button>

<script>
	var oUl = document.getElementsByTagName("ul")[0];
	btn.onclick = function(){    
		var oNewLi = document.createElement("li");    
		oNewLi.innerText = "新闻中心";    
		oUl.appendChild(oNewLi)    
	}
	oUl.onclick = function(e){    
		var ev = e || window.event;    
		// 获取到单击的目标元素dom对象    
		var target = e.target || e.srcElement;    
		// 判断是否是li标签    
		if(target.nodeName == "li"){  // nodeName：节点的名称        
			// 完成业务逻辑        
			alert(target.innerText);    
		}
	}
</script>

使用事件委托的好处：

1. 提高性能(事件委托中并没有使用循环给每个节点设置事件，只给一个父元素ul绑定事件)
2. 后续动态添加的节点也有事件的处理

注意：
事件委托底层就是通过事件冒泡来完成的，先触发父元素的事件，在通过事件对象的target属性找到具体的目标元素，进而在处理目标元素要执行的业务逻辑。