js 事件机制1

神奇大叔

已于 2022-01-26 14:32:59 修改

阅读量192

点赞数

分类专栏： javaScript 文章标签： javaScript

于 2019-10-31 22:03:29 首次发布

本文链接：https://blog.csdn.net/weixin_43294560/article/details/102846865

版权

javaScript 专栏收录该内容

127 篇文章 6 订阅

订阅专栏

方法1:在html标签中通过添加属性实现
方法2:通过document对象来添加

一个标签可以放多个事件
一个事件可以放多个触发操作
	 onclick="testOnclick();test()"
	
	**获取光标**
		dom对象.focus()

	**单双击事件**
		单击
			onclick="操作"
		双击
			ondblclick="操作"
			
	**鼠标事件**
	除了onmouseenter和onmouseleave不冒泡，其他为冒泡
		鼠标移动事件
			onmousemove="操作"
		鼠标悬停事件
			onmouseover="操作"
		鼠标移出事件
			onmouseout="操作"
		鼠标移进事件(不冒泡)
			onmouseenter="操作"
		鼠标移出事件(不冒泡)
			onmouseleave="操作"
		鼠标按下事件
			onmousedown="操作"
		鼠标抬起事件
			onmouseup="操作"


	**键盘事件**
		键盘弹起事件(冒泡)
			onkeyup="操作"  当按键弹起时触发
		键盘下压事件(冒泡)
			onkeydown="操作"  当按键下压时触发，按下会一直触发，不区分大小写
		键盘下压事件(冒泡)
			onkeypress="操作"  当按下除功能键外的按键触发，按下会一直触发，区分大小写


	**焦点事件(即光标)**
		获取焦点(不支持冒泡)
			onfocus="操作"
		失去焦点(不支持冒泡)
			onblur="操作"  光标消失时触发
			
		支持冒泡的焦点事件
			onfocusin		
			onfocusout		
		
		
	**页面加载事件**
		onload="操作"  放在body标签里,会在页面加载成功后触发事件
					     在js代码域中调用，会在页面还未加载时触发事件
					     
		onerror="操作"
			页面加载失败时执行 
	
	**改变事件**
		onchange="操作"
		当搭配输入文本框时，改变数据只有当焦点失去时才触发，不合适
		搭配下拉框，随着选项的改变而触发
		
	**状态改变事件**
		onreadystatechange="操作"
		当状态改变时执行
	
	**加载domtree完成后事件**
		.addEventListener("DOMContentLoaded",函数)
		加载domtree时候执行,优先于onload事件
	
	"样式/视口大小改变事件"
		.onresize="操作"
		当样式尺寸改变时执行
	
	**滚动条改变事件**
		.onscroll="操作"
		滚动条改变时执行
	
	**鼠标滑轮事件**
		非火狐     .onmousewheel="操作"
		火狐		.addEventListener("DOMMouseScroll",函数,false);
	
	**表单提交事件**
		在form表单设置onsubmit();
		当使用input标签,且type=‘submit’时,触发

	**在div区域上右键单击触发事件**
		.oncontextmenu='操作'
		
	**图片加载完成事件**
		img对象.onLoad=回调
		vue:@load

代码示例:

<html >
	<head >
		<title >js 事件机制1</title>
		<meta charset="utf-8" />
		<script type="text/javascript">
			
			/*单机事件*/
			function testOnclick(){
				alert("单机事件");
			}
			
			function testDblclick()
			{
				alert("双击事件");
			}
		
			/*鼠标事件*/
			function testOnmouseover(){
				alert("鼠标悬停事件");
			}
			
			function testOnmousemove(){
				alert("鼠标移动事件");
			}
			
			function testOnmouseout(){
				alert("鼠标移出事件")
			}
			function testOnmouseenter(){
				alert("鼠标移进事件")
			}
			
			/*键盘事件*/
			function testOnkeyup()
			{
				alert("键盘弹起事件");
			}
			
			function  testOnkeydown()
			{
				alert("键盘下压事件");
			}
			/*焦点事件*/
			function testOnfocus()
			{
				alert("获取焦点");
			}
			
			function testOnblur(){
				alert("失去焦点");
			}
			/*页面加载事件*/
			function testOnload()
			{
				alert("页面加载");
			}
			testOnload();
			
			/*测试*/
			function test()
			{
				alert("测试");
			}
			/*改变事件*/
			function t1()
			{
				alert("改变1");
			}
			
		</script>
		
		<style type="text/css">
			#showdiv{
				width:300px;
				height:300px;
				border:solid 1px red;
				
			}
		</style>
	</head>
	<body onload="testOnload()" >
		<input type="button" value="测试单击" onclick="testOnclick();test()" />
		<input type="button" value="测试双击" ondblclick="testDblclick()" />
		
		<div id="showdiv" onmouseover="testOnmouseover()" onmousemove="testOnmousemove()" onmouseout="testOnmouseout()" onmouseenter="testOnmouseenter()" >
			
			
		</div>
		<input type="text" name="" id="" onkeyup="testOnkeyup()" />
		<input	type="text" onkeydown="testOnkeydown()"/>
		<br />
		<input type="text" onfocus="testOnfocus()" />
		<input type="text" onblur="testOnblur()" />

		<select name="" id="" onchange="t1()">
			<option value="">北京</option>
			<option value="">上海</option>
			<option value="">广州</option>
		</select>
	</body>
</html>

神奇大叔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 事件机制1

方法1:在html标签中通过添加属性实现方法2:通过document对象来添加一个标签可以放多个事件一个事件可以放多个触发操作 onclick="testOnclick();test()" **单双击事件** 单击 onclick="操作" 双击 ondblclick="操作" **鼠标事件** 鼠标悬停事件 onmouseover="操作"...
复制链接

扫一扫

专栏目录