js中的addEventListener例子

最新推荐文章于 2024-07-01 16:22:16 发布
最新推荐文章于 2024-07-01 16:22:16 发布
阅读量320 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u9t9p60lpj/article/details/101029130
版权 
<!DOCTYPE html>
<html>
<body>

<p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p>

<button id="myBtn">点我</button>

<p id="demo"></p>

<script>
document.getElementById("myBtn").addEventListener("click", displayDate);

function displayDate() {
    document.getElementById("demo").innerHTML = Date();
}
</script>

</body>
</html>

利用addEventListener可以向同一个元素添加多个相同类型事件且不会被覆盖

<!DOCTYPE html>
<html>
<body>

<p>该实例使用 addEventListener() 方法向同个按钮中添加两个点击事件。</p>

<button id="myBtn">点我</button>

<script>
var x = document.getElementById("myBtn");
x.addEventListener("click", myFunction);
x.addEventListener("click", someOtherFunction);

function myFunction() {
    alert ("Hello World!")
}

function someOtherFunction() {
    alert ("函数已执行!")
}
</script>

</body>
</html>

向window添加事件

<!DOCTYPE html>
<html>
<body>

<p>实例在window对象中使用 addEventListener() 方法。</p>

<p>尝试重置浏览器的窗口触发 "resize" 事件句柄。</p>

<p id="demo"></p>

<script>
window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = Math.random();
});
</script>

</body>
</html>

并可以使用匿名函数来传递参数

<!DOCTYPE html>
<html>
<body>

<p>实例演示了在使用 addEventListener() 方法时如何传递参数。</p>

<p>点击按钮执行计算。</p>

<button id="myBtn">点我</button>

<p id="demo"></p>

<script>
var p1 = 5;
var p2 = 7;

document.getElementById("myBtn").addEventListener("click", function() {
    myFunction(p1, p2);
});

function myFunction(a, b) {
    var result = a * b;
    document.getElementById("demo").innerHTML = result;
}
</script>

</body>
</html>

Categories: JavaScript

如火也如荼
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js中addEventListener()与removeEventListener()用法案例分析
10-15
主要介绍了js中addEventListener()与removeEventListener()用法,结合实例形式分析了js中addEventListener()与removeEventListener()基本功能、用法与操作注意事项,需要的朋友可以参考下
JS中onclick与addEventListener的区别详解
01-08
在这个例子中，点击“点我”会依次打印出“我是第一个”和“我是第二个”。 - 参数：事件名不带“on”，例如`"click"`而不是`"onclick"`。处理函数是一个函数引用，可以是命名函数或者匿名函数。第三个参数是一个...
javascript:addEventListener
weixin_34109408的博客
04-02 145
addEventListener 用于注册事件处理程序，IE 中为 attachEvent，我们为什么讲 addEventListener 而不讲 attachEvent 呢？一来 attachEvent 比较简单，二来 addEventListener 才是 DOM 中的标准内容。 简介 addEventListener 为文档节点、document、window 或 XMLHttpRequ...
史上最全addEventListener示例整理
weixin_56075623的博客
06-13 385
【代码】史上最全addEventListener示例整理。
js中的addEventListener
weixin_30572613的博客
07-03 269
　addEventListener()方法: 　　addEventListener()方法为指定元素指定事件处理程序。 　　addEventListener()方法为元素附加事件处理程序而不会覆盖已有的事件处理程序。 　　您能够向一个元素添加多个事件处理程序。 　　您能够向一个元素添加多个相同类型的事件处理程序，例如两个 "click" 事件。 　　您能够向任何 DOM 对象添加事件...
关于JS中addEventListener的使用
小火车况且况且况且的博客
03-10 4055
关于JS中addEventListener的使用 MDN中addEventListener()说明 主要用来实现事件的绑定 存在三个参数 target.addEventListener(type, listener, useCapture); type: 表示监听事件类型的字符串。类似于click,mouseover... listener: 用来监听处理的函数方法 useCapture: 默认是false,事件冒泡,可以设置为true为事件捕获 这里需要了解一下基本的事件流(事件捕获->事件目标
addEventListener（）方法– JavaScript事件监听器示例代码
cumi6497的博客
08-20 895
The JavaScript addEventListener() method allows you to set up functions to be called when a specified event happens, such as when a user clicks a button. This tutorial shows you how you can implement ...
JavaScript中的事件处理程序（addEventListener）
01-08
这个例子中，`this`指的是触发事件的按钮元素，当点击按钮时，背景色会在灰色和浅灰色之间切换。 2. 为表格元素添加点击事件监听器，改变文本内容： ```javascript function modifyText(new_text) { var t2 = ...
javascript多种经典例子
11-30
JavaScript，简称JS，是一种广泛应用于Web开发的轻量级编程语言，主要负责客户端的动态交互。作为一门基于原型、函数式、弱类型的脚本语言，它在网页制作、网页游戏开发、网页应用等方面发挥着重要作用。这个压缩包...
js addeventlistener
Charles1938229的博客
02-17 2154
JavaScript是一种广泛应用于网页开发的脚本语言，具有灵活的语法和强大的功能。在网页中，我们经常需要处理用户的交互操作，例如点击按钮、输入文本等，而addEventListener方法就是用来处理这些事件的。
JavaScript 事件监听器 addEventListener() 方法 和一些基本的事件
最新发布
qq_52530691的博客
07-01 1034
addEventListener() 方法用于向指定元素添加事件句柄。当计算机属性检测到事件发生的时候，运行一些代码，通常是我们所制定的函数。
Js addEventListener 和 attachEvent
zhulongxi的博客
07-12 445
addEventListener 和 attachEvent 可以为某个元素的某个事件多次添加操作。 IE8 及以下不支持addEventListener ，使用attachEvent代替。 $(document).ready(function () { var x = $("#btn_test")[0]; if(x.addEventListener)
JS addEventListener()方法
weixin_72271537的博客
10-24 334
2. 可以添加不同的事件类型 --例如：click(点击),mouseover（鼠标移入）,mouseout（鼠标移出）,resize（窗口重置）第三个参数useCapture：设置传递的类型，默认值为false，即冒泡传递（可省略）；语法：addEventListener(event,function,useCapture);第一个参数event：指事件的类型（如’click’,‘mousedown’），this 的值会变成 window 对象的引用而不是触发事件的元素。3. 使用匿名函数传递参数。
JS-addEventListener方法介绍
态度决定一切
10-12 920
addEventListener 接受三个参数，最后一个参数为boolean值：true，事件处理程序以捕捉模式触发；从顶层的父节点开始触发事件，从外到内传播。false，事件处理程序以冒泡模式触发；从最内层的节点开始触发事件，逐级冒泡直到顶层节点，从内向外传播。兼容：IE8以前的浏览器只支持事件冒泡，不支持事件捕获，它也不支持addEventListener函数，不会用第三个参数来表示是冒泡还是捕获，它提供了另一个函数attachEvent。IE9就支持addEventListener。Event.sto
【js】addEventListener() 用法
热门推荐
kkkkkkkk的博客
06-24 1万+
  addEventListener() 方法用于向指定元素添加事件句柄。 addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。 你可以向一个元素添加多个事件句柄。 你可以向同个元素添加多个同类型的事件句柄，如：两个 "click" 事件。 你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。 addEventLis...
js 判断用户是否离开当前页面
weixin_43617604的博客
12-24 2861
简介 VisibilityChange 事件；用于判断用户是否离开当前页面 Code // 页面的 visibility 属性可能返回三种状态 // prerender，visible 和 hidden let pageVisibility = document.visibilityState; // 监听 visibility change 事件 document.addEventLi...
addEventListener
yueliangyefan的博客
06-06 478
https://www.cnblogs.com/baiyangyuanzi/p/6627401.html
前端笔记 js关于addEventListener
doiido的专栏
10-26 4129
事件对象的类型取决于特定的事件。durationchange 事件在视频/音频（audio/video）的时长发生变化时触发。loadeddata 事件在浏览器加载视频/音频（audio/video）当前帧时触发触发。ratechange 事件在视频/音频（audio/video）的播放速度发送改变时触发。progress 事件在浏览器下载指定的视频/音频（audio/video）时触发。canplay 事件在用户可以开始播放视频/音频（audio/video）时触发。
关于addEventListener的例子
05-26
addEventListener 是一个 JavaScript 方法，用于将事件监听器添加到 HTML 元素上。下面是一个简单的例子，演示如何使用 addEventListener 方法来监听按钮的点击事件： HTML 代码： ``` <button id="myButton">点击我</button> ``` JavaScript 代码： ``` const myButton = document.querySelector('#myButton'); myButton.addEventListener('click', function() { console.log('按钮被点击了！'); }); ``` 这个例子中，我们首先通过 document.querySelector 方法获取了按钮元素，然后使用 addEventListener 方法来添加一个 click 事件的监听器。当用户点击按钮时，控制台会输出一条信息："按钮被点击了！"

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值