除 addEventListener外的事件监听的方法,以及事件的杂点知识

最新推荐文章于 2023-03-30 12:00:00 发布
最新推荐文章于 2023-03-30 12:00:00 发布
阅读量666 收藏 2
点赞数 2
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54902466/article/details/117886562
版权

javascript

这里写目录标题

1.行内事件

1.概念

 监听一个元素的事件，也可以写在标签内

2.语法

在这里插入图片描述

3.代码演示

在这里插入图片描述

在这里插入图片描述
如果事件触发时要执行多句代码，一般会调用函数

此时也可以给函数传参

注：此时函数内的this是window

2.DOM L0事件

1.指的是 DOM 刚诞生时的版本

2.语法

在这里插入图片描述

3.代码演示

<!DOCTYPE html>
<html lang="zh-CN">

<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>Document</title>
    <style>
        div {
            
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        // DOM l0的写法
        // DOM L0 写法： 相同事件类型只能绑定一次
        // DOM L0 写法： 相同元素的相同注册事件,会发生覆盖
        // DOM L0 写法： 本质上将函数赋值给onclick属性 - 属性会覆盖
        let div = document.querySelector('div')
        div.onclick = function () {                 // 本质上将函数赋值给onclick属性
            div.style.backgroundColor = 'gold'
        }
        // DOM l1的写法
        // DOM L1 写法： 相同事件类型可以绑定多次
        // DOM L1 写法： 相同元素对象的相同注册事件, 不覆盖, 会随着代码顺序执行
        // DOM L1 写法： 本质上调用addEventListener方法
        let div = document.querySelector('div')
        div.addEventListener('click', function () { // 本质为调用addEventListener方法
            div.style.backgroundColor = 'blue'
        })

    </script>
</body>

</html>

DOM L0 写法： 相同事件类型只能绑定一次

DOM L2 写法： 相同事件类型可以绑定多次

<!DOCTYPE html>
<html lang="zh-CN">

<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>Document</title>
</head>

<body>
    <button class="box">我这是有关于L0的点击按钮</button>
    <button id="box2">我这是有关于L1的点击按钮</button>
    <script>
        // DOM L0写法:相同的事件类型只能绑定一次
        // DOM L2写法:相同的事件类型只能绑定多次
        let box =document.querySelector('.box')

        let btn = document.getElementById('box2')
        box.style.marginRight = "100px"
        box.onclick = function(){
            alert('相同的事件类型只能绑定一次')
        }
        box.onclick = function(){
            alert('L0相同的事件类型只能绑定一次--覆盖版本')
        }
        btn.addEventListener('click',function(){
            alert('相同的事件类型只能绑定多次')
        })
        btn.addEventListener('click',function(){
            alert('相同的事件类型只能绑定多次,不覆盖--我会执行多次,根据代码顺序执行')
        })

    </script>
</body>

</html>

3.事件移除

1.概念

  指的是移除监听的事件，可以提升性能

2.使用场景

比如放大镜的拖拽效果， 当鼠标按下并且移动则添加监听事件，如果鼠标弹起，此时再移动鼠标则需要移除监听事件

3.语法

L0
在这里插入图片描述
L1
在这里插入图片描述

4.代码演示

<!DOCTYPE html>
<html lang="zh-CN">

<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>Document</title>
   <style>
       button{
           margin-right: 100px;
       }
   </style>
</head>

<body>
   <button>有关于L0的事件移除</button>
   <button class="btn1">有关L2的事件移除</button>
   <button id="a">我没有添加移除事件</button>
   <script>
       // 移除监听的事件 -- 提升性能
       // 放大镜的拖拽效果,当鼠标按下的时候,添加监听事件,鼠标弹起,移除事件

       // L0的事件移除
       // 元素.on事件名 = null

       // L2的事件移除
       // 元素.removeEventListener('事件类型',移除的函数) --- 匿名函数没法移除


       let btn = document.querySelector('button')
       let btn1 = document.querySelector('.btn1')
       let a = document.getElementById('a')
       let btn2 = document.querySelectorAll('button')
       console.log(btn2);
      

       // L0的事件移除
       btn.onclick = function () {
           alert('你好帅的,但是我只说一次')
           btn.onclick = null
       }

       // L2的事件移除
       function remove() {
           alert('触发的函数必须单独写出来,匿名函数没法移除')
           btn1.removeEventListener('click', remove)
       }
       btn1.addEventListener('click', remove)

       // 没有添加移除事件的按钮
       a.addEventListener('click', function () {
           alert('你可以一直点我,我也能出现弹框')
       })
       a.addEventListener('click', function () {
           alert('你可以一直点我,我也能出现弹框-这是第二遍,再点从头开始')
       })




   </script>
</body>

</html>

4.事件类型

1.概念

在网页中有各种各样的事件，根据不同类型分为：鼠标事件、键盘事件、表单事件、焦点事件等
在这里插入图片描述

2.代码演示

<!DOCTYPE html>
<html lang="zh-CN">

<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>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        // click------------- 鼠标单击--鼠标点击一次
        // dblclick--------- 鼠标双击--快速双击两次
        // mouseover----- 鼠标移入--鼠标经过元素会触发
        // mouseout------鼠标移出--鼠标离开元素会触发
        // mousemove----鼠标移动--鼠标在元素上移动会触发
        // mousedown----鼠标按下--鼠标按下的时候触发
        // mouseup------- 鼠标弹起--鼠标弹起的时候触发
        let div = document.querySelector('div')
        // div.addEventListener('dblclick', function () {
        //     div.style.backgroundColor = 'gold'
        // })
        // div.onmouseover = function () {
        //     div.style.backgroundColor = 'blue'
        // }
        // div.onmouseout = function () {
        //     div.style.backgroundColor = 'red'
        // }
        // div.addEventListener('mousedown', function () {
        //     div.style.backgroundColor = 'pink'
        // })
        // div.addEventListener('mouseup', function () {
        //     div.style.backgroundColor = 'red'
        // })
    </script>
</body>

</html>

5.事件对象

1.概念

也是个对象，这个对象里有事件触发时的相关信息

2.使用

在事件绑定的回调函数的第一个参数就是事件对象
一般命名为event、ev、e

3.语法

type
获取当前的事件类型

clientX/clientY
获取光标相对于浏览器可见窗口左上角的位置

offsetX/offsetY
获取光标相对于当前DOM元素左上角的位置

4.代码演示

<!DOCTYPE html>
<html lang="zh-CN">

<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>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: springgreen;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            position: absolute;
            transform: all .5s;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        // 事件对象参数:
        // 应用场景: 事件委托 / 鼠标移动

        // 事件对象参数如何使用:
        // 事件对象参数,必须在事件中使用

        // function (even) 中的even就是事件对象
        // 里面储存了一系列的事件信息

        let div = document.querySelector('div')
        div.addEventListener('mousemove', function (even) {
              console.log(even);
            let x = even.pageX
            let y = even.pageY
            div.style.left = `${x}px`
            div.style.top = `${y}px`
            
        })
    </script>
</body>

</html>

<!DOCTYPE html>
<html lang="zh-CN">

<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>Document</title>
</head>

<body>
    <div></div>
    <script>
        // 事件对象也是一个对象--具有事件触发的相关信息
        // 例如鼠标点击事件事件中,事件对象就存在了鼠标点在哪个位置等信息

        // 如何获取:在事件绑定的回调函数中第一参数就是事件对象

        // 一般命名为even /  ev / e
        // 常用属性:
        // typeof :获取当前属性的事件类型
        // clientX / clientY    ----------- 获取光标相对浏览器可视窗口左上角的位置  
        // offsetX / offsetY    ----------- 获取光标相对于当前Dom元素左上角的位置 

        let box = document.querySelector('div')
        box.style.width = "300px"
        box.style.height = '300px'
        box.style.backgroundColor = 'pink'
        box.addEventListener('click', function (even) {
            console.log(0);
            console.log(typeof even);                   // 对象,存的事件信息的相关信息
            console.log(even);                   // 对象,存的事件信息的相关信息
        })

    </script>
</body>

</html>

事件是我们做网页交互必不可少的技能点,事件类型可以用来处理默认行为以及事件委托的等应用点,后续我会进行详细的讲解!

张敬坤
关注
专栏目录
js: 添加事件监听addEventListener、移除事件监听removeEventListener
彭世瑜的博客
08-26 3538
【代码】js: 添加事件监听addEventListener、移除事件监听removeEventListener。
addeventlistener怎么监听变量的变化_MutationObserver: dom变化监听 给你代码
weixin_39880150的博客
12-24 452
如何来监听dom变化？ 工作中突然有一个需求，必须你要监听dom的插入，那么就需要去监听dom变化。在一般印象中，监听事件应该是这么实现的比如 xx.addEventListener(xxx)。而实际上关于这个dom变化有一套html5标准。如在mdn写到MutationObserver接口提供了监视对DOM树所做更改的能力。它被设计为旧的Mutation Events功能的替代品，该功能是DOM...
addEventListener和on的共同点和区别
weixin_33747129的博客
05-26 213
共同点 1.它们都是给dom节点添加监听事件。例： document.getElementByClassName('echart').addEventListener('mouseover', this.EventMouse)或者document.getElementByClassName('echart').onmouseover = this.EventMouse这两种方法都是给echart节...
JavaScript学习笔记——addEventListener
403 Forbidden
09-10 320
DOM0绑定事件 DOM0采用 " .onclick " 的写法绑定事件 element.onclick = function(){ } 但是这样的绑定方法只可以绑定一个事件，而同时绑定两个事件可能会导致事件的层叠 <div class="box1">点我</div> <script> var div = document.querySelector(".box1"); //发生事件层叠 div.onclick
事件的监听的三种方式
L081773的博客
05-22 330
<h1 onclick="calllMe()">事件的监听</h1> <button type="button" id="btn">点我</button> <button type="button" id="btn2">点点我</button> <script type="text/javascript"> //事件响应写在HTML标签属性里面 function calllMe(){ alert("我被电到了").
attachevent和addeventlistener和on绑定事件的区别
xiaoxiede_wo的博客
06-27 400
1.on绑定事件 js ： div.onclick=function(){ console.log(11111); } JQuery： $('div').on('click',function(){ }) 在IE，FF，Chrome，Safari，Mozilla，Opera下都适用。 但是，同一个...
JavaScript使用addEventListener添加事件监听用法实例
01-19
本文实例讲述了JavaScript使用addEventListener添加事件监听用法。分享给大家供大家参考。具体实现方法如下： <!DOCTYPE html> <html lang=en> <head> <title>This text is the title of the...
动态的绑定事件addEventListener方法的使用
09-04
然后，我们在`<body>`标签内使用`addEventListener`方法将`test`函数动态地绑定到ID为`but1`的按钮的`onclick`事件上。这意味着当用户点击这个按钮时，`test`函数会被调用。 ```html function test() { window....
vue使用@scroll监听滚动事件时，@scroll无效问题的解决方法详解
12-13
本文实例讲述了vue使用@scroll监听滚动事件时，@scroll无效问题的解决方法。分享给大家供大家参考，具体如下： 在网上看了一下vue中监听滚动条滚动事件，清一色的使用document.addEventListener('scroll',function()...
javascript事件监听与事件委托实例详解
12-29
在js中，常用到element.addEventListener()来进行事件的监听。但是当页面中存在大量需要绑定事件的元素时，这种方式可能会带来性能影响。此时，我们可以用事件委托的方式来进行事件的监听。 每个事件都经历三个阶段 ...
JS事件
Ulrica_Amaris的博客
09-07 577
事件 1.事件就是交互事件，用户点击实现回馈，是交互体验的核心功能。 绑定事件 1.ele.onxxxx = function(event){} 兼容性很好，但是一个元素的同一事件上只能绑定一个 基本等同于写在HTML行间上。 2.obj.addEventListener(type, listener, options) IE9以上，可以为一个事件绑定多个处理程序。 3.obj.attachEvent(‘on’ + type, fn（事件处理函数）)； IE独有，一个事件同样可以绑定多个处理程序 解除事件
L0与L2注册事件区别
qq_52175048的博客
10-07 318
L0与L2注册事件区别
JS中的事件监听
杜永康的博客
03-30 1万+
事件监听是Web开发中非常重要的一个概念，掌握了它的用法，可以让我们实现更加丰富和动态的交互效果。在实际开发中，我们需要根据具体的需求选择合适的事件类型和事件处理函数，以及注意事件传播和事件对象的相关问题。
关于JS中addEventListener的使用
小火车况且况且况且的博客
03-10 4107
关于JS中addEventListener的使用 MDN中addEventListener()说明 主要用来实现事件的绑定 存在三个参数 target.addEventListener(type, listener, useCapture); type: 表示监听事件类型的字符串。类似于click,mouseover... listener: 用来监听处理的函数方法 useCapture: 默认是false,事件冒泡,可以设置为true为事件捕获 这里需要了解一下基本的事件流(事件捕获->事件目标
visibilitychange事件监听用户切换浏览器标签
GYB4979的博客
03-16 237
切换浏览器标签页, 定时任务停止
addEventListener( ) 方法 -- 事件监听
m0_52545254的博客
07-11 6568
事件监听/捕获/冒泡
addEventListener()使用方法
搏·梦的博客
04-10 2万+
document.addEventListener() 方法用于向文档添加事件句柄，即事件监听。先看下面代码，稍后进行讲解。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body>...
addEventListener和addListener的区别
热门推荐
smile的博客
02-06 5万+
addListener是用于鼠标，键盘等特殊元素的一些监听 addEventListener是对组件监听的 (要注意的是div必须放到js前面才行) 一般情况下，如果给一个dom对象绑定同一个事件，只有最后一个会生效，比如： 复制代码 代码如下: document.getElementById("btn").onclick = method1; document.ge
addEventListener() 方法，事件监听
milijiangjun的博客
11-27 4万+
addEventListener() 方法，事件监听 你可以使用 removeEventListener() 方法来移除事件的监听。 语法 element.addEventListener(event, function, useCapture); 第一个参数是事件的类型 (如 "click" 或 "mousedown"). 第二个参数是事件触发后调用的函
window.addEventListener 添加事件监听 在什么时候进行销毁
最新发布
04-30
window.addEventListener用于在浏览器窗口上添加事件监听器。事件监听器可以在特定事件发生时执行相应的操作。当你使用window.addEventListener添加事件监听时，你也需要考虑何时销毁这个事件监听。 通常情况下，你可以在以下几种情况下销毁事件监听： 1. 当不再需要该事件监听时，手动调用removeEventListener方法来移除事件监听。这可以通过传递相同的事件类型、回调函数和useCapture参数来实现。例如： ```javascript function handleEvent(event) { // 处理事件的回调函数 } // 添加事件监听 window.addEventListener('click', handleEvent); // 移除事件监听 window.removeEventListener('click', handleEvent); ``` 2. 当元素被从DOM中移除时，事件监听也会自动被移除。这意味着如果你将事件监听添加到一个元素上，当该元素被从DOM中移除时，事件监听也会被销毁。 3. 在某些情况下，浏览器会自动处理事件监听的销毁。例如，当页面被关闭或刷新时，浏览器会自动清除所有的事件监听。 需要注意的是，在使用window.addEventListener添加事件监听时，确保在适当的时候进行销毁，以避免内存泄漏和不必要的资源消耗。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值