UI 事件与表单事件

UI 事件与表单事件

1. 鼠标事件

1-1 事件类型

针对鼠标操作的行为有多种事件类型：

• mousedown/mouseup —— 在元素上点击/释放鼠标按钮
• mouseover/mouseout —— 鼠标指针从一个元素上移入/移出
• mousemove —— 鼠标在元素上的每个移动都会触发此事件
• click —— 如果使用的是鼠标左键，则在同一个元素上的 mousedown 及 mouseup 相继触发后，触发该事件
• dblclick —— 在短时间内双击同一元素后触发。如今已经很少使用了
• contextmenu —— 在鼠标右键被按下时触发。还有其他打开上下文菜单的方式，例如使用特殊的键盘按键，在这种情况下它也会被触发，因此它并不完全是鼠标事件
• oncopy —— 复制内容时触发
• mouseenter/mosueleave —— 鼠标移入/移出时触发，不产生冒泡行为

鼠标事件触发时的事件顺序：mousedown → mouseup → click

<button class="btn">click</button>
<button class="btn">mousedown</button>
<button class="btn">mouseup</button>
<button class="btn">mouseover</button>
<button class="btn">mouseout</button>
<button class="btn">mousemove</button>
<button class="btn">dblclick</button>
<button class="btn">contentmenu</button>
<button class="btn">oncopy</button>
<button class="btn">mouseenter</button>
<button class="btn">mouseleave</button>

<script>
    let btn = document.querySelector('.btn');
    let btn1 = document.querySelectorAll('.btn')[1];
    let btn2 = document.querySelectorAll('.btn')[2];
    let btn3 = document.querySelectorAll('.btn')[3];
    let btn4 = document.querySelectorAll('.btn')[4];
    let btn5 = document.querySelectorAll('.btn')[5];
    let btn6 = document.querySelectorAll('.btn')[6];
    let btn7 = document.querySelectorAll('.btn')[7];
    let btn8 = document.querySelectorAll('.btn')[8];
    let btn9 = document.querySelectorAll('.btn')[9];
    let btn10 = document.querySelectorAll('.btn')[10];


    // click 鼠标左键按钮
    btn.addEventListener('click', function () {
     
        console.log('鼠标左键点击')
    })

    // mousedown 元素上点鼠标按钮点击
    btn1.addEventListener('mousedown', function () {
     
        console.log('鼠标按钮点击')
    })
    // mouseup 元素上点鼠标按钮释放
    btn2.addEventListener('click', function () {
     
        console.log('鼠标按钮释放')
    })

    // mouseover 鼠标指针移入
    btn3.addEventListener('mouseover', function () {
     
        console.log('鼠标指针移出')
    })
    // mouseout 鼠标指针移出
    btn4.addEventListener('mouseout', function () {
     
        console.log('鼠标指针移入')
    })

    // mousemove 鼠标在元素上移动
    btn5.addEventListener('mousemove', function () {
     
        console.log('鼠标指针在元素上移动')
    })

    // dblclick 双击同一元素
    btn6.addEventListener('dblclick', function () {
     
        console.log('鼠标左键双击')
    })

    // contextmenu 点击鼠标右键
    btn7.addEventListener('contextmenu', function () {
     
        console.log('鼠标右键点击')
    })

    // oncopy 复制内容
    btn8.addEventListener('oncopy', function () {
     
        console.log('内容复制')
    })

    // mouseenter 鼠标移入
    btn9.addEventListener('mouseenter', function () {
     
        console.log('鼠标移入')
    })
    // mouseleave 鼠标移出
    btn10.addEventListener('mouseleave', function () {
     
        console.log('鼠标移出')
    })
</script>

1-2 鼠标按钮

在 mousedown 和 mouseup 事件中则可能需要用到 event.button，因为这两个事件在任何按键上都会触发，所以我们可以使用 button 属性来区分是左键单击还是右键单击

event.button —— 属性允许获取确切的鼠标按钮

案件	event.button
左键 (主要按键)	0
中键 (辅助按键)	1
右键 (次要按键)	2
X1 键 (后退按键)	3
X2 键 (前进按键)	4

<button class="btn">鼠标按钮</button>

<script>
    // 鼠标按钮 event.button
    // 左键 0,右键 1,中间2,侧键x1后退 3, 侧键x2前进 4;
    let btn = document.querySelector('.btn');
    btn.addEventListener('mousedown',function(e) {
     
        console.log(event.button)
    })
</script>

1-3 鼠标组合键

鼠标事件可以与组合键结合触发事件，当事件触发时，按下的键正确则返回 true，否则返回 false

**Tips：**在 Mac 上我们通常使用 Cmd 代替 Ctrl

• shiftKey：Shift
• altKey：Alt（或对于 Mac 是 Opt）
• ctrlKey：Ctrl
• metaKey：对于 Mac 是 Cmd

<button class="btn">鼠标按钮</button>

<script>
    let btn = document.querySelector('.btn');
    // 鼠标组合键
    // shiftKey shift, altKey alt, ctrlKey ctrl, metaKey mac的cmd键
    btn.addEventListener('click', function(e) {
     
        if(event.ctrlKey && event.altKey ){
     
            console.log('ctrl + alt + click')
        }
    })
</script>

1-4 获取坐标

• 相对于窗口坐标 clientX，clientY

  • 以当前窗口的左上角为参照物，并且同一位置的坐标会随着页面的滚动而改变

• 相对于文档坐标 pageX，pageY

  • 以文档的左上角为参照物，并且同一位置的坐标不随页面的滚动而改变

// pageX pageY 相对于文档 不会随页面滚动而改变
document.addEventListener("mousemove", function(e) {
   
    console.log(event.pageX, event.pageY)