javaScript的基础事件学习

最新推荐文章于 2024-04-26 16:38:18 发布

ReverieZH

最新推荐文章于 2024-04-26 16:38:18 发布

阅读量131

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/weixin_44035017/article/details/103102716

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

js的事件机制：当行为动作满足了一定的条件后，会触发某类事务的执行。
js的事件机制常于函数一块进行使用

一个HTML元素可以添加多个不同的事件。
一个事件可以监听触发多个函数的执行,但是不同的函数要使用分号间隔

点击事件

单击事件

当鼠标单击的时候会触发
在HTML标签中的属性中添加onclick属性

function testOnclick(){
		alert("单击");
}
<input type="button" name="" id="" value="测试单击" onclick="testOnclick();" />

双击事件

当鼠标双击的时候会被触发
在HTML标签中的属性中添加ondblclick属性

function testOnDbclick(){
		alert("双击");
}
<input type="button" name="" id="" value="测试双击" onclick="testOnDbclick();" />

鼠标事件

onmouseover

当鼠标悬停在某个HTMl元素上方时触发

function testOnmouseover(){
	alert("鼠标悬停事件");
}
<div style=" border: solid 1px;" onmouseover="testOnmouseover();" >

onmousemove

当鼠标在某个HTMl元素移动时触发

function testOnmousemove(){
		alert("移动");
}
<div style=" border: solid 1px;" onmousemove="testOnmousemove();" >

onmouseout

当鼠标在某个HTML元素上移出的时候触发


function testOnmouseout(){
		alert("移出");
}
<div style=" border: solid 1px;" onmouseout="testOnmouseout();" >

键盘事件

onkeyup

当键盘在某个HTML元素上弹起的时候触发

function testOnkeyup(){
		alert("键盘弹起");
}


<input type="text" name="" id="" value="" onkeyup="testOnkeyup();"/>

onkeydown

function testOnkeydown(){
    alert("键盘按下");
    }


<input type="text" name="" id="" value="" onkeydown="testOnkeydown()"/>

焦点事件

onfocus

当某个HTML元素获取焦点的时候触发

function testOnfocus(){
    document.getElementByname("div").innerHTML="焦点获取";
}

<input type="text" name="" id="" value="" onfocus="testOnfocus();"/>

onblur


function testOnblur(){
	alert("失去焦点");
}

<input type="text" name="" id="" value=""  onblur="testOnblur();"/>

页面加载事件

onload 当页面加载成功后触发。

<html>
	<head>
		<meta charset="UTF-8"/>
		<script type="text/javascript">
					function testOnload(){
						alert("页面");
					}
		</script>
	</head>
	<body onload="testOnload()">
	   <h1>页面</h1>
	</body>
</html>

是先出现页面内容，再调用函数

给合适的HTML标签添加合适的事件
onchange----select下拉框
onload------body标签
单双击-------用户会进行点击动作的HTML元素
鼠标事件------用户会进行鼠标移动操作的。
键盘事件------用户会进行键盘操作的HTML元素。

超链接调用函数

调用js函数

<html>
	<head>
		<meta charset="UTF-8"/>
		<script type="text/javascript">
				function testHref(){
					alert("超链接调用");
				}	
		</script>
	</head>
	<body>
			<a href="javascript:testHref()">调用js函数</a>
	</body>
</html>

事件冲突

给HTML元素添加多个事件时，注意事件之间的冲突
如单击和双击
当事件的触发条件包含相同部分的时候，会产生事件之间的冲突。

事件的阻断

当事件所监听的函数的返回值返回给事件时：
					false：则会阻断当前事件所在的HTML标签的功能
					true:则继续执行当前事件所在的HTML标签的功能

<html>
	<head>
		<meta charset="UTF-8"/>
		<script type="text/javascript">
				function testA(){
					alert("事件的阻断");
					return false;
				}
		</script>
	</head>
	<body>
			<a href="http://www.baidu.com" target="_blank" onclick="return testA()">百度一下</a>
	</body>
</html>

如上述例子，就无法实现打开百度网页的功能，因为事件返回了false
事件的阻断常用于表单的提交，如果表单里有一项不符合要求，用户就无法提交数据

ReverieZH

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javaScript的基础事件学习

js的事件机制：当行为动作满足了一定的条件后，会触发某类事务的执行。js的事件机制常于函数一块进行使用一个HTML元素可以添加多个不同的事件。一个事件可以监听触发多个函数的执行,但是不同的函数要使用分号间隔点击事件单击事件当鼠标单击的时候会触发在HTML标签中的属性中添加onclick属性function testOnclick(){ alert("单击");}<in...
复制链接

扫一扫

专栏目录