DOM事件,你学费了吗

鼠标事件

1. click 鼠标单击事件；
2. dblclick 鼠标单双击击事件；
3. mouseover 鼠标经过事件（当前的对象）；
4. mouseout 鼠标离开事件（当前的对象）；
5. mouseenter 鼠标经过事件（当前对象的所有范围）；
6. mouseleave 鼠标离开事件（当前对象的所有范围）；
7. mousedown 鼠标按下事件；
8. mouseup 鼠标释放事件；
9. mousemove 鼠标移动事件；
10. contextmenu 鼠标右击事件；
11. mousewheel 鼠标滚轮事件（谷歌、IE）；
12. addEventListener 鼠标滚轮事件（火狐）。

例：（事件的添加与删除）

	<!-- 添加事件 -->
	<!-- 1 -->
    <button onclick=""></button>
	<!-- 2 -->
    <script>
        btn.onclick = function(){}
        //当添加多个事件时，后者会覆盖前者
    </script>
    <!-- 3 -->
    <script>
        btn.addEventListener('click',function(){},boolean)
        //当添加多个事件时都可以生效，（jQuery中添加事件多个事件时也是都可以生效）
        //当boolean为true时为事件捕获
        //当boolean为false时为事件冒泡
    </script>

	<!-- 删除事件 -->
	<script>
        btn.removeEventListener('click',function(){},boolean)
    </script>

事件流

事件流分为事件冒泡和事件捕获

1. 事件冒泡：当一个元素接收到事件时，会把他接收到的事件传到父级，直到window；
2. 事件捕获：当一个元素接收到事件时，会把他接收到的事件传到子级，直到window。

阻止事件冒泡

e.stopPropagation()

阻止默认行为

（例如超链接的点击跳转，表单的提交按钮）
e.preventDefault()

鼠标距离浏览器的位置

1. e.clientX 鼠标距离浏览器左侧的坐标
2. e.clientY 鼠标距离浏览器顶部的坐标

表单事件

1. focus 获取焦点事件；
2. blur 失去焦点事件；
3. change 当文本框内容改变且失去焦点触发事件；
4. select 当用户选择文本框中的字符触发事件；
5. submit 表单提交事件；
6. reset 表单重置事件。

键盘事件

1. keydown 当用户按下任何键触发事件；
2. keypress 当用户按下键盘上打印字符键触发事件；
3. keyup 当用户按下并释放键盘上某个键触发事件。

UI事件（用户界面事件）

1. load 页面或图片加载加载完再执行事件；
2. resize 窗口大小改变时触发事件；
3. scroll 当文本被滚动时触发事件。