当前位置： 首页 > article >正文

JS的事件以及常见事件的绑定

article 2024/9/20 18:34:58

什么是事件？

ITML事件可以是浏览器行为，也可以是用户行为。 当这些一些行为发生时,可以自动触发对应的JS函数的运行,我们称之为事件的驱动，指的就是行为触发代码运行的这种特点

如何绑定事件？

1. 通过元素的属性绑定On***进行绑定

注意事项：

1 一个事件可以同时绑定多个函数

2 一个元素可以同时绑定多个事件

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        fun1 = function () {
            console.log("单击了一下");
        }
        fun2 = function () {
            console.log("单击了一下2");
        }
        fun3 = function () {
            console.log("双击了一下");
        }
    </script>
</head>
<body>
<input
        type = "button"
        value="按钮"
        onclick="fun1(),fun2()"
        ondblclick="fun3()"
>
</body>
</html>

2.通过DOM编程动态绑定

页面加载事件：

页面加载事件使用 window.onload，它在整个页面及其所有资源（如图片、样式表、脚本等）完全加载完毕时触发

window.onload = function() {
    console.log('The entire page and all resources are fully loaded');
};

例子：

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function (){
            var btn = document.getElementById("button");
            btn.onclick = function () {
                alert("按钮单击了")
            }
        }
    </script>
</head>
<body>
<input
        type = "button"
        value="按钮"
        id = "button"
>
</body>
</html>
  • btn.onclick：是直接将一个匿名函数赋值给按钮元素的 onclick 属性。这是事件处理程序的简化形式，当用户点击按钮时，浏览器会检测 onclick 属性中是否有函数，如果有，就会执行该函数。
  • 不需要额外的监听器：由于 onclick 是按钮 DOM 元素内置的属性，浏览器已经“知道”它是一个事件处理函数。你只需要赋值给它一个函数即可，而不需要明确地告诉浏览器“监听”这个事件。

onclick 和 addEventListener 的选择：

  • 如果你只需要简单的事件处理，并且不需要为同一个事件绑定多个函数，onclick 是一种非常简单且方便的方式。
  • 如果你需要为一个元素绑定多个事件处理函数，或者希望更灵活地控制事件绑定（如捕获阶段或冒泡阶段），则推荐使用 addEventListener。

 如何通过 DOM 编程绑定事件，并且如何通过程序手动触发一个元素的事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM Event Trigger Example</title>
    <script>
        window.onload = function () {
            // 获取 div1 元素
            var div1 = document.getElementById("d1");
            
            // 为 div1 绑定单击事件
            div1.onclick = function () {
                div1.style.backgroundColor = "red"; // 点击时背景变红
            };

            // 获取按钮元素
            var btn = document.getElementById("btn1");

            // 为按钮绑定单击事件
            btn.onclick = function () {
                alert("按钮单击了！"); // 弹出提示
                // 通过 DOM 编程触发 div1 的单击事件
                div1.onclick(); // 模拟点击 div1
            };
        };
    </script>
</head>
<body>
    <!-- 这是一个 div 元素，初始背景颜色为默认值 -->
    <div id="d1" style="width: 100px; height: 100px; border: 1px solid black;">
        点击我
    </div>
    
    <!-- 这是一个按钮，点击后会触发 div1 的点击事件 -->
    <br>
    <input type="button" value="按钮" id="btn1">
</body>
</html>

  更多详细关于DOM编程，点击：

常见的事件：

1.鼠标事件：

1.1 click

当用户点击某个元素时触发（鼠标按下并释放）。

element.addEventListener('click', function() { 
    console.log('Element clicked'); 
});
1.2 dblclick

当用户双击某个元素时触发。

element.addEventListener('dblclick', function() {
     console.log('Element double-clicked'); 
});

1.3 mouseover

当鼠标指针进入元素范围时触发（包括子元素）。

element.addEventListener('mouseover', function() {
     console.log('Mouse entered element'); 
});

1.4 mouseleave

当鼠标指针离开元素时触发（不包括子元素）。与 mouseout 的区别是 mouseleave 不会冒泡。

element.addEventListener('mouseleave', function() {
     console.log('Mouse left element (no bubble)'); 
});
1.5 mousemove

当鼠标在元素范围内移动时持续触发。

element.addEventListener('mousemove', function() { 
    console.log('Mouse is moving over element');
});

2.键盘事件

1. onkeydown 事件

onkeydown 事件在用户按下键盘按键时触发，无论是字符键还是功能键（如 Shift、Ctrl、方向键等）。按住某个键不放会持续触发此事件。

语法：
element.onkeydown = function(event) { // 事件处理逻辑 };

或者使用 addEventListener 动态绑定：

element.addEventListener('keydown', function(event) { // 事件处理逻辑 });
示例：
<input type="text" id="inputField" placeholder="Type something...">

<script>
    document.getElementById('inputField').onkeydown = function(event) {
        console.log('Key down:', event.key);
    };
</script>

2. onkeyup 事件

onkeyup 事件在用户释放键盘按键时触发，也就是说，当用户松开某个键时会触发该事件。

语法：
element.onkeyup = function(event) { // 事件处理逻辑 };

或者使用 addEventListener 动态绑定：

element.addEventListener('keyup', function(event) { // 事件处理逻辑 });
示例：
<input type="text" id="inputField" placeholder="Type something...">

<script>
    document.getElementById('inputField').onkeydown = function(event) {
        console.log('Key down:', event.key);
    };
</script>

在这个例子中，当用户松开按键时，onkeyup 事件会触发，并打印出松开的按键。

3. onkeydown 与 onkeyup 的区别

特性onkeydownonkeyup
触发时机键按下时触发键松开时触发
事件频率持续按住键时会重复触发仅在键松开时触发
常见用途检测用户开始按键的动作检测用户结束按键的动作

3.表单事件

1.1 onfocus 和 onblur
  • onfocus：当元素获得焦点时触发（如用户点击输入框）。
  • onblur：当元素失去焦点时触发（如用户点击其他地方）。 
    <input type="text" id="username" placeholder="Enter username">

<script>
    let inputField = document.getElementById('username');
    
    inputField.onfocus = function() {
        console.log('Input field focused');
    };

    inputField.onblur = function() {
        console.log('Input field blurred');
    };
</script>

1.2 onchange

当用户修改了表单元素的值，并在失去焦点后，onchange 事件触发。常用于 <input>、<select>、<textarea> 等元素。

<select id="country">
    <option value="usa">USA</option>
    <option value="canada">Canada</option>
</select>

<script>
    document.getElementById('country').onchange = function(event) {
        console.log('Selected value:', event.target.value);
    };
</script>
1.3 onsubmit

当用户提交表单时，onsubmit 事件触发。此事件可以用于验证表单输入，或者阻止表单提交。

<form id="myForm">
    <input type="text" id="username" placeholder="Enter username">
    <button type="submit">Submit</button>
</form>

<script>
    document.getElementById('myForm').onsubmit = function(event) {
        event.preventDefault(); // 阻止默认的表单提交
        console.log('Form submitted, but prevented');
    };
</script>
1.4 onreset

当表单被重置时，onreset 事件触发。通常与表单的 <button type="reset"> 或 reset() 方法相关联。

<form id="myForm">
    <input type="text" id="username" placeholder="Enter username">
    <button type="reset">Reset</button>
</form>

<script>
    document.getElementById('myForm').onreset = function() {
        console.log('Form reset');
    };
</script>

总体例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function testOnfocus() {
            console.log("获得焦点了");
        }
        function testOnblur() {
            console.log("失去焦点了");
        }
        function testChange(value) {
            console.log("内容发生改变了：" + value);
        }
        function testSubmit(event) {
            var flag = confirm("确定要提交吗");
            if (!flag) {
                event.preventDefault(); // 阻止表单提交
            }
        }
    </script>
</head>
<body>
<form action="../indix.html" method="get" onsubmit="testSubmit(event)">
    用户名：<input
        type="text" name="realName"
        onfocus="testOnfocus()"
        onblur="testOnblur()"
        onchange="testChange(this.value)">
    <br>
    登录账号：<input type="text" name="username"><br>
    <input type="submit" value="注册">
    <input type="reset" value="清空">
</form>
</body>
</html>


http://www.kler.cn/news/305736.html

相关文章：

  • Win电脑使用Ollama与Open Web UI搭建本地大语言模型运行工具
  • Go 中 Gin 框架的使用指南
  • GIS 中的 3D 分析
  • 数据结构基础详解:哈希表【C语言代码实践篇】开放地址法__拉链法_哈希表的创建_增删查操作详解
  • 详解c++多态---上
  • 移动应用开发与测试赛题2
  • 将 YOLOv10 模型从 PyTorch 转换为 ONNX
  • 前端开发的单例设计模式
  • Leetcode面试经典150题-202.快乐数
  • 人工智能时代，程序员如何保持核心竞争力？
  • CSP-J 计算机网络
  • CSS 圆角渐变边框
  • Linux软件安装
  • 虚幻5|使用F插值到，击打敌人使UI血条缓慢缩减|小知识（3）
  • 利用 Vue.js 自定义指令实现权限控制：问题解析与最佳实践20240912
  • 网络通信安全：全面探索与深入分析
  • python的流程控制语句之制作空气质量评估系统
  • 国产化中间件正在侵蚀开源中间件
  • 使用 Vue.js 将数据对象的值放入另一个数据对象中
  • Redis 集群高可用详解及配置
  • mfc140u.dll文件错误的相关修复方法，4种方法修复mfc140u.dll
  • 计算机毕业设计选题推荐-推拿知识互动平台-Java/Python项目实战
  • 通信工程学习：什么是UNI用户网络接口
  • 漏洞复现-泛微-E-Cology-SQL
  • 基于python+django+vue的视频点播管理系统
  • 半导体制造技术中的沉积和驱入（Deposition and drive-in）过程
  • Vue3 全文知识点
  • Spring Boot 驱动的在线读书笔记平台
  • Vue与React的Diff算法
  • 让人物照片跳舞vigen追影