event（事件）：
1. 什么是事件：事件是可以被JavaScript侦测到的行为
1.2 现代浏览器和古代浏览器（IE8之前的浏览器）获取元素并绑定事件监听器
<body>
<div class="wrapper" id="ie"></div>
</body>
<script type = "type="text/javascript"">
var listener = function(){
var e = arguments[ 0 ] || window.event ;
var t = e.target || e.srcElement ;
alert( t );
};
var w = document.getElementById( "ie" );
w.onclick = listener ;
</script>
1.2.1鼠标事件
| 鼠标状态 | 状态说明 |
|---|
| onclick | 当用户点击某个对象时调用的事件 |
| ondblclick | 当用户双击某个对象时调用的事件 |
| onmousedown | 鼠标按钮被按下 |
| onmouseup | 鼠标按键被松开 |
| onmouseover | 鼠标移到某元素之上 |
| onmouseout | 鼠标从某元素移开 |
| mouseenter | 在鼠标光标从元素外部移动到元素范围之内时触发。这个事件不冒泡 |
| mouseleave | 在位于元素上方的鼠标光标移动到元素范围之外时触发。这个事件不冒泡 |
注：click = mousedown + mouseup, dblclick = click*2(短时间内两次单击)
执行顺序：mouseover=>mouseenter; mouseout => mouseleave
1.2.2键盘事件
1.2.3表单事件
| 状态 | 状态说明 |
|---|
| onselect | 输入框文本被选中 |
| onblur | 元素失去焦点时触发 |
| onfocus | 素获得焦点时触发 |
| onreset | 重置按钮被点击 |
| onsubmit | 确认按钮被点击 |
| oninput | 输入字符时触发 |
1.2.4 UI事件
| 状态 | |
|---|
| onload | 页面元素（包括图片多媒体等）加载完成后 |
| onbeforeunload | 用户退出页面 |
| onresize | 窗口或框架被重新调整大小 |
2. Evlent对象(通俗的来讲就是让某个事件产生的对象。如键盘，鼠标)
2.1 获取Evlent对象：
alert( arguments[ 0 ] ) ; // 现代浏览器都支持
alert( window.event ); // 针对 IE 系列尤其是 IE 8 以前的上古浏览器(作死时代的浏览器)
获取event对象的兼容写法: var e = arguments[ 0 ] || window.event;
3 事件传播
3.1事件源对象(事件源对象为触发事件的元素)
标准：event.target;
IE8-：event.srcElement;
兼容性写法：
var target = event.target || event.srcElement
3.2 事件冒泡
document.querySelector( ".outer" ).addEventListener( "click" , listener , false ); // false 表示冒泡
document.querySelector( ".wrapper" ).addEventListener( "click" , listener , false ); // false 表示冒泡
document.querySelector( ".inner" ).addEventListener( "click" , listener , false ); // false 表示冒泡
3.3事件监听与捕获（反冒泡）
document.querySelector( ".outer" ).addEventListener( "click" , listener , true ); // true 表示捕获
document.querySelector( ".wrapper" ).addEventListener( "click" , listener , true ); // true 表示捕获
document.querySelector( ".inner" ).addEventListener( "click" , listener , true ); // true 表示捕获
644
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
