day13JS-MoseEvent事件

1. MouseEvent的类别

mousedown ：按下键
mouseup ：释放键
click ：左键单击
dblclick ：左键双击
contextmenu ：右键菜单
mousemove ：鼠标移动
mouseover : 鼠标经过。可以做事件委托，子元素可以冒泡给父元素，让父元素侦听了mouseover，子元素也是可以触发的。
mouseout ：鼠标滑开。可以做事件委托，子元素可以冒泡给父元素，让父元素侦听了mouseout，子元素也是可以触发的。
mouseenter ：鼠标进入。
mouseleave ：鼠标离开。

注意！！！

执行顺序：mousedown —> mouseup —> click
区别：mouseover和mouseout子元素也会触发，可以冒泡触发。
区别：mouseenter和mouseleave是针对侦听的对象触发，阻止了冒泡。

使用案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
            left: 200px;
            top: 200px;
        }

        .div2 {
            width: 50px;
            height: 50px;
            background-color: orange;
            position: absolute;
            left: 25px;
            top: 25px;
        }
    </style>
</head>

<body>
    <div class="div1">
        <div class="div2">你好</div>
    </div>
    <script>

        var div1 = document.querySelector(".div1");
        div1.addEventListener('mousedown', mouseHandler);
        div1.addEventListener('mouseup', mouseHandler);
        div1.addEventListener('click', mouseHandler);
        div1.addEventListener("mousemove", mouseHandler);
        div1.addEventListener("dblclick", mouseHandler)
        div1.addEventListener("contextmenu", mouseHandler);
        div1.addEventListener("mouseover", mouseHandler);
        div1.addEventListener("mouseout", mouseHandler);
        div1.addEventListener("mouseenter", mouseHandler);
        div1.addEventListener("mouseleave", mouseHandler);


        function mouseHandler(e) {
            console.log(e.type);
            if (e.type === "mousedown") {
                // 当有文本时，使用阻止默认行为可以禁止选中文本
                e.preventDefault();
            } else if (e.type === "contextmenu") {
                e.preventDefault();
            }
        }
    </script>
</body>

</html>

2. MoseEvent鼠标事件的属性详解

2.1 第一组事件属性

当鼠标事件触发时，同时按下对应的键。

1. altKey 事件属性返回一个布尔值。指示在指定的事件发生时，Alt 键是否被按下并保持住了。

altKey使用语法：event.altKey=true|false|1|0

function isKeyPressed(event){
    if (event.altKey==1){
        alert(" ALT 键被按下!");
    }else{
        alert(" ALT 键没被按下!");
    }
}

2. ctrlKey 事件属性可返回一个布尔值，指示当事件发生时，Ctrl 键是否被按下并保持住。

ctrlKey使用语法：event.ctrlKey=true|false|1|0

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body onmousedown="isKeyPressed(event)">

<p>单击文档中的某个地方。一个警告框会告诉你你是否按下CTRL键。</p>
<script>
function isKeyPressed(event){
    if (event.ctrlKey==1){
        alert("CTRL键被按下!");
    }else{
        alert("CTRL键没被按下!");
    }
}
</script>
</body>
</html>

3. metaKey 事件属性可返回一个布尔值，指示当事件发生时，"meta" 键是否被按下并保持住。metaKey在MAC中是command键。

metaKey使用语法：event.metaKey

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body onmousedown="isKeyPressed(event)">

<p>单击文档中的某个地方。一个警告框会告诉你是否你按下meta关键。</p>
<script>
function isKeyPressed(event){
    if (event.metaKey==1){
        alert("meta键被按下!");
    }else{
        alert("meta键没被按下!");
    }
}
</script>
</body>
</html>

4. shiftKey 事件属性可返回一个布尔值，指示当事件发生时，"SHIFT" 键是否被按下并保持住。

shiftKey 使用语法：event.shiftKey=true|false|1|0

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>

</head>
<body onmousedown="isKeyPressed(event)">

<p>点击该段落，弹窗会提示是否按下 shift 键。</p>
<script>
function isKeyPressed(event){
    if (event.shiftKey==1){
        alert(" shift 键被按下!");
    }
    else{
        alert(" shift 键没被按下!");
    }
}
</script>
</body>
</html>

2.2 第二组事件属性

当使用mousedown，mouseup事件触发时，按下了哪个键

mousedown：当鼠标指针移动到元素上方，并按下鼠标按键（左、右键均可）时，会发生 mousedown事件。

mouseup：当在元素上松开鼠标按键（左、右键均可）时，会发生 mouseup事件。

1. button: 鼠标左键(参数为0时) ，鼠标中键(参数为1时) ，鼠标右键(参数为2时)。button 事件属性可返回一个整数，指示当事件被触发时哪个鼠标按键被点击。

2. buttons: 鼠标左键(参数为1时) ，鼠标中键(参数为3时) ，鼠标右键(参数为2时)。

3. which: 鼠标左键(参数为1时) ，鼠标中键(参数为2时) ，鼠标右键(参数32时)。

2.3 第三组事件属性

1. detail ：用于滚轮滚动触发滚动距离。detail:1。

2. relatedTarget ：失焦聚焦时，上一次触发的元素。 relatedTarget:null。

2.4 第四组事件属性

鼠标点击相对视口的坐标，位置是相对位置。

1. clientX事件属性返回当事件被触发时鼠标指针相对于浏览器页面（或客户区）的水平坐标。客户区指的是当前窗口。

使用方法：event.clientX

2. clientY 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（客户区）的垂直坐标。客户区指的是当前窗口。

使用方法：event.clientY

下面的例子可显示出事件发生时鼠标指针的坐标：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function show_coords(event){
    var x=event.clientX;
    var y=event.clientY;
    alert("X coords: " + x + ", Y coords: " + y);
}
</script>
</head>
<body>

<p onmousedown="show_coords(event)">请在文档中点击。</p>

</body>
</html>

x和y与上面的clientX和clientY作用一样。

2.5 第五组事件属性

鼠标点击相对页面左上角距离，位置是绝对位置。

pageX :水平方向。

pageY :垂直方向。

2.6 第六组事件属性

相对屏幕左上角距离。

screenX 事件属性可返回事件发生时鼠标指针相对于屏幕的水平坐标。

screenY 事件属性可返回事件发生时鼠标指针相对于屏幕的垂直坐标。

2.7 第七组事件属性

是mousemove事件相对上次移动位置的偏移值。

movementX :水平方向。

movementY :垂直方向。

2.8 第八组事件属性

1. 如果父子容器定位，都是相对e.target这个目标对象的左上角距离。

2. 如果子元素没有定位，layerX、layerY则向上查找定位的父元素，如果没有找到则相对html左上角定位，如果找到父元素定位了，则相对父元素左上角距离。

layerX:519

layerY:112

offsetX:520

offsetY:112

3. input标签和焦点事件

3.1 焦点事件

focus：聚焦事件。在元素获得焦点时触发。这个事件不会冒泡；所有浏览器都支持。

blur：失焦事件。元素失去焦点时触发。这个事件不会冒泡；所有浏览器都支持。

注意！！！

1. 不能事件委托，仅用于input、textArea、select、a、button。

2. blur、focus 不支持冒泡。

focusin ：聚焦事件。在元素获得焦点时触发，与 HTML 事件 focus 等价，但它冒泡。

focusout ：失焦事件。在元素失去焦点时触发。与 HTML 事件 blur 等价，冒泡。

注意！！！

1. 可以事件委托，可以用表单和表单元素。

2. focusin、focusout 支持冒泡。

当焦点从页面的一个元素移动到另一个元素时，事件的触发顺序：

focusout 在失去焦点的元素上触发。
focusin 在获得焦点的元素上触发。
blur 在失去焦点的元素上触发。
focus 在获得焦点的元素上触发。

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="#">超链接</a>
    <form action="">
        <input type="text" name="user">
        <button type="submit">提交</button>
    </form>
    <script>

        let input=document.querySelector("input");
        input.addEventListener("focus",focusHandler);
        input.addEventListener("blur",focusHandler);

        function focusHandler(e){
            console.log(e);
        }

        let form=document.querySelector("form");
        form.addEventListener("focusin",focusHandler);
        form.addEventListener("focusout",focusHandler);

        function focusHandler(e){
            console.log(e);
        }

    </script>
</body>
</html>

3.2 input标签 (input事件)

input 输入时触发事件，可以委托给父元素。 input可以当作一个事件使用。

input是事件时常用的事件属性：

data：每次输入到 input 中的文本内容。
inputType :输入的类型（ "insertCompositionText"）。
isComposing : 是否输入法输入。是的时候值为true。

案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <a href="#">超链接</a>
    <form action="">
        <input type="text" name="user">
        <button type="submit">提交</button>
    </form>
    <script>

        let id;
        let input = document.querySelector("input");
        input.addEventListener("input", inputHandler);

        function inputHandler(e) {
            if (id) return;
            id = setTimeout(() => {
                clearTimeout(id);
                id = undefined;
                console.log(input.value);
            }, 500)
        }

    </script>
</body>

</html>

4. 节流和防抖

节流：第一次进入执行程序，在一定时间内不能再次进入，等待时间过后可以再次进入，然后又不能进入。

防抖：第一次不能进入，间隔一定时间后可以进入，然后不能进入，间隔一定时间后再次可以进入。

setTimeout(() => { }, 500)

let id = setTimeout(function () {
      clearTimeout(id);
}, 500)

5. 拖拽案例

方法一：