给dom元素添加事件的监听

最新推荐文章于 2024-04-11 13:50:47 发布
最新推荐文章于 2024-04-11 13:50:47 发布
阅读量6.9k 收藏 5
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43694639/article/details/87889199
版权

一、addEventListener给dom元素添加事件的监听有两种方式
1.用匿名函数方式添加事件的监听
例

<head lang="en">
    <meta charset="UTF-8">
    <title></title>

</head>
<body>
<button class="classname">按钮</button>
<button class="classname">按钮</button>
<button class="classname">按钮</button>
<button class="classname">按钮</button>
<button class="classname">按钮</button>

<script>
    var btnlist=document.getElementsByClassName("classname");
for(var i=0;i<btnlist.length;i++){
    btnlist[i].addEventListener("click",  function(){
        console.log("my");
    })
}
</script>
</body>

2.用外部函数添加事件的监听
例

<script>
    var btnlist=document.getElementsByClassName("classname");
for(var i=0;i<btnlist.length;i++){
    btnlist[i].addEventListener("click",btnvase);
    //是取函数的名称，而不是调用函数；即只能写该函数的名称btnvase，不能写成btnvase()；
    function btnvase(){
        console.log("my");
    }
}
</script>

不能用（var btnvase=function（）{}的函数形式添加事件的监听，此函数没有预编译功能）
二、removeEventListener移除事件句柄
在使用removeEventListener移除事件句柄时，addEventListener使用的函数必须是外部函数，匿名函数（addEventListener(“click”,function(){ })）是无法移除的。
例：

<script>
    var btnlist=document.getElementsByClassName("classname");
for(var i=0;i<btnlist.length;i++){
    btnlist[i].addEventListener("click",btnvase);
    function btnvase(){
        console.log("my");
        this.removeEventListener("click",btnvase);//this指在当前事件里面执行的对象
    }
}
</script>
九木德员工
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS实现绑定事件监听的几种方法详解
wangxuanyang_zer的博客
08-08 5446
事件监听是用于捕获和响应特定事件的机制。在Web开发中，事件是指用户在网页上进行的交互操作，例如点击按钮、鼠标移动、键盘输入等。通过事件监听，我们可以注册事件处理函数，当特定事件发生时，这些函数将被调用。事件监听的作用包括：交互响应：通过监听用户的交互操作，可以实现对用户输入的实时响应。例如，当用户点击按钮时，可以执行相应的操作，如提交表单、加载数据、显示/隐藏元素等。用户体验增强：通过事件监听，可以改善用户体验，使网页更具交互性和动态性。
DOM鼠标事件
weixin_66171880的博客
01-28 1851
1. 鼠标事件：用户操作鼠标在元素节点对象上做出的某些行为 当浏览器监听到事件行为时，会自动调用对应的事件处理函数 写法： 元素节点对象.事件名称 = 函数 2.给元素节点对象添加一个点击事件方法： 对象.onclick = function(){ 事件的处理函数/事件的处理程序 / 事件函数}； (快速)双击事件：ondblclick 3.鼠标移入事件： onmouseover、 onmouseenter 鼠标移出事件：onmouseleave、...
监听页面点击，动态给元素加点击事件
最新发布
--=
04-11 243
监听页面点击，动态给元素加点击事件
利用事件监听器添加鼠标滚轮事件
godwie的博客
12-20 467
let div = document.getElementById("major"); div.addEventListener("mousewheel",WheelGo); function WheelGo(e){ //代码块 }
DOM事件监听 ---- 注册事件（常用） ---- 删除事件（常用）
LQlove1的博客
06-19 580
addEventListener（）和 removeEventListener（）
web前端学习（四十一）——JavaScript DOM EventListener（添加与移除监听事件）
热门推荐
胜天半子祁同伟
02-22 1万+
web前端学习（四十一）——JavaScript DOM EventListener（添加与移除监听事件）
使用jQuery监听DOM元素大小变化
10-22
jQuery的`resize`事件通常用于监听窗口大小的变化，但jQuery还提供了一种扩展，使得我们可以将`resize`事件绑定到任意DOM元素上，而不仅仅局限于`window`对象。这种功能的实现是通过jQuery插件来完成的，特别是由Ben...
有关DOM元素与事件的3个谜题
09-05
在DOM元素上添加事件处理程序有三种常见方法： 1. **硬编码形式**：直接在HTML标签中定义事件处理函数，如`onclick`。例如： ```html ();'> ``` 或者在JavaScript中设置元素的事件属性，如： ```javascript ...
JS实现为动态创建的元素添加事件操作示例
10-18
在网页开发中，JavaScript 是一种常用的语言，用于...通过理解事件冒泡和事件委托，我们可以有效地为这些元素添加事件监听器，确保用户交互的正确响应。在实际开发中，掌握这些技巧对于创建交互丰富的网页至关重要。
JavaScript DOM 添加事件
01-19
因为对于支持DOM的浏览器来说，添加事件是用... /** * 注册一个监听事件到元素 * @param {Object} node 所要添加事件的对象 * @param {Object} type 事件类型 * @param {Object} listener 事件方法 */ function a
html5中监听canvas内部元素点击事件的三种方法
12-14
canvas内部元素不能像DOM元素一样方便的添加交互事件监听，因为canvas内不存在“元素”这个概念，他们仅仅是canvas绘制出来的图形。这对于交互开发来说是一个必经障碍，想要监听图形的点击事件思路很简单，只要监听...
DOM 键盘事件 鼠标移动
weixin_52915467的博客
02-22 542
一. 键盘事件 要操作键盘事件就需要获取键盘按键的位置，点击后按键后触发，松开后结束事件。 1. 这里我们使用关键词： onkeydown 键盘被按下 被按下会一直触发 onkeyup 键盘被松开 只会触发一次 这两个关键词往往会同时使用，有触发就有结束 2.键盘事件一般都会绑定给一些获取焦点的对象或者是document 下面我们来演示一下： document.onkeydown = function(event){ if(event.keyCode === 89 &&a
JS DOM 鼠标事件默认事件 鼠标右键 事件覆盖 添加事件监听 （一）
MrHuBingo的博客
06-06 2176
我们在使用原生JS 操作DOM 会遇到各种各样的问题 如何去解决他们 就需要一些经验了 当我们在html 中 定义一个DIV 命名为 #demo 时 给它写出两个一摸一样的点击事件时候 会发生覆盖事件 如图 let demo = document.getElementById('demo') demo.onclick = function (){ console.log(111)
dom中监听事件问题（addEventListener）
lgp199881的博客
02-06 962
事件监听的问题
webapi-03
qq_62413209的博客
02-15 387
webapi-03 1.删除节点 <button>删除</button> <ul> <li>熊大</li> <li>熊二</li> <li>光头强</li> </ul> <script> // // 1.获取元素 // var ul = document.querySelector('ul'); // ul.rem...
DOM事件——鼠标事件和键盘事件
爱前端的程序媛的博客
03-12 615
DOM事件基础就要结束了，今天整理一下，发上来。做的小案例和练习，有的我没有放html和css，一般都是使用ul和li做的，大家可以自行搭建吧，主要是学习JavsScript的，但是也不能忘记前面学习的。 事件的注册和解绑 两种注册绑定事件的方式 <script> // 给li注册点击事件 // 传统方式 var l...
给某个元素添加监听事件
weixin_30379973的博客
11-08 934
var elem = document.getElementById("test"); elem.addEventListener("click",aa,false); //click 代表的是事件， aa代表事件触发执行的函数 function aa(){ alert("aa"); } 转载于:https://www.cnblogs.com/halo-y...
前端 —— JavaScript 基础篇13 --- 事件监听器（DOM2级事件）
宁静致远
05-30 426
之前的文章的案例中 为DOM元素添加事件，出现两种方式。今天再说下第三种方式，也能为元素添加事件。 事件监听器 addEventListener 可以添加多个事件。存在兼容问题，支持 IE9 以上 实例： <button>事件监听dom2级</button> var btn = document.querySelector('button'); btn.addEventListener('click',function () { alert('哈哈') });
【JS】自定义JS工具函数库-封装DOM事件监听addEventListener-自定义事件总线eventBus-自定义消息订阅与发布PubSub
YK菌的博客
04-25 641
文章目录1. 封装DOM事件监听addEventListener1.1 复习DOM事件流1.2 事件冒泡1.3 事件委托1.4 自定义DOM事件监听2. 自定义事件总线eventBus定义使用3. 自定义消息订阅与发布PubSub定义使用 1. 封装DOM事件监听addEventListener 1.1 复习DOM事件流 基础知识可以参考这篇博文 【DOM】JavaScript-事件高级-注册事件-事件流-事件对象-事件冒泡-委派-鼠标键盘事件 简单复习一下DOM事件流 捕获阶段 当前目标阶段 冒泡阶段
js给动态生成的dom添加事件
05-10
可以使用以下几种方式来给动态生成的DOM添加事件： 1. addEventListener()方法：这是最常用的添加事件的方法。可以在生成DOM元素的同时，使用该方法添加事件监听器。 ```javascript let button = document.createElement('button'); button.textContent = 'Click me'; button.addEventListener('click', function() { console.log('Button clicked'); }); document.body.appendChild(button); ``` 2. onclick属性：也可以使用DOM元素的onclick属性来添加事件监听器。 ```javascript let button = document.createElement('button'); button.textContent = 'Click me'; button.onclick = function() { console.log('Button clicked'); }; document.body.appendChild(button); ``` 3. delegate方法：如果需要给动态生成的DOM元素添加事件，可以使用事件委托（delegate）来实现。这种方式可以将事件监听器添加到DOM树上的父元素，然后根据事件的目标元素来确定执行的代码。 ```javascript document.body.addEventListener('click', function(event) { if (event.target.tagName.toLowerCase() === 'button') { console.log('Button clicked'); } }); ``` 以上是几种常用的给动态生成的DOM添加事件的方法，可以根据实际情况选择合适的方式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值