DOM事件绑定

最新推荐文章于 2022-01-21 10:34:23 发布
最新推荐文章于 2022-01-21 10:34:23 发布
阅读量66 收藏
点赞数
分类专栏： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mango_glass/article/details/116146377
版权

DOM事件绑定

DOM 0级别事件绑定
DOM 0级别：DOM最早版本的事件绑定方式，被所有浏览器兼容

  • HTML绑定
<body>
	<input type="button" id="btn" value="click me" onclick="show()" />
	<script type="text/javascript">
		function show(){
			console.log("aaa");
		}
	</script>
</body>
  • JS绑定
    JS绑定事件时，函数名后不能加()，否则会在页面加载时立即执行。
<body>
	<input type="button" id="btn" value="click me" />
	<script type="text/javascript">
		document.getElementById("btn").onclick=show;
		function show(){
			console.log("aaa");
		}
	</script>
</body>

JS绑定事件时也可绑定匿名函数

<body>
	<input type="button" id="btn" value="click me" />
	<script type="text/javascript">
		document.getElementById("btn").onclick=function(){
			console.log("aaa");
		}
	</script>
</body>

DOM 2级别事件绑定
DOM 2级别：添加了两个监听方法来添加和移除事件处理程序

  • addEventListener()----------添加事件
<body>
	<input type="button" id="btn" value="click me" />
	<script type="text/javascript">
		document.getElementById("btn").addEventListener('click',show);
		function show(){
			console.log("aaa");
		}
	</script>
</body>

'click’为事件名，不加on。show为函数名，不加引号和括号().
可以绑定匿名函数

<body>
	<input type="button" id="btn" value="click me" />
	<script type="text/javascript">
		document.getElementById("btn").addEventListener('click',function(){
			console.log("aaa");
		});
	</script>	
</body>
  • removeEventListener()----------移除事件
    无法移除匿名添加的函数
<body>
	<input type="button" id="btn" value="添加" />
	<script type="text/javascript">
		document.getElementById("btn").addEventListener("click",show);
		document.getElementById("btn").removeEventListener('click',show);
		function show(){
			console.log("aaa");
		}
	</script>
</body>

无法移除DOM 0级别事件绑定

<body>
	<input type="button" id="btn" value="添加" onclick="show()"/>
	<script type="text/javascript">
		//document.getElementById("btn").οnclick=show;
		document.getElementById("btn").removeEventListener('click',show);
		function show(){
			console.log("aaa");
		}
	</script>
</body>

DOM 0级别事件和DOM 2级别事件区别
DOM 0级别事件绑定多个函数，前面绑定的函数会被后面的覆盖
DOM 2级别事件可以绑定多个函数，按顺序执行

<body>
		<input type="button" id="btn" value="添加" />
		<script type="text/javascript">
			document.getElementById("btn").onclick=function(){
				console.log(1);
			}
			document.getElementById("btn").onclick=function(){
				console.log(2);
			}
			document.getElementById("btn").onclick=function(){
				console.log(3);
			}
		</script>
</body>

在这里插入图片描述

<body>
		<input type="button" id="btn" value="添加" />
		<script type="text/javascript">
			document.getElementById("btn").addEventListener('click',function(){
				console.log(1);
			})
			document.getElementById("btn").addEventListener('click',function(){
				console.log(2);
			})
			document.getElementById("btn").addEventListener('click',function(){
				console.log(3);
			})
		</script>
</body>

在这里插入图片描述
DOM 0级事件与DOM 2级事件互不影响

<body>
	<input type="button" id="btn" value="添加" />
	<script type="text/javascript">
		document.getElementById("btn").addEventListener('click',function(){
			console.log(1);
		})
		document.getElementById("btn").onclick=function(){
			console.log(1);
		}
	</script>
</body>

在这里插入图片描述

事件传参
用JS绑定传参将无法成功，因为加了括号会直接执行，但可以利用匿名函数

<body>
	<input type="button" id="btn" value="添加" />
	<script type="text/javascript">
		document.getElementById("btn").onclick=function(){
			foo('hello');
		}
		function foo(x){
			console.log(x);
		}
	</script>
</body>

可以使用行内绑定（HTML绑定），注意要加引号

<body>
	<input type="button" id="btn" value="添加" onclick="foo(1)"/>
	<script type="text/javascript">
		function foo(x){
			console.log(x);
		}
	</script>
</body>

event.target会返回触发该事件的目标元素

<body>
	<input type="button" id="btn" value="1" onclick="foo()"/>
	<script type="text/javascript">
		function foo(){
			console.log(event.target.value);
		}
	</script>
</body>

在这里插入图片描述
行内调用时函数传入this，this代表该元素本身

<body>
	<input type="button" id="btn" value="1" onclick="foo(this)"/>
	<script type="text/javascript">
		function foo(x){
			console.log(x.value);
		}
	</script>
</body>

在这里插入图片描述

常用事件
在这里插入图片描述
event.code可判断按下的按键
event.clientX 返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。
event.clientY 返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的垂直坐标。

mango_glass
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript Dom 事件绑定与处理
猿码互联
05-12 437
JavaScript中的DOM事件是在HTML元素上发生的特定动作或事件。事件可以是鼠标点击、键盘按下、窗口调整大小等。JavaScript提供了一系列的方法来处理或绑定这些事件。
DOM 事件绑定
2401_82968855的博客
06-22 615
事实上 DOM 0级事件并不是标准中的，在 W3C 制定 DOM 标准前，部分浏览器已经有了 DOM 模型，也有自己相应的事件，这些出现在标准第一个版本之前的，就被称为了 DOM 0。这 4 级内容中， 没有提供事件相关的内容，所以不会拿来讨论，因此 DOM 事件就被分为了常说的 DOM 0级事件、DOM 2级事件、DOM 3级事件。使用 removeEventListener 去除事件，需要传递指定的事件，且事件处理器必须与绑定事件传入的一样，为同一个。
DOM事件对象
沉梦昂志
07-12 193
绑定事件的两种方式/DOM事件的级别 我们在之前的一篇文章《04-JavaScript/22-DOM简介和DOM操作》中已经讲过事件的概念。这里讲一下绑定（注册）事件的两种方式，我们以onclick事件为例。 DOM0的写法：onclick element.onclick = function () { } 举例： <body> <button>点我</button> <script> var btn = document.getE
DOM事件相关总结
前端程序猿的博客
01-21 515
DOM事件相关总结 DOM事件模型和事件流 DOM事件捕获的具体流程 事件代理(事件委托) Event对象常见的应用
JQuery中DOM事件绑定用法详解
10-24
主要介绍了JQuery中DOM事件绑定用法,实例分析了bind方法绑定事件的相关技巧,需要的朋友可以参考下
js中DOM事件绑定分析
10-18
在这篇文章中小编给大家整理了关于JS中DOM事件绑定的相关知识点，有兴趣的朋友赶快学习参考下。
Virtual-dom-event-binding-issue:尝试使虚拟 dom 事件绑定工作
07-01
但在虚拟DOM中，由于元素并未真正存在于DOM中，所以我们不能直接绑定事件。我们需要找到一种方式让事件能够穿透虚拟DOM并到达实际DOM。 三、React中的事件处理 React是广泛使用的使用虚拟DOM的库，它提供了自己的...
048N06L-VB TO252一款N-Channel沟道TO252的MOSFET晶体管参数介绍与应用说明
07-08
048N06L-VB TO252；Package：TO252；Configuration：Single-N-Channel；VDS：60V；VGS：20（±V）；Vth：3V；RDS(ON)=12mΩ@VGS=4.5V；RDS(ON)=4.5mΩ@VGS=10V；ID：97A；Technology：Trench；
基于阵列响应向量估计的宽容体积阵波束形成-洪常委.pdf
07-08
基于阵列响应向量估计的宽容体积阵波束形成-洪常委.pdf
nginx部署教程，介绍文档nginx部署教程，介绍文档
07-08
部署 Nginx（发音为"engine-x"）是一种流行的 Web 服务器和反向代理服务器，它可以处理静态内容、负载均衡、HTTP缓存以及作为反向代理来优化和加速网站。以下是一个简单的 Nginx 部署教程，适用于基本的安装和配置： ### 1. 安装 Nginx #### 在 Ubuntu 上安装 ```bash sudo apt update sudo apt install nginx ``` #### 在 CentOS/RHEL 上安装 ```bash sudo yum install epel-release sudo yum install nginx ``` ### 2. 启动和管理 Nginx 服务 安装完成后，可以使用以下命令来启动、停止和重新加载 Nginx： - 启动 Nginx 服务： ```bash sudo systemctl start nginx ``` - 停止 Nginx 服务： ```bash sudo systemctl stop nginx ``` - 重新加载 Nginx 配置（不中断现有连接）： ```bash s
python实现深度学习模型.docx
07-07
使用 TensorFlow 或 PyTorch 实现深度学习模型是当前在人工智能领域中非常流行的应用之一。这两个框架都提供了丰富的工具和接口，使得开发者可以轻松地构建、训练和部署各种类型的深度学习模型。下面我将分别介绍 TensorFlow 和 PyTorch 在实现深度学习模型方面的一些常见用法和案例： TensorFlow TensorFlow 是由 Google 开发的开源深度学习框架，具有以下特点： 静态计算图和动态计算图：TensorFlow 1.x 使用静态计算图，而 TensorFlow 2.x 默认使用动态计算图（Eager Execution），更加易于使用和调试。
hbdk-3.49.10-cp38-cp38-linux-x86-64.whl
07-08
hbdk-3.49.10-cp38-cp38-linux-x86-64.whl
西门子数字化家具生产与管理一体化解决方案.pdf
07-08
西门子数字化家具生产与管理一体化解决方案.pdf
深度学习教程&案例&相关项目
07-08
项目总结 本文详细介绍了深度学习的基本概念、实现了手写数字识别的案例，并提供了一个完整的图像分类器项目。项目分为以下几个步骤： 1. **数据准备**：下载并预处理数据集。 2. **构建神经网络**：定义卷积神经网络模型。 3. **训练模型**：使用训练数据训练模型。 4. **测试模型**：使用测试数据评估模型性能。 5. **部署模型**：将训练好的模型部署到Web应用中，用户可以上传图片进行分类。 通过这个项目，读者可以掌握深度学习的基本原理和实践方法，并了解如何使用PyTorch进行神经网络的构建和训练，以及如何将模型部署到实际应用中。这对于学习深度学习和提升机器学习技能非常有帮助。希望本文能为读者提供有价值的参考，提升其深度学习开发能力。
太原市建筑物矢量数据（Shp格式+带高度）.txt
最新发布
07-08
因文件较多，数据存放网盘，txt文件内包含下载链接及提取码，永久有效。失效会第一时间进行补充。
基于3D的人脸识别算法解决方案
07-08
基于3D的人脸识别算法解决方案
048N06L-VB一款N-Channel沟道TO263的MOSFET晶体管参数介绍与应用说明
07-08
048N06L-VB；Package：TO263；Configuration：Single-N-Channel；VDS：60V；VGS：20（±V）；Vth：3V；RDS(ON)=4mΩ@VGS=10V；ID：150A；Technology：Trench；
声矢量阵导向最小方差波束形成算法研究.pdf
07-08
声矢量阵导向最小方差波束形成算法研究.pdf
js中DOM事件绑定分析.docx
01-21
"本文档主要分析JavaScript中的DOM事件绑定，包括内联模型、脚本模型以及DOM2级事件模型，详细列举了各种常见的DOM事件，并介绍了DOM2级事件中`addEventListener()`和`removeEventListener()`方法的使用。...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值