JavaScript HTML DOM 事件监听器

最新推荐文章于 2024-04-11 19:26:38 发布
最新推荐文章于 2024-04-11 19:26:38 发布
阅读量831 收藏 2
点赞数
文章标签： javascript html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Circle_Key/article/details/130425636
版权

addEventListener() 方法

!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method to attach a click event to a button.</p>

<button id="myBtn">Try it</button>

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

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

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

</body>
</html>

addEventListener() 方法将事件处理程序附加到指定的元素。

addEventListener() 方法在不覆盖现有事件处理程序的情况下将事件处理程序附加到元素。

可以向一个元素添加多个事件处理程序。

可以将许多相同类型的事件处理程序添加到一个元素，即两个“点击”事件。

可以将事件侦听器添加到任何 DOM 对象，而不仅仅是 HTML 元素。即窗口对象。

addEventListener() 方法可以更轻松地控制事件对冒泡的反应。

使用 addEventListener() 方法时，JavaScript 与 HTML 标记分开，以提高可读性，并允许您添加事件侦听器，即使您不控制 HTML 标记也是如此。

可以使用 removeEventListener() 方法轻松删除事件侦听器。

语法

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型（如“ click ”或“ mousedown ”或任何其他 HTML DOM 事件。）

第二个参数是事件发生时我们要调用的函数。

第三个参数是一个布尔值，指定是使用事件冒泡还是事件捕获。此参数是可选的。

注意

没有为事件使用“on”前缀；使用“ click ”代替“ onclick ”

向元素添加事件处理程序

element.addEventListener("click", function(){ alert("Hello World!"); });

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method to attach a click event to a button.</p>

<button id="myBtn">Try it</button>

<script>
document.getElementById("myBtn").addEventListener("click", function() {
  alert("Hello World!");
});
</script>

</body>
</html>

还可以引用外部“命名”函数：

element.addEventListener("click", myFunction);

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

!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method to execute a function when a user clicks on a button.</p>

<button id="myBtn">Try it</button>

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

function myFunction() {
  alert ("Hello World!");
}
</script>

</body>
</html>

向同一元素添加多个事件处理程序

addEventListener() 方法允许您向同一元素添加多个事件，而不会覆盖现有事件：

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method to add two click events to the same button.</p>

<button id="myBtn">Try it</button>

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

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

function someOtherFunction() {
  alert ("This function was also executed!");
}
</script>

</body>
</html>

可以将不同类型的事件添加到同一元素：

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method to add many events on the same button.</p>

<button id="myBtn">Try it</button>

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

<script>
var x = document.getElementById("myBtn");
x.addEventListener("mouseover", myFunction);
x.addEventListener("click", mySecondFunction);
x.addEventListener("mouseout", myThirdFunction);

function myFunction() {
  document.getElementById("demo").innerHTML += "Moused over!<br>";
}

function mySecondFunction() {
  document.getElementById("demo").innerHTML += "Clicked!<br>";
}

function myThirdFunction() {
  document.getElementById("demo").innerHTML += "Moused out!<br>";
}
</script>

</body>
</html>

向窗口对象添加事件处理程序

 addEventListener() 方法允许您在任何 HTML DOM 对象（例如 HTML 元素、HTML 文档、窗口对象或其他支持事件的对象，如 xmlHttpRequest 对象）上添加事件侦听器。

添加一个在用户调整窗口大小时触发的事件监听器：

window.addEventListener("resize", function(){
  document.getElementById("demo").innerHTML = sometext;
});

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method on the window object.</p>

<p>Try resizing this browser window to trigger the "resize" event handler.</p>

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

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

</body>
</html>

传递参数

传递参数值时，使用“匿名函数”调用带有参数的指定函数：

element.addEventListener("click", function(){ myFunction(p1, p2); });

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example demonstrates how to pass parameter values when using the addEventListener() method.</p>

<p>Click the button to perform a calculation.</p>

<button id="myBtn">Try it</button>

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

<script>
let p1 = 5;
let p2 = 7;
document.getElementById("myBtn").addEventListener("click", function() {
  myFunction(p1, p2);
});

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

</body>
</html>

事件冒泡还是事件捕获？

HTML DOM 中有两种事件传播方式，冒泡和捕获。

事件传播是一种在事件发生时定义元素顺序的方法。如果在 <div> 元素中有一个 <p> 元素，并且用户点击了 <p> 元素，应该首先处理哪个元素的“点击”事件？

在冒泡中，首先处理最内层元素的事件，然后再处理外层元素：首先处理 <p> 元素的点击事件，然后是 <div> 元素的点击事件。

在捕获最外层元素的事件时，首先处理然后是内部：将首先处理 <div> 元素的点击事件，然后是 <p> 元素的点击事件。

使用 addEventListener() 方法，您可以使用“useCapture”参数指定传播类型：

addEventListener(event, function, useCapture);

默认值为 false，即会使用冒泡传播，当该值设置为 true 时，事件使用捕获传播。

document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);

<!DOCTYPE html>
<html>
<head>
<style>
#myDiv1, #myDiv2 {
  background-color: coral;
  padding: 50px;
}

#myP1, #myP2 {
  background-color: white; 
  font-size: 20px;
  border: 1px solid;
  padding: 20px;
}
</style>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
</head>
<body>

<h2>JavaScript addEventListener()</h2>

<div id="myDiv1">
  <h2>Bubbling:</h2>
  <p id="myP1">Click me!</p>
</div><br>

<div id="myDiv2">
  <h2>Capturing:</h2>
  <p id="myP2">Click me!</p>
</div>

<script>
document.getElementById("myP1").addEventListener("click", function() {
  alert("You clicked the white element!");
}, false);

document.getElementById("myDiv1").addEventListener("click", function() {
  alert("You clicked the orange element!");
}, false);

document.getElementById("myP2").addEventListener("click", function() {
  alert("You clicked the white element!");
}, true);

document.getElementById("myDiv2").addEventListener("click", function() {
  alert("You clicked the orange element!");
}, true);
</script>

</body>
</html>

removeEventListener() 方法

removeEventListener() 方法删除已附加到 addEventListener() 方法的事件处理程序：

element.removeEventListener("mousemove", myFunction);

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
  background-color: coral;
  border: 1px solid;
  padding: 50px;
  color: white;
  font-size: 20px;
}
</style>
</head>
<body>

<h2>JavaScript removeEventListener()</h2>

<div id="myDIV">
  <p>This div element has an onmousemove event handler that displays a random number every time you move your mouse inside this orange field.</p>
  <p>Click the button to remove the div's event handler.</p>
  <button onclick="removeHandler()" id="myBtn">Remove</button>
</div>

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

<script>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);

function myFunction() {
  document.getElementById("demo").innerHTML = Math.random();
}

function removeHandler() {
  document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
}
</script>

</body>
</html>

参考地址:JavaScript DOM EventListener

Circle_Key
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html页面 事件监听,HTML的input监听输入事件
weixin_42168230的博客
06-03 5216
$("#term").bind('input propertychange', function () {var term = $("#term").val();if (!type.test(term)) {$("#message").html(" ဆ 输入有误，请输入正整数");$("#addActive").addClass("layui-btn-disabled");return fals...
JavaScript 中常见HTML事件
ivenqin的博客
06-22 1142
HTML 事件就是发生在 HTML 元素上的事情，可以是浏览器行为，也可以是用户行为。我们可以使用 JavaScript 触发这个事件。 下面是常用的HTML事件： onclick：用户点击 HTML 元素。 onchange：HTML 元素改变 onload：浏览器已完成页面的加载。 onmouseover：用户在一个HTML元素上移动鼠标。 onmouseout：用户从一个HTML元素上移开鼠标。 onkeydown：用户按下键盘按键。 onclick事件 onclick 即点击事件，会在元素被点击
HTML DOM 事件监听器
03-07 2290
DOM事件流同时支持两种事件模型：捕获型事件和冒泡型事件，捕获型事件首先发生。在捕获中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： 元素的点击事件先触发 ，然后再触发 元素的点击事件。通过JavaScript，我们可以给页面的某些元素添加事件的监听器，当元素触发相应事件的时候监听器就会捕捉到这个事件并执行相应的代码。在冒泡中，内部元素的事件会先被触发，然后再触发外部元素，即： 元素的点击事件先触发，然后会触发 元素的点击事件。
学习笔记------HTML按键监听
m0_56464236的博客
07-06 970
对于实体按键，HTML提供了三种操做，KeyDown按键按压，KeyPress按键按压并产生字符，KeyUp释放按键。平时我们在玩游戏时难免会涉及到与页面元素交互，HTML提供了多种监听事件让用户可以通过硬件与页面元素进行交互。
HTML监听事件
songshao の blog
10-24 3826
HTML中通过需要给某个元素加上一个监听事件，然而HTML中on开头的监听事件有下面这些，通过通过js方法来处理，这些监听事件的以及返回结果。
JavaScript HTML DOM EventListener（事件监听器）（秒懂事件监听）
最新发布
百赢出品，必属精品
04-11 4167
JavaScript HTML DOM EventListener（事件监听器）是一种用于在HTML文档中捕获和处理事件的机制。通过使用事件监听器，可以在特定的HTML元素上注册监听器函数，以便在事件发生时执行相应的操作。事件监听是在网页开发中常用的技术，用于捕获特定的用户操作或系统事件，并在事件发生时执行相应的代码。事件类型: 事件可以是用户操作，如点击、悬停、键盘输入等，也可以是系统事件，如窗口加载、滚动、大小调整等。事件目标。
WEB开发 之 JavaScript HTML DOM 事件.docx
09-26
3. **HTML DOM事件分配**：除了通过HTML属性设置事件，还可以使用JavaScript动态地为元素添加事件监听器。例如，通过`getElementById`方法获取元素并设置`onclick`事件： ```javascript document.getElementById('...
javascript 传统事件模型构造的事件监听器实现代码
10-29
`addListen`方法用于添加事件监听器，`removeListen`用于移除监听器，而`bindListen`则负责将事件绑定到元素上。 1. `addListen`方法接收三个参数：元素`el`、事件类型`eventType`和处理函数`func`。它首先检查元素...
globally.js:批量添加javascript全局事件监听器
06-22
在JavaScript中，事件监听器通常用于响应用户交互或DOM变化。当特定的事件（如点击、滚动、键盘输入等）发生时，监听器会触发预先定义好的函数。全局事件监听器则不是针对单个DOM元素，而是监听整个文档或者特定的...
html的DOM中Event对象onabort事件用法实例
09-03
这意味着你可以将`onabort`事件监听器直接附加到图像元素，以便在加载中断时执行相应的操作。例如： ```html ('Error: Loading of the image was aborted')" /> ``` 在这个例子中，如果图像加载过程中断，会弹出一个...
学习Javascript-HTML-DOM：学习Javascript HTML DOM elzero
02-11
4. **事件处理**：学习如何绑定事件监听器，响应用户的点击、滚动等行为。 5. **AJAX**：了解如何异步请求服务器数据，实现页面无刷新更新。 6. **CSS操作**：用JavaScript改变元素的样式，实现动态效果。 7. **...
JavaScript事件监听器总结
Maybe_ss的博客
10-19 3639
事件监听总结，事件流，捕获阶段、目标阶段、冒泡阶段，事件代理，阻止事件冒泡，阻止默认事件。
JavaScript中如何监听dom的节点变化
weixin_45356397的博客
03-23 535
监听dom节点的变化
HTML事件监听和绑定
致我那些年搬过的砖
01-04 4402
第一种直接注册鼠标点击事件监听 e是回调的事件，通常用来判断事件的具体类型和信息$('#test_refresh').click(function (e) { testTable.fnDraw(true); });第二种使用on注册事件:鼠标按下事件on函数的第一个参数是，事件类型，第二个是要监听的子元素的类型（如果有的话） $("#test_table").on('mousedown', 'tbo
JS实现绑定事件监听的几种方法详解
wangxuanyang_zer的博客
08-08 5716
事件监听是用于捕获和响应特定事件的机制。在Web开发中，事件是指用户在网页上进行的交互操作，例如点击按钮、鼠标移动、键盘输入等。通过事件监听，我们可以注册事件处理函数，当特定事件发生时，这些函数将被调用。事件监听的作用包括：交互响应：通过监听用户的交互操作，可以实现对用户输入的实时响应。例如，当用户点击按钮时，可以执行相应的操作，如提交表单、加载数据、显示/隐藏元素等。用户体验增强：通过事件监听，可以改善用户体验，使网页更具交互性和动态性。
JavaScript监听DOM节点变化事件
qq_44849271的博客
12-09 4289
DOMCharacterDataModified监听的是元素中文本节点的变化，但是innerHTML、innerText与textContent都是监听不到的，使用el.firstChild.nodeValue才会触发DOMCharacterDataModified的监听。DOMNodeInserted监听的是元素的插入，属性节点的添加是监听不到的。DOMNodeRemoved监听的是元素的移除，属性节点移除是监听不到的。DOMAttrModified监听的是元素属性的变化。
JSP的Web监听器（Listener）
2401_83704125的博客
03-29 691
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。我特地针对初学者整理一套前端学习资料分享给大家，戳这里即可获取）**你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难。
html怎么实现事件监听,js事件监听的几种方式
weixin_33662430的博客
06-05 3693
js作为事件驱动的语言，那对事件的监听必不可少，那么在前端浏览器中有几种事件监听的方式呢。1.html内联属性该方式的缺点就是和html耦合高，尽量少使用2.dom属性绑定 hello var obj = document.getElementByClassName('title');obj[n].onclick = function() {alert('hello');}该方式的缺点是只能绑定一...
JavaScript事件处理：探索DOM事件和事件监听器
精通前端技术，了解后端接口
10-25 355
DOM（Document Object Model）是一个以树形结构来表示HTML文档的API。在DOM中，每个HTML元素都是一个节点，而事件则是与这些节点相关联的行为或动作。常见的DOM事件包括鼠标点击、键盘输入和表单提交等。事件是指用户在页面上进行的各种操作，比如点击按钮、输入文本、滚动页面等。通过事件处理，我们可以捕获这些事件，并执行特定的代码来响应用户的操作。JavaScript事件处理是Web开发中重要的一部分。通过合理使用事件处理程序，我们可以对用户的操作做出响应，并实现更丰富的用户交互体验。
JavaScript DOM事件绑定详解
DOM2级事件扩展了事件处理，引入了`addEventListener()`和`removeEventListener()`方法，允许添加和移除事件监听器，支持事件冒泡和捕获，提高了灵活性。例如： ```javascript input.addEventListener('click', ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值