鼠标 与 滚轮事件
DOM3级中定义了9个鼠标事件，简介如下
<body style="height:1500px;">
<div style="width:200px;height: 200px; border:1px solid red" id="outer">
<div style="width:100px; height: 100px; border:1px solid green" id="inner">
</div>
</div>
</body>
不支持事件冒泡
mouseenter
鼠标从一个元素首次移动该元素范围时触发，该事件不冒泡，而且光标移动到后代元素上不会触发。
mouseleave
鼠标从该元素离开时，触发该事件，该事件不冒泡，而且光标移动到后代元素上不会触发。
这里说个题外话： jquery 的 hover 方法也是根据这两个事件来实现的，大家有时间可以看看
jQuery.fn.extend({
hover: function( fnOver, fnOut ) {
return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
},
bind: function( types, data, fn ) {
return this.on( types, null, data, fn );
},
unbind: function( types, fn ) {
return this.off( types, null, fn );
},
delegate: function( selector, types, data, fn ) {
return this.on( types, selector, data, fn );
},
undelegate: function( selector, types, fn ) {
// ( namespace ) or ( selector, types [, fn] )
return arguments.length === 1 ? this.off( selector, "**" ) : this.off( types, selector || "**", fn );
}
});
支持事件冒泡：
mousemove
当鼠标指针在元素内部移动时重复地触发（包括后代上），不能通过键盘触发这个事件。
click
在用户单击主鼠标按钮或者按下回车键时触发。
dbclick
用户双击主鼠标键时触发
mouseout
在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。 不能通过键盘触发这个事件。
mouseover
在鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内时触发。不可通过键盘触发这个事件。
mousedown
当鼠标按下时触发该事件，不可通过键盘触发 支持
mouseup
当用户释放鼠标按钮时触发。 不能通过键盘触发这个事件。
时间： 2024-10-27 00:20:55