# js事件类型

# 鼠标事件

鼠标事件会触发在Z-INDEX最高的那个元素上

事件名	事件说明
click	鼠标单击事件，同时触发 mousedown/mouseup
dblclick	当用户双击鼠标时触发
contextmenu	当上下文菜单即将出现时触发。当前浏览器在鼠标右击时显示上下文菜单 ,可以取消的事件，
mousedown	按下鼠标按键时触发
mouseup	释放鼠标按键时触发
mousemove	移动鼠标时触发
mouseover	鼠标进入元素时触发。relatedTarget(在IE中是fromElement)指的是鼠标来自的元素
mouseout	鼠标离开元素时触发。relatedTarget(在IE中是toElement)指的是鼠标要去往的元素
mouseenter	鼠标移入时触发，不产生冒泡行为
mosueleave	鼠标移出时触发，不产生冒泡行为
oncopy	复制内容时触发
scroll	元素滚动时，可以为元素设置overflow:auto; 产生滚动条来测试

# 鼠标事件冒泡

提示

页面上的所有元素都支持鼠标事件，除了mouseenter和mouseleave事件外，所有的鼠标事件都会冒泡
[注意]safari浏览器不支持mouseenter和mouseleave事件

<button id="btn" style="height: 30px;width: 30px;"></button>
<script>
//鼠标移入移出按钮时，显示false，表示不冒泡
test.onmouseenter = test.onmouseleave =function(e){
    test.innerHTML = e.bubbles; // false
}
</script>

<button id="test" style="height: 30px;width: 200px;"></button>
<script>
// 鼠标移入移出按钮时，显示true，表示冒泡
test.onmouseover = test.onmouseout =function(e){
    test.innerHTML = e.bubbles; // true
}
</script>

# 鼠标事件顺序

# 鼠标移入

触发mouseover、mouseenter和mousemove事件

浏览器区别

IE浏览器会先触发一次mousemove事件，再触发mouseover和mouseenter事件，再触发多次mousemove事件
其他浏览器都是先触发mouseover和mouseenter事件，再触发多次mousemove事件

box.onmouseover = box.onmouseenter=box.onmousemove =function(e){
    e = e || event;
    box.innerHTML += e.type+ ';';  
    // [其他浏览器]  mouseover-> mouseenter-> mousemove  
    // [IE浏览器]    mousemove-> mouseover-> mouseenter->mousemove
}
</script>

# 鼠标移出

触发mousemove、mouseleave和mouseout事件

提示

所有浏览器的顺序都是

(1)mousemove
(2)mouseout
(3)mouseleave

box.onmouseleave = box.onmouseout=box.onmousemove = function(e){
    e = e || event;
    box.innerHTML += e.type+ ';'; // mousemove-> mouseout -> mouseleave
}

# 单机鼠标

触发mousedown、mouseup、click

# 双击鼠标

触发mousedown、mouseup、click、dblclick事件

👻

一般地，浏览器的顺序是(1)mousedown、(2)mouseup、(3)click、(4)mousedown、(5)mouseup、(6)click、(7)dblclick
但IE8-浏览器有一个小bug，在双击事件中，它会跳过第二个mousedown和click事件，顺序为(1)mousedown、(2)mouseup、(3)click、(4)mouseup、(5)dblclick

box.onclick = box.ondblclick  = box.onmousedown = box.onmouseup=function(e){
    e = e || event;
    box.innerHTML += e.type+ ';'; // mousedown=>mouseup=>click=>mousedown=>mouseup=>click=>dblclick;
}

# 点击鼠标右键

触发mousedown、mouseup、contextmenu事件

👾

一般地，浏览器的顺序是(1)mousedown、(2)mouseup、(3)contextmenu
但safari浏览器有一个小bug，它不触发mouseup事件，顺序为(1)mousedown、(2)contextmenu

box.oncontextmenu  = box.onmousedown = box.onmouseup=function(e){
    e = e || event;
    box.innerHTML += e.type+ ';'; // mousedown=>mouseup=>contextmenu
}

# 嵌套元素的移入移出时

触发mouseover、mouseenter、mouseleave、mouseout事件

从父级元素进入子级元素时，顺序为:(1)父级元素的mouseout、(2)子级元素的mouseover、(3)父级元素的mouseover、(4)子级元素的mouseenter
从子级元素进入父级元素时，顺序为:(1)子级元素的mouseout、(2)父级元素的mouseout、(3)子级元素的mouseleave、(4)父级元素的mouseover

可以看出mouseover、mouseout和mouseleave、mouseenter事件的区别

1、mouseover、mouseout是冒泡的，而mouseleave和mouseenter是不冒泡的
2、从父级元素进入子级元素时，不会触发父级元素的mouseleave事件
3、从子级元素进入父级元素时，不会触发父级元素的mouseenter事件

← JS事件 Web Storage →