Javascript添加事件的三种方式

最新推荐文章于 2023-01-10 12:53:21 发布
最新推荐文章于 2023-01-10 12:53:21 发布
阅读量454 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Happy_syy/article/details/102764177
版权

1.Event 对象
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态，常用事件如下：
在这里插入图片描述
HTML添加事件的方式：
1.第一种方式：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8"/>
		<title>使用JavaScript给HTML元素分配事件</title>
	</head>
	<body>
		<input type="button" value="按钮" style="background:red;" οnmοuseοver="over()" οnmοuseοut="out()"/>
	   //onmouseover表示鼠标被移到某元素之上
       //onmouseout表示鼠标从某元素移开
		<script>
			var inputElement = document.getElementsByTagName("input")[0];    //详见注释1
			function over(){
				inputElement.style.backgroundColor='yellow';
			};
			function out(){
				inputElement.style.backgroundColor='red';
			};
		</script>
	</body>
</html>

代码2：

注释1

var inputElement = document.getElementsByTagName("input")[0];

document表示代表整个HTML对象，是上面的所有代码。因为input是标签名字，所以用getElementsByTagName(“input”) ；得到的是整个代码中所有input标签中的的内容。如果整个代码中含有多个input标签，那就得到的是一个数组 ，所以在最后添加[0],表示得到的是第一个input标签的内容

第二种方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8"/>
		<title>使用JavaScript给HTML元素分配事件</title>
	</head>
	<body>
		<input type="button" value="按钮" style="background:red;"/>   //在按钮类型上显示值“按钮”
		<script>
			var inputElement = document.getElementsByTagName("input")[0];   
			inputElement.onmouseover = function(){     //onmouseover表示鼠标被移到某元素之上，颜色就会变成黄色
				this.style.backgroundColor='yellow';
			};
			inputElement.onmouseout = function(){
				this.style.backgroundColor='red';    //onmouseout表示鼠标从某元素移开，颜色就是红色
			};
		</script>
	</body>
</html>

第三种方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>使用JavaScript给HTML元素分配事件</title>
	</head>
	<body>
		<input type="button" value="按钮" style="background:red;" />
		<script>
			var inputElement = document.getElementsByTagName("input")[0];
			inputElement.addEventListener("mouseover", function() {
				this.style.backgroundColor = 'yellow';
			})

			inputElement.addEventListener("mouseout", function() {
				this.style.backgroundColor = 'red';
			})
		</script>
	</body>
</html>

运行结果
鼠标不在按钮上
在这里插入图片描述
鼠标在按钮上
在这里插入图片描述

Happy_syy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript 事件用法知多少，告诉你三种实用的添加事件方法
weixin_45788388的博客
05-08 624
JavaScript中的事件一般发生在人机交互上。比如，点击一个按钮、滚动一下鼠标等等，都属于事件。 在HTML中的事件，通常有三种方式添加事件。
Javascript中添加事件（Event对象）的三种方式
Liuxiaoyang1999的博客
10-27 7107
目录 一、Javascript中event对象 二、Javascript中添加事件的三种方式 （1）通过在标签中为对应事件添加设定值来添加事件 （2）通过元素（Element）事件属性添加事件 （3）通过元素（Element）事件监听器添加事件 一、Javascript中event对象 参考资料：JS Event对象详解 Event 对象代表事件的状态，比如事件在其中发生的...
JavaScript添加事件的三种方法
ANFO的博客
10-22 5069
一.事件 Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态，常用事件如下： 事件 触发时机 onchange 用户改变域的内容 onclick 鼠标点击某个对象 onkeydown 某个键盘的键被按下时触发 onload 某个页面或图像被完成“加载” onsubmit 提交按钮被点击 ...
JS中事件的添加
Dear_Mr的博客
10-30 4069
在JS中，事件的添加主要有三种方式： 1. 直接在html标签上添加 <div onclick="代码段或者是函数">div</div> 这种方法也可以通过JS的obj.setAttribute("onclick", function(){........}完成2. 使用JS的DOM的方法添加 document.getElementById('div').onclick = function
JavaScript/JS如何给元素对象添加事件
liaowenxiong的博客
09-05 932
使用普通的 js 代码给元素对象添加事件 绑定事件，添加事件处理程序： var obj = document.getElementById("name"); obj.onclick = f1; function f1(){ alert("hello!"); } 说明：函数名 f1 就是一个引用数据类型的变量，指向一个函数对象。 使用 jquery 给元素对象添加事件 给 div 元素绑定 mouseenter 事件，并注册监听器（即函数）。 $(function () { // 给 div 元素绑定 m
JavaScript原生事件绑定的3种方式
人无远虑,必有近忧.
03-24 176
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js原生事件绑定</title> </head> <body> <button id="btn01">按钮1</button> <button id="btn02">按钮2</button>
javascript 动态添加事件代码
10-30
在JavaScript中，动态添加事件是常见的需求，但因为不同浏览器之间的兼容性问题，需要采用不同的方法来实现。以下是关于如何在JavaScript中动态添加事件的详细讲解： 1. **setAttribute方法**： `setAttribute` 是...
JavaScript DOM 添加事件
10-30
是我在给库中添加事件的时候写的添加事件的方法！这个方法实现了跨浏览器之间的方法！
javascript中为某个元素指定事件的三种方式
10-25
在JavaScript中，为某个元素指定事件是常见的交互设计方式，主要分为三种方法：使用`onclick`属性、在JavaScript中设置`onclick`属性以及使用`addEventListener`方法。这三种方法各有特点，下面将详细阐述它们的用法...
JavaScript动态添加事件之事件委托
10-21
动态添加事件实质就是指js中的事件委托。本文给大家介绍JavaScript动态添加事件之事件委托的相关知识，非常不错，具有参考借鉴价值，感兴趣的朋友一起看下吧
JavaScript实现添加及删除事件的方法小结
10-23
主要介绍了JavaScript实现添加及删除事件的方法,实例总结了javascript对事件的添加及删除的技巧,涉及javascript事件绑定的方法及浏览器兼容的相关注意事项,需要的朋友可以参考下
js动态添加点击事件的两种方法
h0713的博客
07-25 2万+
js动态添加点击事件或其他事件（这里以点击事件为例） 第一种：加载 js文件时自动添加，这种方法可以免去html元素内的onclick等属性一长串的字符，也方便一些像我这样初级的查看源代码时找不着北； 但缺点是只能在页面启动时加载一次（不知道这样表述准不准确，反正我能懂就好了），想要灵活的添加移除还不方便，案例代码如下： var redmove=document.getElementById("rolemove"); redmove.addEventListener('click',function(){…
js中添加事件的方法
Rockandrollman的博客
01-10 1337
常见的方法有3种，如上方代码所示，选取适合的方式使用即可。js中添加事件的方法。
用JS 对对象添加事件
weixin_33752045的博客
07-19 96
第一种情况： IE7和FIRFOX有效 var td =  document.getElementById("td");     td.onclick = function test()   {       alert('');   }  var td =  document.getElementById("td");td.onclick = function test(){ alert('')...
JavaScript中事件的添加方式-
weixin_51847874的博客
02-04 499
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #box {
JavaScript中添加事件的三种方法
qiangzhogshou的博客
11-27 381
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态 第一种，在标签中直接添加设置 <script> var b=function(){ console.log(1111111); } function a(){ document.getElementById("pi").innerHTML="pipi"; }//获取标签...
JavaScript 添加事件绑定的三种方法
Mark
08-13 1195
1、使用html进行事件绑定 1.1、直接在 html 标签上写入事件类型和事件处理方法。 <button onclick = "alert('hello world')">click me!</button> 1.2、在 html 标签上写入事件类型，在 js 上写事件处理方法。 html部分 <button onclick = "sayHello()">click me!</button> js部分 function sayHello(
JS中为一个对象添加事件
weixin_34009794的博客
11-24 300
例如：在js中，为一个button添加onclick事件可以这样写： button.onclick=ClickEvent; ClickEvent是一个函数。这样在ClickEvent没有参数的时候是可以的，但在ClickEvent需要一个参数的时候，就不行了。这时可以这样添加： button.attachEvent("onclick",function(){ClickEv...
JavaScript添加事件的三种方式（鼠标点击事件）
热门推荐
Cao_Mary的博客
05-08 2万+
布局html页面，放入一个button按钮即可。 <button id="btn">我是按钮</button> 获取button按钮 var oBtn = document.getElementById("btn"); 点击按钮的三种方式 方式一：给对象的属性赋值 注意点：由于是将函数（function）赋值给了一个对象（oBtn）的属性（onclick），所以后赋值的...
如何在JavaScript中添加事件监听器
最新发布
05-15
在JavaScript中，可以使用 `addEventListener` 方法来添加事件监听器，该方法接受三个参数：要监听的事件类型、触发事件时要执行的函数和一个布尔值，用于指定事件是否在捕获或冒泡阶段进行处理。例如： ```...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值