javaScript：鼠标事件

目录

mouseenter/mouseover鼠标移入事件

mouseleave/mouseout鼠标移出事件

移入移出的区别 

mousedown 鼠标按下事件

mouseup鼠标抬起事件

click单击事件

  执行顺序

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

 mousemove 鼠标移动事件

dblclick 鼠标双击事件

contextmenu 鼠标右键事件

阻止鼠标的默认事件

---

mouseenter/mouseover鼠标移入事件

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

mouseleave/mouseout鼠标移出事件

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

移入移出的区别 

区别：

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

out先于 leave执行

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

mousedown 鼠标按下事件

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

mouseup鼠标抬起事件

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

click单击事件

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

  执行顺序

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

 mousemove 鼠标移动事件

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

dblclick 鼠标双击事件

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

contextmenu 鼠标右键事件

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

阻止鼠标的默认事件

阻止鼠标的默认事件

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

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