javaScript：鼠标事件

mouseenter/mouseover鼠标移入事件

mouseleave/mouseout鼠标移出事件

移入移出的区别

[mousedown 鼠标按下事件](#mousedown 鼠标按下事件)

mouseup鼠标抬起事件

click单击事件

执行顺序

[执行顺序是 mousedown --> mouseup --> click](#执行顺序是 mousedown --> mouseup --> click)

[mousemove 鼠标移动事件](#mousemove 鼠标移动事件)

[dblclick 鼠标双击事件](#dblclick 鼠标双击事件)

[contextmenu 鼠标右键事件](#contextmenu 鼠标右键事件)

阻止鼠标的默认事件

mouseenter/mouseover鼠标移入事件

javascript 复制代码

//鼠标移入事件
wp.onmouseenter = function(){
    wp.innerHTML+='凤凰传奇'
    wp.style.background = cos();
}

mouseleave/mouseout鼠标移出事件

javascript 复制代码

//鼠标移出事件
wp.onmouseleave = function(){
    wp.innerHTML+='月饼'
    wp.style.background = cos();
}

移入移出的区别

区别：

1.如果一个元素同时绑定这四个事件，那么他的执行顺序是 over 先于 enter执行

out先于 leave执行

2.enter和leave 没有事件冒泡，out和over有事件冒泡

mousedown 鼠标按下事件

javascript 复制代码

let num = 0;
wp.onmousedown = function(){
    num++;
    wp.innerHTML = '按下'+num;
}

mouseup鼠标抬起事件

javascript 复制代码

wp.onmouseup = function(){
    num++;
    wp.innerHTML ='抬起'+num;
}

click单击事件

javascript 复制代码

wp.onclick = function(){
    num++;
    wp.innerHTML ='点击'+num;
}

执行顺序

执行顺序是 mousedown --> mouseup --> click

mousemove 鼠标移动事件

javascript 复制代码

let n = 0;
let wp = document.querySelector('#wp');   //document html文档
wp.onmousemove = function(){
    n++;
    wp.innerHTML = n;
    wp.style.background = cos();
}

dblclick 鼠标双击事件

javascript 复制代码

wp.ondblclick = function(e){
    wp.style.width = wp.clientWidth + 5 +'px';
    wp.style.height = wp.clientHeight + 5 +'px';
    
    e.preventDefalut();
    return false;
};

contextmenu 鼠标右键事件

javascript 复制代码

wp.oncontextmenu = function(e){   
    console.log('右键');
    e.preventDefault();
    // return false;
}

阻止鼠标的默认事件

阻止鼠标的默认事件

1.直接在函数的最后，执行一句 return false;

2.通过事件对象调用preventDefault() 方法，也可以阻止默认事件，每一个元素绑定的鼠标事件，都会有一个当前事件对象，该事件对象包含了事件的所有信息