JS 事件机制完整示例分析
作者：qq_42412646 时间：2024-05-03 15:58:08
本文实例讲述了JS 事件机制。分享给大家供大家参考，具体如下：
<html>
<head>
<title>js事件机制</title>
<meta charset="UTF-8"/>
<script type="text/javascript">
function testOnclick(){
alert("我是单击事件");
}
function testdblOnclick(){
alert("我是双击事件");
}
function testOnmouseover(){
alert("我是鼠标悬停事件");
}
function tsetOnmousemove(){
alert("我进行了移动");
}
function testOnmouseout(){
alert("我被移出了");
}
function testOnkeydown(){
alert("键盘按下事件");
}
function testOnkeyup(){
alert("键盘抬起事件");
}
function testOnkeypress(){
alert("键盘按压事件触发")
}
function testOnfouse(){
alert("焦点确认定位");
}
function testOnblur(){
alert("我失去了焦点");
}
function tsetOnload(){
alert("页面进行了重新加载");
}
// tsetOnload();
function testOnchange(){
alert("发生了改变");
}
function testbreak(){
alert("阻断事件触发");
}
function testbreaktrue(){
alert("阻断，我可不只是说说");
return false;
}
function testHref(){
alert("超链接提示");
}
</script>
<style type="text/css">
#showdiv{
width: 100;
height: 200;
border: solid 1px;
}
input[type=text]{
width: 300px;
height: 20px;
border: solid 2px aqua;
}
hr{
height: 10px;
background-color: bisque;
border-radius: 10px;
}
</style>
</head>
<body onload="tsetOnload();">
<h3>js事件机制</h3>
<input type="button" id="" value="测试单击" onclick="testOnclick();"/>
<input type="button" id="" value="测试双击" ondblclick="testdblOnclick();"/>
<hr />
<div id="showdiv" onmouseover="testOnmouseover();" onmousemove="tsetOnmousemove();" onmouseout="testOnmouseout();" >
</div>
<hr />
<!--下面在文本框中添加的事件触发有事件的冲突，onkeydown和onkeypress会在按下一个按键的时候触发，但是由于触发了显示框事件导致按下按钮后一直出现，而使onkeyup无法触发-->
<input type="text" id="" value="" onkeydown="testOnkeydown()" onkeyup="testOnkeyup();" onkeypress="testOnkeypress();"/>
<hr />
<!--失去焦点的时候会一直显示，因为在失去焦点操作中使显示框显示，其本来就是一个失去焦点的操作-->
<input type="text" name="" id="" value="" onfocus="testOnfouse()" onblur="testOnblur()"/>
<br />
<input type="text" name="" id="" value="" onchange="testOnchange();"/>
<br />
比较喜欢的动漫角色:<br />
<select name="" id="" onchange="testOnchange();">
<option value="">古河渚</option>
<option value="">藤和艾利欧</option>
<option value="">佐仓千代</option>
<option value="">筒隐月子</option>
</select>
<hr />
<!--<a href="http://wwww.baidu.com" rel="external nofollow" rel="external nofollow" target="_blank" onclick="testbreak();">百度一下</a>-->
<hr />
<a href="http://wwww.baidu.com" rel="external nofollow" rel="external nofollow" target="_blank" onclick="return testbreaktrue();">百度一下</a> <!-- 必须函数和调用都含有return才能进行有效的阻断-->
<hr />
<a href="javascript:testHref()" rel="external nofollow" >超链接点击</a>
</body>
</html>
事件触发机制使为了更好的实现网页与用户的交互，如果仅仅只在js代码域中定义函数，那么我们仅仅只能在代码中自己调用，用户无法触发函数，所以我们利用函数对一系列操作进行封装，在body中调用事件触发机制进行调用，这样当用户触发某个事件的时候就会触发一系列的操作。
注：在一系列的事件触发机制中，我们可以在一个标签中添加多个事件触发机制，但是我们必须在适当的地方设置，而且，对于多个事件机制其也会产生冲突，一个方面可能是因为触发机制的冲突（比如单双击）另一方面可能因为调用的函数引起的（比如焦点失去和显示框显示）
希望本文所述对大家JavaScript程序设计有所帮助。
来源：https://blog.csdn.net/qq_42412646/article/details/102847393
标签：JS,事件机制
0
投稿猜你喜欢
python opencv调用笔记本摄像头
2022-07-19 14:03:34
浅析python 中大括号中括号小括号的区分
2021-06-15 15:14:16
Python开发之pip安装及使用方法详解
2022-11-27 06:22:48
用python绘制彩色螺旋线代码
2023-04-30 15:32:18
Python中人脸图像特征提取方法(HOG、Dlib、CNN)简述
2021-09-16 21:38:59
向MySQL数据库的表中录入数据的实用方法
2008-12-17 16:24:00
浅谈Python中用datetime包进行对时间的一些操作
2022-09-27 09:32:14
python-sys.stdout作为默认函数参数的实现
2022-11-23 02:50:35
一些关于python 装饰器的个人理解
2021-11-27 21:41:33
go micro集成链路跟踪的方法和中间件原理解析
2024-04-26 17:29:59
django数据模型on_delete, db_constraint的使用详解
2023-02-16 04:48:06
支持PyTorch的einops张量操作神器用法示例详解
2023-10-17 23:13:06
php编程每天必学之表单验证
2023-07-19 05:50:59
go语言中[]*int和*[]int的具体使用
2024-05-29 22:08:38
mysql8.0.20数据目录迁移的方法
2024-01-25 04:41:18
jQuery.animate简单分析
2010-06-26 12:45:00
Spring数据库连接池实现原理深入刨析
2024-01-12 17:16:53
Python关于print的操作(倒计时、转圈显示、进度条)
2022-08-19 07:26:58
golang 数组去重,利用map的实现
2024-04-27 15:37:49
jquery弹出层背景变暗 Lee dialog
2008-08-18 13:11:00
