2024-06-08JS学习笔记

小mei

已于 2024-06-16 14:07:58 修改

阅读量335

点赞数 5

分类专栏：前端文章标签：学习笔记

于 2024-06-08 12:09:31 首次发布

本文链接：https://blog.csdn.net/meizhenglong123/article/details/139542358

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

事件监听

目标：能够给DOM元素添加事件监听
什么是事件：事件是在编程时系统内部发生的动作或者发生的事件，比如单击一个按钮。
语法：

元素对象.addEventListener('事件类型',要执行的函数)

<!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>
<style>
</style>
<body>
    <button>点击</button>
    <script>
        const btn = document.querySelector('button')
        btn.addEventListener('click',function(){
            console.log(1)
        })
    </script>
</body>
</html>

事件监听版本：

DOM L0：
事件源.on事件 = function(){}
DOM L1:
事件源.addEventListener(事件，事件处理函数)

区别：
on方式会覆盖，addEventListener不会。

事件类型：

UI事件：

click：点击事件
dblclick：双击事件
mousedown：鼠标按键被按下
mouseup：鼠标按键被释放
mousemove：鼠标被移动
keydown：键盘按下
keyup：键盘释放

焦点事件：

focus：元素获得焦点
blur：元素失去焦点

文档事件：

load：页面或图片等资源加载完成
beforeunload：页面即将卸载
unload：页面完全卸载
abort：加载操作被用户取消或加载失败
error：在加载过程中发生错误

环境对象：

指的是函数内部特殊的变量this，它代表当前函数的运行时所处环境。

<!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>
<style>
</style>
<body>
    <button>点击</button>
    <script>
    
        function fn(){
            console.log(this)   //this指向window
        }

        const btn = document.querySelector('button')
        btn.addEventListener('click',function(){
            console.log(this)  //this指向btn
        })
    </script>
</body>
</html>

谁调用this就是指向谁。

回调函数：

如果将函数A作为参数传递给函数B时，我们称A为回调函数。

		function fn(){
            console.log('我是回调函数')
        }
        setInterval(fn,1000)

事件流：

事件流的二个阶段：

事件流：指的是完整的执行过程中的流动路径，分为捕获阶段和冒泡阶段（主用）。

事件捕获：

从DOM的根元素开始去执行对应的事件（从外到里）

DOM.addEventListener(事件类型,事件处理函数,是否使用捕获机制)

addEventListener第三个参数是true代表捕获阶段，false（默认）代表冒泡阶段。

事件冒泡：

当一个元素的事件被触发时，会依次调用上级调用的所有父级元素的同名事件。

阻止冒泡：

若想把事件限制在当前元素内，就需要阻止事件冒泡。

document.getElementById("parent").addEventListener("click", function(event){
    event.stopPropagation(); // 阻止事件冒泡
    // 在这里处理事件
});

事件解绑：

事件源.on事件 = function(){} 通过事件源.事件类型=null

在Web开发中，事件解绑是指移除已经绑定到元素上的事件监听器。这通常是为了提高性能，防止内存泄漏，或者在某些情况下，不再需要某个事件监听器时清理事件监听。

在JavaScript中，可以使用事件对象的removeEventListener方法来解绑事件。这个方法需要两个参数：一个是事件类型，另一个是事件处理函数。下面是一个简单的例子：

// 首先绑定一个事件处理函数
document.getElementById("myElement").addEventListener("click", myEventHandler);

// 然后解绑同一个事件处理函数
document.getElementById("myElement").removeEventListener("click", myEventHandler);

// 函数定义
function myEventHandler(event) {
    console.log("元素被点击");
}

如果你想要解绑所有的事件监听器，可以传递空函数作为事件处理函数：

document.getElementById("myElement").removeEventListener("click", function(){});

如果你想要解绑所有类型的事件监听器，可以传递"*"作为事件类型：

document.getElementById("myElement").removeEventListener("*", myEventHandler);

请注意，解绑事件监听器时，需要确保传递的事件类型和事件处理函数与之前绑定的一致，否则解绑操作将不会生效。

事件委托

事件委托是利用事件流的特征解决开发需求的知识技巧
优点：减少注册次数，提高程序性能。
原理：给父元素注册事件，当我们触发子元素时，会冒泡到父元素身上，从而触发父元素的事件。

// 假设有一个包含多个按钮的列表
const buttons = document.getElementById("buttonContainer").getElementsByTagName("button");

// 绑定一个事件处理函数到父元素上
document.getElementById("buttonContainer").addEventListener("click", function(event){
    // 事件对象包含了关于事件的详细信息
    const target = event.target; // 指向触发事件的元素
    if (target.tagName === "BUTTON") {
        // 根据触发事件的按钮执行相应的操作
        console.log("按钮被点击：", target.textContent);
    }
});

e.preventDefault() //阻止默认提交

小mei

关注

5
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
2024-06-08JS学习笔记

什么是事件：事件是在编程时系统内部发生的动作或者发生的事件，比如单击一个按钮。指的是函数内部特殊的变量this，它代表当前函数的运行时所处环境。事件源.addEventListener(事件，事件处理函数)如果将函数A作为参数传递给函数B时，我们称A为回调函数。on方式会覆盖，addEventListener不会。事件源.on事件 = function(){}谁调用this就是指向谁。
复制链接

扫一扫

专栏目录