javascript addEventListener() 方法的使用

最新推荐文章于 2024-02-17 12:37:41 发布
最新推荐文章于 2024-02-17 12:37:41 发布
阅读量4.8k 收藏 3
点赞数 3
文章标签： javascript html js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zenglintao/article/details/105909699
版权

版权声明：本文为博主博客园原创文章，转载请著名作者和出处。
原文地址：https://www.cnblogs.com/zenglintao/p/12823843.html

首先我们先新建个html文件，打好基本框架

 

 

 然后我们再新建个button，id为btn

 

现在点击不会有任何效果

 

 

创建一个js，函数名为Hello

 

 

 然后再点击按钮，没有任何提示

现在添加一个事件监听，当点击id为btn的按钮时，就会调用函数Hello

 

 

 让我们来看看效果

以上就是addEventListener的用法，它支持所有的html dom事件

zenglintao
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
js事件的绑定,addEventListener如何传入有参函数？
PWQ002的博客
08-02 3699
js如何绑定事件,addEventListener如何传入有参函数？ 文章目录js如何绑定事件,addEventListener如何传入有参函数？1. 什么是事件2.二种的事件处理程序 addEventListener如何传入有参函数？ 可在addEventListener 参函数的位置用匿名函数包裹 代码如下： //定义一个有参函数：在控制台打印传入的参数 function printStr(str){ console.log(str); } //通过元素id获取节点 var div = docu
addEventListener的三种用法
weixin_30642305的博客
11-29 2075
首先addEventListener得API target.addEventListener(type,listener[,options]); target.addEventListener(type, listener [,{capture: Boolean, bubbling: Boolean, once: Boolean}]); target.addEventL...
前端JavaScript篇之addEventListener()方法的参数和使用
星辰迷上大海的博客
02-08 2160
addEventListener() 是 JavaScript 中用于向指定元素添加事件监听器的方法。这个方法通常用于处理用户交互，比如点击、鼠标悬停等操作。
jquery对事件的监听方法addEventListener()
qq_36521848的博客
01-06 4673
在这个点击事件的监听里，我们可以获取鼠标的点击坐标 (function($){ window.addEventListener("click",function(evt){ for(var i in evt) { console.log(i + "---" + evt[i]); } },false); })(jQuery); ...
关于JS中addEventListener的使用
小火车况且况且况且的博客
03-10 4020
关于JS中addEventListener的使用 MDN中addEventListener()说明 主要用来实现事件的绑定 存在三个参数 target.addEventListener(type, listener, useCapture); type: 表示监听事件类型的字符串。类似于click,mouseover... listener: 用来监听处理的函数方法 useCapture: 默认是false,事件冒泡,可以设置为true为事件捕获 这里需要了解一下基本的事件流(事件捕获->事件目标
JQuery学习分享
myang147258的博客
09-24 729
body>//设置第一个div的动画效果//设置第二个div的动画效果//设置所有div的动画效果，当多个动画效果是，依次进行// $(":button").click(function () { //获取按钮并添加侦听事件//当点击确定按钮后，div停止动画// })//多个动画依次触发。
javascript的addEventListener() 方法
qq_32666545的博客
08-19 3645
...
【JS】addEventListener方法介绍
红尘道，红尘练心
09-07 5556
第三个参数useCapture：设置传递的类型，默认值为false，即冒泡传递（可省略）；使用 attachEvent 方法有个缺点，this 的值会变成 window 对象的引用而不是触发事件的元素。addEventListener()，事件监听，用于向指定的元素添加事件监听。在捕获中，外部元素的事件会被先触发，然后才会触发内部元素的事件。在冒泡中，内部元素的事件会先被触发，然后再触发外部元素；(它允许给一个事件注册多个监听器，且不会覆盖已存在的事件)事件的传递有两种方式：冒泡与捕获。
javascript attachEvent和addEventListener使用方法
10-30
attachEvent与addEventListener区别适应的浏览器版本不同，同时在使用的过程中要注意
动态的绑定事件addEventListener方法的使用
12-10
代码如下: [removed] function test(){ window.alert(“你投了一次票”); //解除绑定事件 document.getElementById(“but1”).removeEventListener(...script language = “javascript” type = “text/ja
Javascript 高级手势使用介绍
09-28
在IE10中新加入的对高级用户输入的识别支持，举例说明：注册一个点击操作，通过一句addEventListener 就能够知道当前用户的点击是哪种设备，是手指的点击，是鼠标的单击还是触控笔的点击（平板设备都会带有触控笔）
JavaScript使用addEventListener添加事件监听用法实例
01-19
本文实例讲述了JavaScript使用addEventListener添加事件监听用法。分享给大家供大家参考。具体实现方法如下： <!DOCTYPE html> <html lang=en> <head> <title>This text is the title of the...
jQuery
a526498268464的博客
11-09 359
1.传统绑定事件与监听事件的区别 .addEventListener("事件类型不带on",function(){}) 区别： 传统绑定事件只能执行一个函数 如果要用事件监听绑定多个函数的话 会一一执行 let button = document.getElementsByTagName("button"); button[0].onclick = function (ev){ alert("我是1") } button[1].onclick = function (ev){ ...
onclick和addEventListener以及jquery里面的的整理
小瑾沐晚风的博客
11-03 8334
1.jquery里面的click 定义和用法 当点击元素时，会发生 click 事件。 当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click。 click() 方法触发 click 事件，或规定当发生 click 事件时运行的函数。 $(selector).click(function) 触发或将函数绑定到被选元素的点击事件 $(document)....
jquery ------事件绑定的方法总结（on | addEvevtListener | attachEvent ）
COCOLI_BK的博客
12-02 568
用on绑定off解绑 // onclick绑定 document.body.onclick = () => { console.log(111) } // 解绑 document.body.onclick = null; ================================================= jquery写法： 绑定 $(dom).click([子...
jquery 事件
weixin_42979149的博客
10-11 157
事件监听 监听click事件 window.addEventListener(&amp;amp;quot;click&amp;amp;quot;,function(evt){ for(var i in evt) { console.log(i + &amp;amp;quot;---&amp;amp;quot; + evt[i]); } },false);
JS addEventListener()方法
热门推荐
Dcripple的博客
05-11 2万+
addEventListener()，事件监听，用于向指定的元素添加事件监听 例： <button id="btn">点击</button> <script> document.getElementById("btn").addEventListener("click",function () { console.log(Date()); }); <
冇内容管理系统分析 二. addEventListener
weixin_33963189的博客
12-20 217
addEventListener－开始来源： chenlulouis 前面零散地写了些关于 addEventListener 的内容，觉得比较散，有些地方可能也说得不够清楚明白，所以决定以连载的形式从头到尾再写一篇。 addEventListener 用于注册事件处理程序，IE 中为attachEvent，我们为什么讲 addEventListener 而不讲 attachEve...
js addeventlistener
最新发布
Charles1938229的博客
02-17 1068
JavaScript是一种广泛应用于网页开发的脚本语言，具有灵活的语法和强大的功能。在网页中，我们经常需要处理用户的交互操作，例如点击按钮、输入文本等，而addEventListener方法就是用来处理这些事件的。
javascript addEventListener
12-21
addEventListener是JavaScript中用于向DOM元素添加事件监听器的方法。它可以在指定的DOM元素上注册一个特定的事件处理函数，以便在事件触发时执行相应的操作。 以下是一个使用addEventListener方法的示例： ```javascript var button = document.getElementById("myButton"); button.addEventListener("click", function() { alert("Button clicked!"); }); ``` 在上面的示例中，我们首先通过getElementById方法获取了一个id为"myButton"的按钮元素。然后，我们使用addEventListener方法向该按钮元素添加了一个"click"事件监听器。当按钮被点击时，会触发匿名函数中的代码，弹出一个提示框显示"Button clicked!"。 需要注意的是，addEventListener方法可以接受三个参数： 1. 事件类型：表示要监听的事件类型，比如"click"、"mouseover"等。 2. 事件处理函数：表示事件触发时要执行的函数。 3. useCapture（可选）：一个布尔值，表示事件是否在捕获阶段进行处理，默认为false（在冒泡阶段处理）。 使用addEventListener方法的好处是，可以为同一个DOM元素添加多个不同类型的事件监听器，而不会覆盖之前的监听器。这样可以更灵活地处理不同的事件。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值