Js查漏补缺-10

0x00 事件委托

    当需要给多个元素设置监听器时，不给子元素设置监听器，而是给父元素设置监听器，利用冒泡事件来设置子元素的事件，这样可以减少dom的操作次数，提高程序性能。

   

  

    

      
1
      
2
      
3
      
4
    
  
  

0x01 鼠标事件

    onclick 点击鼠标左键触发

    onmouseover 鼠标经过触发

    onmouseout 鼠标离开触发

    onmousemove 鼠标移动触发

    onmouseup 鼠标弹起触发

    onmousedown 鼠标按下触发

    contextmenu 可以用来禁止鼠标右键菜单

document.addEventListener('contextmenu', (e) => {
    e.preventDefault(); // 禁止默认行为
})

    selectstart 可以用来禁止鼠标选中

document.addEventListener('selectstart',(e) => {
    e.preventDefault();
})

    鼠标事件对象MouseEvent

Element.addEventListener('click',(e) =>{
    console(e.clientX); // 返回鼠标在可视页面的x坐标
    console(e.clientY); // 返回鼠标在可视页面的y坐标
    console(e.pageX); // 返回鼠标在文档页面的x坐标
    console(e.pageX); // 返回鼠标在文档页面的y坐标
    console(e.screenX); // 返回鼠标在电脑屏幕中的x坐标
    console(e.clientX); // 返回鼠标在电脑屏幕中的y坐标
})

    跟随鼠标的gif图标