JavaScript 事件类型

1. 鼠标事件

鼠标事件指与鼠标相关的事件。

1.1 鼠标事件的类型

click：按下鼠标时触发。

dblclick：在同一个元素上双击鼠标时触发。

mousedown：按下鼠标键时触发。

mouseup：释放按下的鼠标键时触发。

mousemove：当鼠标在一个节点内部移动时触发。当鼠标持续移动时，该事件会连续触发。为了避免性能问题，建议对该事件的监听函数做一些限定，比如限定一段时间内只能运行一次。

mouseenter：鼠标进入一个节点时触发，进入子节点不会触发这个事件。

mouseover：鼠标进入一个节点时触发，进入子节点也会触发这个事件。

mouseout：鼠标离开一个节点时触发，离开子节点也会触发这个事件。

mouseleave：鼠标离开一个节点时触发，离开子节点不会触发这个事件。

wheel：滚动鼠标的滚轮时触发。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        #mousemoveDiv,#mouseenterDiv,#mouseoverDiv{
            height: 200px;
            width: 200px;
            text-align: center;
            line-height: 200px;
            background-color: aquamarine;
            margin-top: 5px;
            overflow: hidden;
        }
        .sonDiv{
            height: 100px;
            width: 100px;
            background-color: bisque;
            margin: 50px auto;
            line-height: 100px;
        }
        #blank{
            height: 500px;
            width: 500px;
            background-color: cadetblue;
        }
    </style>
</head>
<body>
    <button id="clickButton">click</button>
    <button id="dbclickButton">dbclick</button>
    <button id="mousedownButton">mousedown</button>
    <button id="mouseupButton">mouseup</button>
    <div id="mousemoveDiv">mousemove</div>
    <div id="mouseenterDiv">
        <div class="sonDiv">mouseenter</div>
    </div>
    <div id="mouseoverDiv">
        <div class="sonDiv">mouseover</div>
    </div>
    <div id="blank"></div>
    <script>
        var myClick = document.getElementById("clickButton");
        var myDbclick = document.getElementById("dbclickButton");
        var myMousedown = document.getElementById("mousedownButton");
        var myMouseup = document.getElementById("mouseupButton");
        var myMousemove = document.getElementById("mousemoveDiv");
        var myMouseenter = document.getElementById("mouseenterDiv");
        var myMouseover = document.getElementById("mouseoverDiv");
        var myWheel = document.body.onwheel = function(){
            console.log("wheel");
        };
        myClick.onclick = function(){
            console.log("click");
        };
        myDbclick.ondblclick = function(){
            console.log("dbclick");
        };
        myMousedown.onmousedown = function(){
            console.log("mousedown");
        };
        myMouseup.onmouseup = function(){
            console.log("mouseup");
        };
        myMousemove.onmousemove = function(){
            console.log("mousemove");
        };
        myMouseenter.onmouseenter = function(){
            console.log("mouseenter");
        };
        myMouseenter.onmouseleave = function(){
            console.log("mouseleave");
        };
        myMouseover.onmouseover = function(){
            console.log("mouseover");
        };
        myMouseover.onmouseout = function(){
            console.log("mouseout");
        };
    </script>
</body>
</html>

1.2 鼠标事件的注意事项

click事件指的是，用户在同一个位置先完成mousedown动作，再完成mouseup动作。因此，触发顺序是，mousedown首先触发，mouseup接着触发，click最后触发。

dblclick事件则会在mousedown、mouseup、click之后触发。

<body>
    <button id="Button">click</button>
    <script>
        var myClick = document.getElementById("Button");
        myClick.onclick = function(){
            console.log("click");
        };
        myClick.ondblclick = function(){
            console.log("dbclick");
        };
        myClick.onmousedown = function(){
            console.log("mousedown");
        };
        myClick.onmouseup = function(){
            console.log("mouseup");
        };
    </script>
</body>

mouseover事件和mouseenter事件，都是鼠标进入一个节点时触发。两者的区别是，mouseenter事件只触发一次，而只要鼠标在节点内部移动，mouseover事件会在子节点上触发多次。

2. 键盘事件

键盘事件由用户击打键盘触发。

2.1 键盘事件的类型

keydown：按下键盘时触发。

keypress：按下有值的键时触发，如SHIFT这样无值的键就不会触发。

keyup：松开键盘时触发该事件。

<body>
    <input type="text" id="keydown">
    <input type="text" id="keypress">
    <input type="text" id="keyup">
    <script>
        var myKeydown = document.getElementById("keydown");
        var myKeypress = document.getElementById("keypress");
        var myKeyup = document.getElementById("keyup");
        myKeydown.onkeydown = function(){
            console.log("keydown");
        };
        myKeypress.onkeypress = function(){
            console.log("keypress");
        };
        myKeyup.onkeyup = function(){
            console.log("keyup");
        };
    </script>
</body>

2.2 键盘事件的注意事项

按下有值的键时，先触发keydown事件，再触发keypress事件。

<body>
    <input type="text" id="key">
    <script>
        var myKey = document.getElementById("key");
        myKey.onkeydown = function(){
            console.log("keydown");
        };
        myKey.onkeypress = function(){
            console.log("keypress");
        };
    </script>
</body>

2.3 相关的Event对象

keyCode：键盘的每个键的唯一标识。如enter键的keyCode为13。

<body>
    <input type="text" id="key">
    <script>
        var myKey = document.getElementById("key");
        myKey.onkeydown = function(e){
            if (e.keyCode === 13) {
                console.log("回车");
            }
        };
    </script>
</body>

3. 表单事件

表单事件是在使用表单元素及输入框元素可以监听的一系列事件。

3.1 表单事件的类型

input：input事件当<input><select><textarea>的值发生变化时触发。对于复选框或单选框，用户改变选项时，也会触发这个事件。另外，对于打开contenteditable属性的元素，只要值发生变化，也会触发input事件。

select：select事件当在<input><textarea>里面选中文本时触发。

change：change事件当<input><select><textarea>的值发生变化时触发。它与input事件的最大不同，就是不会连续触发，只有当全部修改完成时才会触发。常见情况：失去焦点或者点击回车。

reset：发生在表单对象<form>上，而不是发生在表单的成员上。reset事件当表单重置（所有表单成员变回默认值）时触发。

submit：发生在表单对象<form>上，而不是发生在表单的成员上。submit事件当表单数据向服务器提交时触发。

<body>
    <form id="myForm">
        <input type="text" id="myInput">
        <input type="radio" id="myRadio">
        <input type="checkbox" id="myCheckbox">
        <select id="mySelect">
            <option value="male">male</option>
            <option value="female">female</option>
        </select>
        <textarea id="myTextarea" cols="30" rows="10"></textarea>
        <button id="myReset">reset</button>
        <button>submit</button>
    </form>
    <script>
        var myInput = document.getElementById("myInput");
        var myRadio = document.getElementById("myRadio");
        var myCheckbox = document.getElementById("myCheckbox");
        var mySelect = document.getElementById("mySelect");
        var myTextarea = document.getElementById("myTextarea");
        var myReset = document.getElementById("myReset");
        var myForm = document.getElementById("myForm");
        myInput.oninput = function(){
            console.log("text_input");
        };
        myInput.onselect = function(){
            console.log("text_select");
        };
        myInput.onchange = function(){
            console.log("text_change");
        };
        myRadio.oninput = function(){
            console.log("radio_input");
        };
        myCheckbox.oninput = function(){
            console.log("checkbox_input");
        };
        mySelect.oninput = function(){
            console.log("select_input");
        };
        mySelect.onchange = function(){
            console.log("select_change");
        };
        myTextarea.oninput = function(){
            console.log("textarea_input");
        };
        myTextarea.onselect = function(){
            console.log("textarea_select");
        };
        myTextarea.onchange = function(){
            console.log("textarea_change");
        };
        myReset.onreset = function(){
            myReset.reset();
        };
        myForm.onsubmit = function(){
            console.log("submit");
        };
    </script>
</body>

3.2 表单事件的注意事项

submit事件的发生对象是<form>元素，而不是<button>元素，因为提交的是表单，而不是按钮。

3.3 相关的Event对象

target.value：获取当前对象的值。

target.selectionStart：获取选中的字符串的第一个字符的位置。

target.selectionEnd：获取选中的字符串的最后一个字符的位置加一。

<body>
    <form>
        <input type="text" id="myInput">
    </form>
    <script>
        var myInput = document.getElementById("myInput");
        myInput.onselect = function(e){
            console.log(e.target.selectionStart);
            console.log(e.target.selectionEnd);
            // 输出选中的字符串的值
            console.log(e.target.value.substring(e.target.selectionEnd,e.target.selectionStart));
        };
    </script>
</body>

4. 窗口事件

窗口事件的类型

scroll：在文档或文档元素滚动时触发，主要出现在用户拖动滚动条，应用场景有懒加载。

resize：改变浏览器窗口大小时触发，主要发生在window对象上，应用场景有响应式设计。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        div{
            height: 300px;
        }
    </style>
</head>
<body>
    <div>内容1</div>
    <div>内容2</div>
    <div>内容3</div>
    <div>内容4</div>
    <div>内容5</div>
    <div>内容6</div>
    <div>内容7</div>
    <script>
        window.onscroll = function(e){
            // 注意需要有<html>标签
            var scrollHeight = document.documentElement.scrollTop;
            console.log(scrollHeight);
        }
        window.onresize = function(){
            console.log("窗口发生变化");
        }
    </script>
</body>
</html>

5. 焦点事件

5.1 焦点事件的类型

focus：元素获得焦点后触发，该事件不会冒泡。

blur：元素失去焦点后触发，该事件不会冒泡。

focusin：元素获得焦点时触发，该事件会冒泡。

focusout：元素失去焦点时触发，该事件会冒泡。

<body>
    <input type="text" id="username" autofocus>
    <input type="text" id="email">
    <script>
        var myUsername = document.getElementById("username");
        var myEmail = document.getElementById("email");
        // chrome暂时不支持onfocusin和onfocusout的DOM0级事件的写法
        myEmail.addEventListener('focusin',function(){
            console.log("focusin");
        },true);
        myUsername.addEventListener('focusout',function(){
            console.log("focusout");
        },true);
        myEmail.addEventListener('focus',function(){
            console.log("focus");
        },true);
        myUsername.addEventListener('blur',function(){
            console.log("blur");
        },true);
    </script>
</body>

5.2 焦点事件的注意事项

由于focus和blur事件不会冒泡，只能在捕获阶段触发，所以addEventListener方法的第三个参数需要设为true。

6. 剪切板事件

剪切板事件的类型

cut：将选中的内容从文档中移除，并加入到剪切板时触发。

copy：进行复制动作时触发。

paste：剪切板内容粘贴到文档时触发。

<body>
    <input type="text" id="username" autofocus>
    <script>
        var myUsername = document.getElementById("username");
        myUsername.oncut = function(){
            console.log("cut");
        };
        myUsername.oncopy = function(){
            console.log("copy");
        };
        myUsername.onpaste = function(){
            console.log("paste");
        };
    </script>
</body>

7. 网页状态事件

网页状态事件的类型

load：资源加载完成后触发，包括图片和DOM等资源都加载完成。

DOMContentLoaded：网页下载并解析完成以后，浏览器就会在document对象上触发DOMContentLoaded 事件。这时，仅仅完成了网页的解析（整张页面的 DOM 生成了），所有外部资源（样式表、脚本、iframe 等等）可能还没有下载结束。也就是说，这个事件比load事件早触发。

readystatechange：readystatechange事件当 Document 对象和 XMLHttpRequest 对象的readyState属性发生变化时触发。document.readyState有三个可能的值：loading（网页正在加载）、interactive（网页已经解析完成，但是外部资源仍然处在加载状态）和complete（网页和所有外部资源已经结束加载，load事件即将触发）。

<body>
    <div></div>
    <script>
        // 观察不使用懒加载图片的载入方式
        var image = new Image();
        image.src = "http://iwenwiki.com/api/livable/banner/banner1.png"
        document.body.appendChild(image);
        document.addEventListener("DOMContentLoaded",function(){
            console.log("DOM解析完成");
        });
    </script>
</body>

<body>
    <div></div>
    <script>
        // 观察使用懒加载图片的载入方式
        var image = new Image();
        image.src = "http://iwenwiki.com/api/livable/banner/banner1.png"
        image.onload = function(){
            console.log("图片资源已加载完成");
            document.body.appendChild(image);
        };
        document.addEventListener("DOMContentLoaded",function(){
            console.log("DOM解析完成");
        });
    </script>
</body>

8. Touch事件

8.1 Touch事件的类型

touchstart：用户开始触摸时触发，它的target属性返回发生触摸的元素节点。

touchend：用户不再接触触摸屏时（或者移出屏幕边缘时）触发，它的target属性与touchstart事件一致的，就是开始触摸时所在的元素节点。它的changedTouches属性返回一个TouchList实例，包含所有不再触摸的触摸点（即Touch实例对象）。

touchmove：用户移动触摸点时触发，它的target属性与touchstart事件一致。如果触摸的半径、角度、力度发生变化，也会触发该事件。

touchcancel：触摸点取消时触发，比如在触摸区域跳出一个情态窗口（modal window）、触摸点离开了文档区域（进入浏览器菜单栏）、用户的触摸点太多，超过了支持的上限（自动取消早先的触摸点）。

<head>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <div class="box" id="box"></div>
    <script>
        var box = document.getElementById("box");
        box.addEventListener("touchend",function(){
            console.log("抬起来了");
        });
        box.addEventListener("touchstart",function(){
            console.log("触摸屏幕");
        });
        box.addEventListener("touchmove",function(){
            console.log("移动");
        });
    </script> 
</body>

8.2 Touch事件的注意事项

touch事件用在移动端，必须使用DOM2级事件处理程序。

原文链接：https://blog.csdn.net/weixin_47782618/article/details/124440819