JavaScript —— 事件处理

最新推荐文章于 2024-05-03 17:58:21 发布

奇妙的代码

最新推荐文章于 2024-05-03 17:58:21 发布

阅读量243

点赞数

分类专栏： # JavaScript 文章标签： javascript html5 html

本文为博主原创文章，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/marvelousness/article/details/119929022

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

事件处理

5.1. 事件的基本概念

HTML 事件是发生在 HTML 元素上的“事情”，当在 HTML 页面中使用 JavaScript 时，JavaScript 能够“应对”这些事件。

语法规则是：

<element event="javascript" />

在 HTML 文档中，所有的有效元素都有对应的事件，比如点击，滑过等。
事件一旦被触发，则会执行 JavaScript 代码，这种行为被称之为事件驱动

5.2. 鼠标和键盘事件

onclick 事件

<button onclick="handleClick()">确定</button>
<script>
    function handleClick() {
        console.log("触发点击事件！");
    }
</script>

因为 HTML 文档是典型的元素嵌套的文档，如果子元素发生了点击事件，默认情况下，因为被父元素包裹，父元素的点击事件也会被触发。
这种现象被称之为事件冒泡。

通过事件对象 event 的 stopPropagation() 函数可以在子元素触发事件的时候，阻止事件向上级传播。

<body onclick="handleClick()">
    <button onclick="event.stopPropagation();handleClick()">确定</button>
</body>
<script>
    function handleClick() {
        console.log("触发点击事件！");
    }
</script>

如果多个元素绑定了同一个 js 方法，可以通过传递 this 参数的方式，将触发事件的元素传递到方法中。

<body onclick="handleClick(this)">
    <button onclick="event.stopPropagation();handleClick(this)">确定</button>
</body>
<script>
    function handleClick(target) {
        console.log(target.nodeName + " 触发点击事件！");
    }
</script>

onkeydown 事件

window.onkeydown = function (event) {
    console.log("key: " + event.key + ", code: " + event.code);
};

实例：键盘控制元素位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OnKeydown 事件</title>
    <style>
        #ball { font-size: 50px; width: 50px; height: 50px; line-height: 50px; display: block; position: fixed; }
    </style>
</head>
<body>
    <span id="ball" style="left: 0px; top: 0px">🤷‍</span>
</body>
<script>
    window.onkeydown = function (event) {
        let x = parseInt(ball.style.left);
        let y = parseInt(ball.style.top);
        switch (event.key) {
            case "ArrowUp": y-=5; break;
            case "ArrowDown": y+=5; break;
            case "ArrowLeft": x-=5; break;
            case "ArrowRight": x+=5; break;
        }
        // 控制边界
        if(x < 1) {
            x = 0;
        } else if (x > 500) {
            x = 500;
        }
        if(y < 1) {
            y = 0;
        } else if (y > 500) {
            y = 500;
        }
        console.log("key: " + event.key + ", code: " + event.code);
        ball.style.top = y + "px";
        ball.style.left = x + "px";
    };
</script>
</html>

OnMouseOver 、OnMouseOut 与 OnMouseEnter 、OnMouseLeave 事件

mouseenter：当指针移动到元素上时，发生此事件。
mouseleave：当指针从元素上移出时，发生此事件。
mouseout：当用户将鼠标指针移出元素或其中的子元素时，发生此事件。
mouseover：当指针移动到元素或其中的子元素上时，发生此事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OnMouseOver 、OnMouseOut 与 OnMouseEnter 、OnMouseLeave 事件</title>
    <style>
        body { width: 70%; margin: 0px auto; padding-top: 40px; }
        .container { display: flex; justify-content: space-around; height: 50px;border: #CCC 1px solid;padding: 10px; }
        .inner-container { width: 30%; line-height: 2em; text-align: center; background-color: #CCC; }
    </style>
    <script>
        function handleEnter() { console.log("enter"); }
        function handleLeave() { console.log("leave"); }
        function handleOut() { console.log("out"); }
        function handleOver() { console.log("over"); }
    </script>
</head>
<body>
    <div class="container" onmouseenter="handleEnter()" onmouseleave="handleLeave()">
        <div class="inner-container">左</div>
        <div class="inner-container">右</div>
    </div>
    <p><b>mouseenter</b><span>当指针移动到元素上时，发生此事件。</span></p>
    <p><b>mouseleave</b><span>当指针从元素上移出时，发生此事件。</span></p>
    <hr />
    <div class="container" onmouseout="handleOut()" onmouseover="handleOver()">
        <div class="inner-container">左</div>
        <div class="inner-container">右</div>
    </div>
    <p><b>mouseout</b><span>当用户将鼠标指针移出元素或其中的子元素时，发生此事件。</span></p>
    <p><b>mouseover</b><span>当指针移动到元素或其中的子元素上时，发生此事件。</span></p>
</body>

</html>

OnMouseMove 事件 ———— 【实例：鼠标跟随】

当鼠标指针移动时，发生此事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标移动事件</title>
    <style>
        #follower { width: 10px; height: 10px; background-color: red; border-radius: 10px; display: block; position: fixed; top: 0px; left: 0px; margin-left: -5px; margin-top: -5px; }
    </style>
    <script>
        window.onmousemove = function (event) {
            let x = event.clientX;
            let y = event.clientY;
            follower.style.left = x + "px"
            follower.style.top = y + "px"
            position.innerText = `(${x},${y})`;
        }
    </script>
</head>
<body>
    <span id="follower"></span><label id="position"></label>
</body>
</html>

5.3. 页面相关事件

onload 事件

window.onload = function (event) {
    console.log("网页加载完成！");
}

onbeforeunload 事件

window.onbeforeunload = function (event) {
    if (window.isConformed !== true) {
        // 只要没有确认关闭，则阻止关闭窗口
        // 设置 isConformed 为 true 之后，就能关闭窗口
        return true;
    }
}

5.4. 表单相关事件

oninput 事件

<input id="username" type="text" oninput="handleInput()" />
<span id="target"></span>
<script>
    function handleInput() {
        target.innerText = username.value;
    }
</script>

focus 方法和事件

<input id="username" type="text" onfocus="handleFocus()"/>
<script>
    window.onload = function () {
        // 页面加载完成。立即为输入框获取输入焦点
        username.focus();
    }
    function handleFocus() {
        console.log("输入框获得输入焦点了！");
    }
</script>

onblur 事件

<input id="username" type="text" onblur="handleBlur()"/>
<script>
    window.onload = function () {
        // 页面加载完成。立即为输入框获取输入焦点
        username.focus();
    }
    function handleBlur() {
        console.log("输入框失去输入焦点了！");
    }
</script>

onchange 事件

<select id="pick" onchange="handleSelectChange()">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JavaScript</option>
</select>
<label>
    <span>记住我</span>
    <input type="checkbox" id="cb" value="remember" onchange="handleCheckboxChange()" />
</label>
<script>
    function handleSelectChange() {
        // 获取选中的值
        console.log(pick.value);
    }
    function handleCheckboxChange() {
        // 判单复选框是否被勾选
        console.log(cb.checked);
    }
</script>