本文主要是介绍js addEventListener 鼠标事件类型汇总，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
| Event Name | Fired When |
|---|---|
auxclick | A pointing device button (ANY non-primary button) has been pressed and released on an element. |
click (en-US) | 在元素上按下并释放任意鼠标按键。 |
contextmenu (en-US) | 右键点击（在右键菜单显示前触发）。 |
dblclick (en-US) | 在元素上双击鼠标按钮。 |
mousedown (en-US) | 在元素上按下任意鼠标按钮。 The |
mouseenter (en-US) | 指针移到有事件监听的元素内。当指针设备（通常是鼠标）被移动以使其热点位于触发事件的元素内时，将在元素上触发 mouseenter 事件。不支持bubble |
mouseleave (en-US) | 指针移出元素范围外(与mouseenter相反)（不冒泡）。 |
mousemove (en-US) | 指针在元素内移动时持续触发。鼠标光标的热点位于其(target)中时移动。(支持bubble) |
mouseover (en-US) | 指针移到有事件监听的元素或者它的子元素内。a pointing device (such as a mouse or trackpad) is used to move the cursor onto the element or one of its child elements.(支持bubble) |
mouseout (en-US) | 指针移出元素，或者移到它的子元素上。(与mouseover相反)(支持bubble) |
mouseup (en-US) | 在元素上释放任意鼠标按键。a button on a pointing device (such as a mouse or trackpad) is released while the pointer is located inside it.(支持bubble) |
pointerlockchange (en-US) | 鼠标被锁定或者解除锁定发生时。 |
pointerlockerror (en-US) | 可能因为一些技术的原因鼠标锁定被禁止时。 |
select (en-US) | 有文本被选中。 |
wheel (en-US) | 滚轮向任意方向滚动。 |
实际项目中的例子:
<script>var pf1 = document.getElementById("pf1");pf1.addEventListener("mousedown", function(evt) {window.parent.postMessage("mousedown:" + evt.target.getAttribute('name'), "*")});pf1.addEventListener("mouseup", function(evt) {window.parent.postMessage("mouseup:" + evt.target.getAttribute('name'), "*")});window.addEventListener("message", (event) => {if(event.data.startsWith('mousedown:')){let click_name = event.data.replace('mousedown:', '');let item_list = document.getElementsByName(click_name);for (const item of item_list) {item.style.backgroundColor = "#FDFF47";}}if(event.data.startsWith('mouseup:')){let click_name = event.data.replace('mouseup:', '');let item_list = document.getElementsByName(click_name);for (const item of item_list) {item.style.backgroundColor = "";}}}, false);
</script>
这篇关于js addEventListener 鼠标事件类型汇总的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
