JavaScript 4 常见的JavaScript事件

最新推荐文章于 2024-02-16 17:42:45 发布
最新推荐文章于 2024-02-16 17:42:45 发布
阅读量89 收藏
点赞数
文章标签： javascript css html js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/blake2/article/details/114704432
版权

1.常见的javascript事件，事件的具体使用方法

    1.页面初始化事件--onload

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function  testOnload(){
				alert("页面初始化事件");
			}
		</script>
	</head>
	<body  onload="testOnload();">
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			//通过window对象调用onload事件
			window.onload=function(){
				alert("页面初始化事件");
			}
		</script>
	</head>
	<body>
	</body>
</html>

     2.按钮点击事件 onclick

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function  testClick(){
				alert("按钮点击事件");
			}
		</script>
	</head>
	<body>
		<input type="button" value="测试按钮点击事件" onclick="testClick();"/>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onload=function(){
				var  but1=document.getElementById("but1");//object HTMLInputElement
				but1.onclick=function(){
					alert("按钮点击事件2");
				}
			}
			
		</script>
	</head>
	<body>
		<input id="but1" type="button" value="测试按钮点击事件2" />
	</body>
</html>

     3.onchange 事件，当用户改变输入字段的内容时触发

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function  testonchange(){
				alert("输入内容被改变是触发");
			}
		</script>
	</head>
	<body>
		<input type="text"  value="hello" onchange="testonchange();" />
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onload=function(){
				var text1=document.getElementById("text1");
				text1.onchange=function(){
					alert("输入内容被改变是触发2");
				}
			}
		</script>
	</head>
	<body>
		<input id="text1" type="text"  value="hello"  />
	</body>
</html>

     4.聚焦--onfocus 和失焦--onblur事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>4.聚焦事件和失焦事件</title>
		<script>
			window.onload=function(){
				var text1=document.getElementById("text1");
				//onfocus当获得焦点时触发
				text1.onfocus=function(){
					text1.value="";
				};
				//onblur当失去焦点时触发
				text1.onblur=function(){
					var phone=text1.value;
					var reg1=new RegExp(/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/);
					var res=reg1.test(phone);
					if(res){
						alert("手机号码合法");
					}else{
						alert("手机号码不合法");
					}
				}
			}
		</script>
	</head>
	<body>
		<input id="text1" type="text"  value="请输入手机号码"/>
	</body>
</html>

     5.onmouseover 和 onmouseout 事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onload=function(){
				var img1=document.getElementById("img1");
				img1.onmouseover=function(){
					img1.style.width="250px";
					img1.style.height="250px";
				}
				img1.onmouseout=function(){
					img1.style.width="150px";
					img1.style.height="150px";
				}
			}
		</script>
	</head>
	<body>
		<img id="img1" src="imgs/avatar.png" />
	</body>
</html>

     6.onsubmit 事件会在表单中的确认按钮【submit】被点击时发生。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			//1.普通按钮type="button",无法触发表单提交事件onsubmit
			//2.onsubmit事件对应的处理函数一定要有返回值【boolean】
			//true---提交表单数据
			//false---不提交表单数据
			//3.表单的onsubmit="return 处理函数";
			function  testOnsubmit(){
				var text1=document.getElementById("text1");
				var pass1=document.getElementById("pass1");
				var span1=document.getElementById("span1");
				var username=text1.value;
				var password=pass1.value;
				if(username=="zhangsan" && password=="123456"){
					alert("登陆成功!");
					return true;
				}else{
					span1.innerHTML="<font color='red' size='7'>用户名密码错误!</font>";
					return false;
				}
			}
		</script>
	</head>
	<body>
		<span id="span1"></span>
		<form action="#" method="get" onsubmit="return  testOnsubmit();">
			用户名:<input id="text1" name="username" type="text" /><br>
			密码:<input id="pass1" name="password"  type="password" /><br>
			<input type="button" value="普通按钮" /><br>
			<input type="submit" value="登陆" />
		</form>
	</body>
</html>

     7.onkeydown 事件会在用户按下一个键盘按键时发生。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			//1.testKeydown事件在调用的时候需要一个event参数
			//2.event参数的keyCode属性得到键盘按键对应的数字。
			function testKeydown(event){
				var num=event.keyCode;
				if(num==65 || num==37){
					alert("向左移动");
				}
				if(num==68 || num==39){
					alert("向右移动");
				}
				if(num==87 || num==38){
					alert("向上移动");
				}
				if(num==83 || num==40){
					alert("向下移动");
				}
				if(num==13){
					alert("暂停");
				}
			}
		</script>
	</head>
	<body onkeydown="testKeydown(event);">
	</body>
</html>

         https://www.w3school.com.cn/jsref/dom_obj_event.asp

onabort

图像的加载被中断。

onblur

元素失去焦点。

onchange

域的内容被改变。

onclick

当用户点击某个对象时调用的事件句柄。

ondblclick

当用户双击某个对象时调用的事件句柄。

onerror

在加载文档或图像时发生错误。

onfocus

元素获得焦点。

onkeydown

某个键盘按键被按下。

onkeypress

某个键盘按键被按下并松开。

onkeyup

某个键盘按键被松开。

onload

一张页面或一幅图像完成加载。

onmousedown

鼠标按钮被按下。

onmousemove

鼠标被移动。

onmouseout

鼠标从某元素移开。

onmouseover

鼠标移到某元素之上。

onmouseup

鼠标按键被松开。

onreset

重置按钮被点击。

onresize

窗口或框架被重新调整大小。

onselect

文本被选中。

onsubmit

确认按钮被点击。

onunload

用户退出页面。

创建新的 HTML 元素 

     document.createElement("元素名称");

     document.createTextNode("文本内容");

     父元素的dom对象.appendChild(node);

     删除元素 父元素的dom对象.removeChild(子元素的dom对象);

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 300px;
				height: 300px;
				background-color: red;
			}
		</style>
		<script>
			window.onload=function(){
				var addbut=document.getElementById("add");
				var deletebut=document.getElementById("delete");
				addbut.onclick=function(){
					//创建元素
					var hdom=document.createElement("h1");
					var htext=document.createTextNode("这是我添加的一个元素");
					hdom.appendChild(htext);
					var divdom=document.getElementById("div1");
					divdom.appendChild(hdom);
				}
				deletebut.onclick=function(){
					var divdom=document.getElementById("div1");
					var hdom=document.getElementById("h1");
					//删除元素
					divdom.removeChild(hdom);
				}
			}
		</script>
	</head>
	<body>
		<div id="div1">
			<h1 id="h1">测试添加和移除元素</h1>
		</div>
		<input id="add" type="button" value="添加元素"><br>
		<input id="delete" type="button" value="删除元素"><br>
	</body>
</html>

 

blake2
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript事件
qq_48594272的博客
12-27 313
1.事件基础 JavaScript事件是由访问Web页面的用户引|起的一系列操作。 当用户执行某些操作的时候，再去执行一系列代码。 或者用来获取事件的详细信息， 如鼠标位置、键盘按键等。 1.1事件处理函数 javaScript可以处理的事件类型为:鼠标事件、键盘事件、HTML事件 所有的事件处理函数都会都有两个部分组成，on +事件名称，函数体 2.鼠标事件 2.1 onclick用户单击鼠标按钮或按下回车键时触发 ...
JavaScript常见事件处理程序实例总结
10-17
主要介绍了JavaScript常见事件处理程序,结合实例形式总结分析了javascript HTML事件、DOM事件、IE事件等相关处理程序与操作技巧,需要的朋友可以参考下
2021-03-12——JavaScript_9
weixin_53371536的博客
03-12 102
JavaScript_9 Javascript中的dom对象 控制html元素 控制html元素的属性 控制css 控制事件 1.按钮点击事件 onclick 具体用法: <script> function 点击事件的处理函数（）{ //事件处理动作 } </script> <input type=”button” value=”按钮” onclick=”按钮点击以后的处理函数”/> 2.页面初始化事件 onload 具体用法...
javascript4 事件
sinat_41132860的博客
12-05 181
  javascript的作用是动态修改html和css代码,发生某种事件后(比如点击网页上某个按钮或者下拉框),可以触发执行一段javascript代码,事件可以用于处理表单验证，用户输入，用户行为及浏览器动作 事件:点击网页的按钮叫做事件 事件源:被点击的按钮 响应行为:几点按钮后触发执行javascript代码段,叫做响应行为 常用事件: onclick       点击html元...
JS常见的事件
weixin_44211097的博客
09-15 130
1. 点击事件： 1. onclick：单击事件 2. ondblclick：双击事件 2. 焦点事件 1. onblur：失去焦点 2. onfocus:元素获得焦点。 3. 加载事件： 1. onload：一张页面或一幅图像完成加载。 4. 鼠标事件： 1. onmousedown鼠标按钮被按下。 2. onmouseup鼠标按键被松开。 ...
JavaScript Promise 对象----2021-7-9
qq_43186285的博客
07-09 86
Promise对象有以下两个特点： 1、对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态 pending：初始状态，不是成功或失败状态 fulfilled：意味着操作成功完成 rejected：意味着操作失败 2、一旦状态改变，就不会再变 Promise对象的状态改变，就只有两种可能： 从Pending变成Resolved和从Pending变成Rejected Promise 优缺点 优点 有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数
JavaScript键盘事件常见用法实例分析
10-17
主要介绍了JavaScript键盘事件常见用法,简单描述了javascript键盘事件的分类、功能,并结合实例形式给出了javascript响应键盘事件相关使用技巧,需要的朋友可以参考下
Javascript的事件处理机制
03-01
事件(Event)是JavaScript应用跳动的心脏，也是把所有东西粘在一起的胶水。当我们与浏览器中Web页面进行某些类型的交互时，事件就发生了。...今天的事件，它已是DOM的重要组成部分，遗憾的是，IE继续保留它最早在IE4
JavaScript常见鼠标事件与用法分析
10-17
主要介绍了JavaScript常见鼠标事件与用法,结合实例形式较为详细的分析了javascript 8种常见的鼠标事件与相关使用技巧,需要的朋友可以参考下
2021-08-08Javascript对象
weixin_54436925的博客
08-08 106
Javascript对象 1.Javascript前言 任何东西都可以是对象,对象都有属性 2.Javascript对象定义 1.new关键字创建对象 var obj = new Object; obj.name = '马志强'; obj.age= 70; obj.color = 'green'; obj.eat = function (){ console.log('烤鸭'); } console.log(obj); 2.工厂类创建对象 // 创建工厂,设置好函数的形参(属性) function t
javaScript常用事件
09-19
常用javaScript事件归纳。 常用事件： 1.onclick 鼠标单击事件 通常在下列基本对象中产生： button（按钮对象） checkbox（复选框）或（检查列表框） radio （单选钮） reset buttons（重要按钮） submit buttons（提交按钮） 例如可通过下列按钮激活change()文件： <Form> <Input type="button" Value="" onClick="change()"> </Form> 2.onLoad页面加载事件：当页面加载时，自动调用函数（方法）。注意：此方法只能写在<body>标签之中！ 3.onScroll窗口滚动事件：当页面滚动时调用函数。注意：此事件写在方法的外面，且函数名（方法名）后不加括号！例：window.onscroll=move; 4.onBlur失去焦点事件：当光标离开文本框是触发调用函数。 当text对象或textarea对象以及select对象不再拥有焦点、而退到后台时，引发该文件，他与onFocas事件是一个对应的关系。 5.onFocus事件：光标进入文本框时触发调用函数。 当用户单击Text或textarea以及select对象时，产生该事件。 6.onChange事件：文本框的value值发生改变时调用函数。当利用text或textarea元素输入字符值改变时发该事件，同时当在select表格项中一个选项状态改变后也会引发该事件。例： <Form> <Input type="text" name="Test" value="Test" onCharge="check('this.test)"> </Form> 7.onSubmit事件：属于<form>表单元素，写在<form>表单标签内。语法：onSubmit=”return 函数名()” 8.onKeyDown事件：在输入框中按下键盘上的任何一个键时，都会触发事件，调用函数。注意：此事件写在方法的外面，且函数名（方法名）后不加括号！例：document.onkeydown=函数名（）。 9.setTimeout(“函数名()”,间隔时间（以毫秒为单位）)； 10.clearTimeout(对象) 清除已设置的setTimeout对象 鼠标相关事件： 1.onMouseOver：鼠标移动到某对象范围的上方时，触发事件调用函数。注意：在同一个区域之内，无论怎样移动斗志触发一次函数。 2.onMouseOut:鼠标离开某对象范围时，触发事件调用函数。 3.onMouseMove: 鼠标移动到某对象范围的上方时，触发事件调用函数。注意：在同一个区域之内，只要一动一次就出发一次事件调用一次函数。 4.onmouseup 当鼠标松开 5.onmousedown 当鼠标按下键 document对象常用的方法： 1.document.getElementById():通过id获得唯一的一个HTML元素，没有id时，通过name查找 2.document.getElementByName()：获取相同名称的一组元素。主要用于表单中的复选框 Date对象常用方法： Var a=new Date(); //创建a为一个新的时期对象 y=a.getYear(); //y的值为从对象a中获取年份值 两位数年份 y1=a.getFullYear(); //获取全年份数 四位数年份 m=a.getMonth(); //获取月份值(0-11) d=a.getDate(); //获取日期值 d1=a.getDay(); //获取当前星期值 h=a.getHours(); //获取当前小时数 m1=a.getMinutes(); //获取当前分钟数 s=a.getSeconds(); //获取当前秒钟数
Java script事件详解
yck0ng的博客
08-08 1485
10事件 10.1事件的概念 事件源： 事件名： 事件注册： 事件处理： 以火灾为例： 粤商大酒店201房间发生火灾，119电话报警，南湖区消防支队出警，赶赴现场通过喷水作业成功灭火。   事件源：粤商大酒店201房间 事件名：火灾 事件注册：实现已经规划好片区，粤商大酒店所属片区归南湖区消防支队负责 事件处理：喷水 10.2常用事件 鼠标的常用事件： （1）clic
JS学习--对象--2021-03-06
A2113438464的博客
03-12 114
JS对象 一、 创建对象1.1 通过对象直接量创建1.2 通过new创建1.3 通过Object.create()创建1.4 原型二、属性的查询和设置2.1 查询2.2 设置2.3 删除属性2.4 检测属性2.5 枚举属性三、属性getter和setter四、属性的特性五、对象方法5.1 toString()5.2 toLocaleString()5.3 valueof()方法注意点 简单来说，对象是JavaScript的基本数据类型，它是一种复合值，名：值(原始值或者其他对象)，可通过名访问这些值，可以看
JavaScript中的常用事件，以及内置对象详解
刘小爱的博客
07-06 477
学习Java的第81天笔记
onBlur事件与onfocus事件 （js）
gr_guhun的博客
10-08 1317
jQuery 参考手册 - 事件 一、jQuery的 onBlur方法 定义和用法 1、当元素失去焦点时发生 blur 事件。 2、blur() 函数触发 blur 事件，或者如果设置了 function 参数，该函数也可规定当发生 blur 事件时执行的代码。 提示：早前，blur 事件仅发生于表单元素上。在新浏览器中，该事件可用于任何元素。 触发 blur 事件 触发被选元素的 blur 事件...
JavaScript中的onblur（失去焦点）应用
最新发布
qiuqiule6的博客
02-16 2263
提示：onblur 相反事件为 onfocus 事件。ondblclick— 鼠标左键双击事件。onmouseover— 鼠标移入事件。onmouseout-- 鼠标移出事件。onmousemove— 鼠标移动事件。onmousedown— 鼠标按下事件。oninput---- 内容改变事件。onclick— 鼠标左键单击事件。onmouseup— 鼠标抬起事件。onkeydown— 键盘按下事件。onchange— 内容改变事件。onkeyup— 键盘抬起事件。onblur— 失去焦点事件。
onblur失焦事件
B000M的博客
05-27 6566
对于onblur 事件的小记 定义和用法: onblur 事件发生在对象失去焦点时。 onblur 事件最常与表单验证代码一起使用（例如，当用户离开表单字段时）。 提示： onblur 事件与 onfocus 事件相反。 提示： onblur 事件类似于 onfocusout 事件。主要区别在于 onblur 事件不会冒泡。因此，如果您想找出元素或其子元素是否失去焦点，可以使用 onfocusout 事件。但是，您可以通过使用 onblur 事件的 addEventListener() 方法的 useCap
在onclick、onblur中使用this
qq_42345237的博客
10-03 2826
像onclick、onblur这种直接写在标签中的事件，该如何使用this？ 我们一般使用this，会首先获取到相对应的dom对象，比如document.getElementById(),或者用jquery的方法$()来获取，然后进行相应的操作。 如果说咱们没有获取相应的dom对象，那么this就代表的是全局对象window。 那如果说是函数作为对象的方法调用，就会是另一个样子，咱们来看个例子： ...
html dom onblur,html的DOM中Event对象onblur事件用法实例
weixin_34649252的博客
06-15 671
html的DOM中Event对象onblur事件用法实例本文实例讲述了html的DOM中Event对象onblur事件用法。分享给大家供大家参考。具体分析如下：onblur 事件会在对象失去焦点时发生。语法如下：复制代码 代码如下:onblur="SomeJavaScriptCode"SomeJavaScriptCode 必需。规定该事件发生时执行的 JavaScript。支持该事件的 HTML ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值