js事件基础知识

浮生醉清风304

于 2024-05-30 11:55:45 发布

阅读量467

点赞数 10

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_68971977/article/details/139317501

版权

事件的基础知识

事件三要素：

事件源： 事件被触发的对象谁被触发

事件类型：如何触发，什么事件例如鼠标点击，鼠标经过，键盘按下等

事件处理程序：通过函数赋值的方式完成

常用的事件：

1）、鼠标事件

onclick 当点击鼠标时运行的事件

onmousedown 当按下鼠标按钮时运行的事件

onmouseup 当松开鼠标按钮时运行的事件

onmousemove 当鼠标指针移动的时候运行的事件

onmouseover 当鼠标指针移动到元素之上时运行的事件（不可以阻止冒泡）

onmouseout 当鼠标指针移出元素时运行的事件（不可以阻止冒泡）

onmouseenter 当鼠标指针移到元素之上时运行的事件（可以阻止冒泡）

onmouseleave 当鼠标指针移出元素时运行的事件（可以阻止冒泡）

onmousewheel 当转动鼠标滚轮时运行的事件

onscroll 当滚动元素的滚动条时运行的事件

2）、键盘事件

onkeyup 键盘按键松开时触发的事件

onkeydown 键盘按键按下时触发的事件

onkeypress 键盘按键按下时触发的事件

3）、表单事件

onfocus 表单获得焦点时触发的事件

onblur 表单失去焦点时触发的事件

oninput 表单每次输入时触发的事件

onchange 表单内容发生改变时触发的事件

onselect 表单文本被选取时触发的事件

onreset 表单重置时触发的事件

onsubmit 表单提交时触发的事件

事件在代码中使用

1）、可以直接在script标签里面使用

obj.事件名=function(){}

2)、可以在html标签行内使用

<!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>
    <button onclick="fun()">按钮1</button>
    <button class="btn">按钮2</button>
    <script>
        var btn = document.querySelector('.btn')
        btn.onclick = function () {
            console.log(222);
        }
        function fun() {
            console.log(111);
        }
    </script>
</body>

</html>

3）、事件监听

可以使用addEventListener来监听事件

obj.addEventListener('事件类型'，function(){}，[useCapture])

useCapture：可选，是否在捕获阶段触发事件，需要一个布尔值，默认是false，在冒泡阶段处理程序，如果是true，就是在捕获阶段处理程序（后面事件流时，详细说）

注意：ie8及以下不支持

注意：事件类型不用加on

removeEventListener（）用来解除绑定事件

<!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>
    <button class="btn1">按钮1</button>
    <button class="btn">按钮2</button>
    <script>
        var btn = document.querySelector('.btn')
        var btn1 = document.querySelector('.btn1')
        btn.addEventListener('click', function () {
            console.log(111);
        })
        btn1.addEventListener('click', fun)
        function fun() {
            console.log(222);
            // 让btn1点击一次后就解绑click事件
            btn1.removeEventListener('click', fun)
        }
    </script>
</body>

</html>

4)、事件对象 event

-当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参

传递进响应函数，在事件对象中封装了当前事件相关的一切信息

<!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>
    <button class="btn1">按钮1</button>
    <button class="btn">按钮2</button>
    <script>
        var body = document.body
        body.addEventListener('click', function (e) {
            // 点哪个按钮就打印哪个，点击谁事件对象就是谁
            console.log(e.target);
        })
        window.addEventListener('keydown', function (e) {
            // 根据点击不同的键拿到哪个键的keyCode值
            console.log(e.keyCode);
        })
    </script>
</body>

</html>

浮生醉清风304

关注

10
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
js事件基础知识

事件被触发的对象谁被触发：如何触发，什么事件例如鼠标点击，鼠标经过，键盘按下等通过函数赋值的方式完成onclick 当点击鼠标时运行的事件onmousedown 当按下鼠标按钮时运行的事件onmouseup 当松开鼠标按钮时运行的事件onmousemove 当鼠标指针移动的时候运行的事件onmouseover 当鼠标指针移动到元素之上时运行的事件（不可以阻止冒泡）onmouseout 当鼠标指针移出元素时运行的事件（不可以阻止冒泡）
复制链接

扫一扫