JavaScript第8篇，JavaScript鼠标事件（js的鼠标事件，vue的鼠标事件）

前言：JavaScript中的鼠标事件允许你响应用户的鼠标操作，如点击、移动和滚动等。这些事件通常绑定到DOM元素上，当特定的鼠标操作发生时，就会触发相应的事件处理函数。这里来记录一下

---

JavaScript ～ 第 8 篇   ——   JavaScript鼠标事件

一. JavaScript鼠标事件，介绍

        var div = document.getElementById("box")

        // 1、单击事件 onclick
        div.onclick = function(){
            console.log("单击")
        }
        // 2、双击事件 ondblclick
        div.ondblclick = function(){
            console.log("双击")
        }
        // 3、鼠标按下  onmousedown
        div.onmousedown = function(){
            console.log('鼠标按下')
        }
        // 4、鼠标抬起  onmouseup
        div.onmouseup = function(){
            console.log('鼠标抬起')
        }
        // 5、鼠标移动  onmousemove
        div.onmousemove = function(){
            console.log("鼠标在这个div内部正在移动ing")
        }
        // 6、右键菜单  oncontextmenu
        div.oncontextmenu = function(){
            console.log("调出右键菜单")
        }
        // 7、滑轮滚动  onwheel
        div.onwheel = function(){
            console.log("滑轮滚动")
        }
        // 8、鼠标移入移出mouseenter/mouseleave  不继承,
        //    鼠标在子标签上不会触发事件;
        //    简单来说就是鼠标进入div区域会显示移入，出div就会显示移出；
        div.onmouseenter = function(){
            console.log("鼠标移入")
        }
        // 9、
        div.onmouseleave = function(){
            console.log("鼠标移出")
        }

        // 10、鼠标悬停离开mouseover/mouseout 会继承,
        //     鼠标在子标签上也会触发事件，
        //     而悬停离开的话，就是鼠标进入div区域会提示悬停，
        //     然后鼠标进入p标签区域会先显示;
        //     离开 再悬停，最后移出显示离开；
        div.onmouseover = function(){
            console.log("鼠标移入")
        }
        // 11、
        div.onmouseout = function(){
            console.log("鼠标移出")
        }

---

二. VueJS中的鼠标事件，介绍。JavaScript鼠标事件和Vue中的鼠标事件区别是省略了on字符

鼠标单击：  @click="方法名" ；

鼠标双击 ： @dblclick="方法名" ；

鼠标按下：  @mousedown="方法名" ；

鼠标抬起：  @mouseup="方法名" ；

鼠标移动：  @mousemove="方法名" ；

鼠标右键    @contextmenu="方法名" ;

鼠标滚轮：  @mousewheel="方法名" ;




//mouseenter 事件只有在鼠标指针进入被选元素时被触发；
鼠标进入： @mouseenter="方法名" ；、

//mouseover 事件在鼠标指针进入被选元素或任意子元素时都会被触发；
鼠标进入： @mouseover="方法名" ；
//mouseenter和mouseover的区别在于mouseover有冒泡行为；




鼠标离开：  @mouseleave=“方法名” ；
鼠标离开：  @mouseout=“方法名” ；
//mouseleave和mouseout的区别在于mouseout有冒泡行为；