JS DOM事件

最新推荐文章于 2024-09-06 09:58:40 发布
最新推荐文章于 2024-09-06 09:58:40 发布
阅读量199 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/RenOuQ/article/details/105486162
版权
DOM 事件

为了在用户点击元素时执行代码，请向 HTML 事件属性添加 JavaScript 代码：

onclick
例:当用户点击 h1标签时，会改变其内容：

<html>
<body>

<h1 onclick="this.innerHTML = 'Hello!'">点击此文本！</h1>

</body>
</html> 

<html>
<body>

<h1 onclick="changeText(this)">点击此文本！</h1>

<script>
function changeText(id) { 
    id.innerHTML = "Hello:)";
}
</script>

</body>
</html>
HTML 事件属性

如需向 HTML 元素分配事件，您能够使用事件属性。
例
向 button 元素分配 onclick 事件：

<button onclick="displayDate()">试一试</button>
使用 HTML DOM 分配事件

HTML DOM 允许您使用 JavaScript 向 HTML 元素分配事件：
为 button 元素指定 onclick 事件：

<script>
document.getElementById("myBtn").onclick = displayDate;
</script>

当点击按钮时将执行函数。

onload 和 onunload 事件

当用户进入后及离开页面时，会触发 onload 和 onunload 事件。
onload 和 onunload 事件可用于处理 cookie。
例

<body onload="checkCookies()">

onchange 事件
onchange 事件经常与输入字段验证结合使用。
例

<input type="text" id="fname" onchange="upperCase()">

onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于当用户将鼠标移至 HTML 元素上或移出时触发某个函数：

onmousedown, onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 事件构成了完整的鼠标点击事件。

首先当鼠标按钮被点击时，onmousedown 事件被触发；然后当鼠标按钮被释放时，onmouseup 事件被触发；最后，当鼠标点击完成后，onclick 事件被触发。

DOM事件监听器

addEventListener() 方法
例
添加当用户点击按钮时触发的事件监听器：

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

addEventListener() 方法为指定元素指定事件处理程序。

addEventListener() 方法
为元素附加事件处理程序而不会覆盖已有的事件处理程序。
能够向一个元素添加多个事件处理程序。
使我们更容易控制事件如何对冒泡作出反应。

向元素添加事件处理程序
例

当用户点击某个元素时提示 "Hello World!"：

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

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

element.addEventListener("click", myFunction);

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

能够向相同元素添加不同类型的事件：
例

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

传递参数
当传递参数值时，请以参数形式使用调用指定函数的“匿名函数”：
例

element.addEventListener("click", function(){ myFunction(p1, p2); });
冒泡与捕获

在 addEventListener() 方法中，你能够通过使用“useCapture”参数来规定传播类型：
addEventListener(event, function, useCapture);
默认值是 false，将使用冒泡传播，如果该值设置为 true，则事件使用捕获传播。
例

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

removeEventListener() 方法会删除已通过 addEventListener() 方法附加的事件处理程序：
例

element.removeEventListener("mousemove", myFunction);
人偶Q
关注
JavaScript——DOM事件流
shhghvvh的博客
11-25 1110
事件流描述的是从页面中接收事件的顺序。事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。DOM事件流中有三个阶段：捕获阶段，当前目标阶段，冒泡阶段。
js之DOM事件
m0_61547956的博客
04-22 3383
元素创建事件的两种方式 传统方式 on开头的事件，事件的唯一性，同一个元素同一个事件只能设置一个处理函数，后面的覆盖前面的，下列代码只弹出2。 var btns = document.querySelectorAll('button'); btns[0].onclick = function() { alert(1); } btns[0].onclick = function() { alert
js中给一个元素添加事件
ahn32288的博客
06-15 178
给document全局文档的动作检测添加事件，这是禁止右键、禁止复制的页面的方式之一 try{ document.attachEvent("onclick",function(){onclick();},false); // IE使用这个 }catch(e){ document.addEventListener("onclick",function(){onclick()...
js中怎么为同级元素添加点击事件
weixin_30271335的博客
01-09 411
事件件是javascript脚本语言的重要组成部分，因为有事件才使用户页面的体验更加的美好。元素添加事件是js语言中最基础的。我们可以为元素本身添加事件，也可以通过事件绑定和事件监听为元素的父元素和子元素添加事件。今天我要给大家分享的是如何让通过元素本身为同级元素添加事件。 html代码： <div id="box1">我是box1</div> <div...
原生js给一个元素绑定click事件（三种实现方法）
本人小可爱
09-06 398
js实现给动态元素添加事件
zxw162的博客
04-17 233
动态元素
深入理解JS DOM事件机制
11-27
JavaScript DOM事件机制是Web开发中的核心概念之一，它关乎如何响应用户与网页元素的交互。在深入理解这一机制前，我们需要了解三个关键术语：事件流、事件冒泡和事件捕获。 1. 事件流： 事件流描述了事件在HTML...
JavaScript DOM事件(笔记)
10-24
### JavaScript DOM事件流 JavaScript中的DOM事件流主要有两种模式，分别是事件冒泡和事件捕获。 #### 事件冒泡 事件冒泡是指事件从最具体的元素开始触发，然后向上传播至最不具体的节点。例如，在一个包含嵌套...
js中的事件（给元素绑定事件）
zhangjinlei00的专栏
11-17 5527
function func1(){         alert('hello');     }     //html 和 javascript相分离的时候,给这个元素绑定一个事件 document.getElementById('click2').onclick=function(){         alert('hehe'); } //addEventListener()参数
JS如何实现动态添加的元素绑定事件
12-13
这篇文章主要介绍了JS如何实现动态添加的元素绑定事件,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 最近做的项目要实现一个动态添加动态删除的功能，思考了一下，该怎么给动态添加的元素绑定事件。最后觉得有两种方式比较可靠，第一种是在动态添加的html代码里添加oclick事件，然后给传个唯一的参数来判断点击了哪个，然后做相应的操作，第二种是通过事件委托的原理来处理，事件委托将一个事件侦听器实际绑定到整个容器，然后在单击它时能够访问每个列表项，这种更高效一些 具体的代码实现如下： 第一：onclick <body> <button oncli
js动态添加的DIV中的onclick事件简单实例
10-21
下面小编就为大家带来一篇js动态添加的DIV中的onclick事件简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
js动态添加点击事件的两种方法
热门推荐
h0713的博客
07-25 2万+
js动态添加点击事件或其他事件（这里以点击事件为例） 第一种：加载 js文件时自动添加，这种方法可以免去html元素内的onclick等属性一长串的字符，也方便一些像我这样初级的查看源代码时找不着北； 但缺点是只能在页面启动时加载一次（不知道这样表述准不准确，反正我能懂就好了），想要灵活的添加移除还不方便，案例代码如下： var redmove=document.getElementById("rolemove"); redmove.addEventListener('click',function(){…
JS绑定事件的三种方法(简单易懂)
m0_74577714的博客
10-15 3869
相信大家都了解过事件，但如何给元素绑定事件，如何使用呢？让我为大家介绍三种绑定事件的方法吧！以下都是用点击事件(click)来做示范。
用js代码触发dom事件的实现方案
高先生的猫
07-06 2865
背景 前端编写测试用例时，在测试界面上的一些效果时，通常都希望能够模拟一些用户操作，而模拟用户操作最主要的方式就是用代码触发指定事件。通常一些元素上会自带一些触发事件的方法，例如click、focus等，但是如果是其他的事件，例如mousedown、mouseup、mouseenter，这些事件怎么模拟呢？ 思路 其实思路很简单，web标准中定义了一系列API接口，其中dispatchEvent允许我们向一个指定的事件目标派发一个事件，而且使用这个方法触发的事件是可以正常触发我们的标准事件处理规.
【自学javascript笔记】DOM对象获取元素以及Date()对象的应用——单击按钮显示时间
qq_51843898的博客
01-24 1181
我们在学习了html与CSS之后一定会产生这样的疑问：我们在平时上网过程中常见的交互效果，比如说“单击按钮显示内容”，这个是怎么做出来的呢？今天我们就来探讨一下，如何实现事件的触发。以上便是如何用js实现一些用户交互事件的方法，主要讲述了什么是事件的三要素，如何获取事件对象（重要），以及如何定义事件执行程序，并给出了应用模版。
js按钮点击事件，调用方法
asteriaV的博客
08-10 1万+
<html> <head> <title>usually function</title> </head> <script> function load(){ //下面两种方法效果是一样的 document.getElementById("target").onclick(); document.getElementById("target").click(); } function test(){ .
js事件绑定的几种方式
子玉的博客
10-29 848
每种方式都有其适用的场景和特点，根据具体情况选择合适的方式来绑定事件。这里使用了 jQuery 的 `$` 函数选择按钮，并使用 `click()` 方法将一个匿名函数作为点击事件的处理函数。这里的 `addEventListener()` 方法将一个匿名函数作为事件处理函数添加到按钮的点击事件上。这里的 `onclick` 属性指定了一个名为 `myFunction` 的函数作为点击事件的处理函数。这里的 `onclick` 属性被赋值为一个匿名函数，该函数将成为按钮的点击事件处理函数。
multidict-6.0.2-cp39-cp39-win_amd64.whl
最新发布
10-13
multidict-6.0.2-cp39-cp39-win_amd64.whl
JavaScript DOM事件详解与应用
JavaScript DOM事件是Web开发中的关键概念，它允许我们对用户交互做出响应。在DOM（文档对象模型）中，事件是指用户或浏览器执行的任何动作，如点击按钮、滚动页面等。 第1章 事件流：事件流描述了事件在DOM树中的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值