021.鼠标事件与事件对象
2026-03-09 06:16:10
鼠标事件是用户在网页上使用鼠标时触发的一系列事件，包括单击、双击、按下、抬起、移动、进入和离开等。
鼠标单双击，按下抬起事件：
单击（click）：当用户单击鼠标左键时触发。
双击（dblclick）：当用户快速连续单击鼠标左键两次时触发。
按下（mousedown）：当用户按下任意鼠标按钮时触发。
抬起（mouseup）：当用户释放按住的鼠标按钮时触发。
这里用的是DOM0级的事件处理程序
鼠标移动事件：
mousemove：当鼠标指针在元素上移动时触发。
鼠标进入和离开事件：
mouseover：当鼠标指针移动到元素上时触发，包括其子元素。
mouseenter：当鼠标指针首次移动到元素上时触发，不包括其子元素触发的移动。
mouseout：当鼠标指针移出元素时触发，包括其子元素。
mouseleave：当鼠标指针移出元素时触发，不包括其子元素移出触发的离开。
mouseover与mouseenter的区别：
mouseover事件会在鼠标指针移动到元素或其子元素上时触发。
mouseenter事件则只会在鼠标指针首次移动到元素上时触发，不会因移动到子元素而重复触发。
wheel滚轮同理：鼠标滚轮滚动时也会触发相应的事件。
事件发生后，会产生一个事件对象（Event Object），该对象作为参数传递给事件监听函数。事件对象包含了事件的详细信息，如触发事件的元素、事件类型、鼠标位置等。
Event对象属性：
Event.Target：返回触发事件的元素。即点击或操作了哪个元素，就返回该元素。
可以对按钮进行修改，点击后button的文字变成"Click"
Event.type：返回触发的事件类型（如"click"、"dblclick"、"mousedown"等）。该属性是只读的，表示事件的具体类型。
如果是ondblclick则是返回类型为"dblclick"
Event对象方法：
Event.preventDefault()：用于阻止事件的默认行为。例如，阻止链接的跳转、阻止表单的提交等。
Event.stopPropagation()：用于阻止事件冒泡。即阻止事件从触发它的元素传播到父元素。
直接这样子点box会既触发box也触发父级root
添加了stopPropagation则不会触发父级
综上所述，鼠标事件是用户在网页上使用鼠标时触发的事件，而事件对象则包含了事件的详细信息。通过事件对象，我们可以获取触发事件的元素、事件类型等信息，并可以使用事件对象的方法来阻止事件的默认行为或阻止事件冒泡。
热门标签
