javascript之事件详解

绑定事件处理
1.ele.onxxxx = function() {}
兼容性很好，但是一个元素上同一事件只能绑定一次处理函数
等同于写在HTML的行间上
this指向dom

2.ele.addEventListener(type, fn, false)
IE9以下不兼容，可以在一个事件上绑定多个处理函数
this指向dom

3.ele.attachEvent('on' + type, fn)
IE独有，一个事件可以绑定多个处理函数
this指向window

封装兼容性的addEvent(elem, type, handle)

function addEvent(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
　　}
}

解除事件绑定
1.elem.onxxx = false/''/null

2.elem.removeEventListener(type, fn, false)

3.elem.detachEvent('on' + type, fn)

若绑定匿名函数无法解除

事件处理模型
1.冒泡
结构上(非视觉上)，同一事件，子元素会冒泡向父元素(自底向上)

2.捕获
结构上(非视觉上)，同一事件，父元素会捕获向子元素(事件源元素)(自上向底)
ele.addEventListener(type, fn, true)

IE上没有捕获

触发顺序，先捕获，后冒泡，同一事件源按注册顺序来

focus blur change submit reset select等事件不能冒泡

取消冒泡和阻止默认事件

取消冒泡
W3C标准 event.stopPropagation(),但不支持IE9以下
IE独有 event.cancelBubble = true
封装取消冒泡函数 stopBubble(event)

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
封装阻止默认事件函数 cancelHandler(event)

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

事件源对象
event || window.event 用于IE
事件源对象
event.target 火狐只有这个
event.srcElement IE只有这个
这俩chrome都有

兼容性写法
var event = event || window.event
var target = event.target || event.srcElement

事件委托
利用事件冒泡，和事件源对象进行处理
优点
1.性能。不需要循环所有的元素进行一个一个绑定事件
2.灵活。当有新的子元素时不需要重新绑定事件

请看下面例子

<ul>
　　<li>1</li>
　　<li>2</li>
　　<li>3</li>
　　<li>4</li>
　　<li>5</li>
　　<li>6</li>
　　<li>7</li>
　　<li>8</li>
　　<li>9</li>
　　<li>10</li>
</ul>
<script type="text/javascript">
　　var ul = document.getElementsByTagName('ul')[0]
　　ul.onclick = function(e) {
　　　　var event = event || window.event
　　　　var target = event.target || event.srcElement
　　　　console.log(target.innerText)
　　}
　　//即点击li是会事件冒泡到ul上，处理ul的点击事件，来获得li的内容，这样就是事件委托
</script>

事件分类
click, mousedown, mousemove, mouseup, contextmenu, mouseover, mouseout, mouseenter, mouseleave(H5标准)
用button来区分鼠标的按键 0/1/2
e.button == 2 'right' e.button == 0 'left'
DOM3标准规定：click事件只能监听左键，只能通过mousedown和mouseup来判断鼠标按键
如何解决click和mousedown点击冲突 (设置mousedown和mouseup之间的时间差来区分click)

键盘事件
onkeypress onkeydown onkeyup
keydown >　keypress > keyup
keydown和keypress区别
keydown可以响应任何键盘按键，keypress只可响应字符类键盘按键
keypress返回Ascall码，可以转换相应字符

文本类事件
input focus blur

事件分类
窗体操作类(windows上的事件)
scroll load(无意义)

end ！！！