JavaScript——JS事件

最新推荐文章于 2022-04-10 18:49:11 发布

能跑就好

最新推荐文章于 2022-04-10 18:49:11 发布

阅读量106

点赞数

分类专栏：学习之路文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46848251/article/details/119222409

版权

学习之路专栏收录该内容

24 篇文章 1 订阅

订阅专栏

JS事件
通常鼠标或热键的动作称为”事件“
点击、表单提交等等页面特效通过JS事件完成

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            function run(){
                location.href = "http://www.baidu.com";
            }
        </script>
    </head>
    <body>
        <input type="button" value="跳转百度" onclick="run()" />
    </body>
</html>

JS事件驱动机制简述
页面上的特效，是在JS事件驱动机制下进行。
JS事件驱动机制：
例如：警察抓小偷
事件源：小偷
事件：偷东西
监听器：警察
注册/绑定监听器：让警察时刻盯着小偷

事件源：专门产生事件的组件
事件：事件源产生的动作或事情
监听器：处理事件源所产生的事件
注册/绑定监听器：让监听器时刻监听事件源是否有指定事件产生，如果事件源产生指定事件，则调用监听器处理
例如上述的代码上中
事件源：按钮
事件：点击事件 onclick
监听器：run()
注册监听器：onclick = "run()"

点击事件——onclick
获取焦点事件——onfocus

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function run(){
				location.href = "http://www.baidu.com";
			}
		</script>
	</head>
	<body>
		<!-- //点击文本框就会触发 -->
		<input type="text"  onfocus="run()" />
	</body>
</html>

失去焦点事件——onblur
//作用：例如当我们输入用户名、密码后，文本框失去焦点时，这时可以触发失去焦点事件检测用户名密码格式是否正确等
域内容改变事件——onchange

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function run(){
				alert("值改变了");
			}
		</script>
	</head>
	<body>
		<select onchange="run()">
			<option value="beijing">北京</option>
			<option value="beijing">上海</option>
		</select>
	</body>
</html>

加载完毕事件——onload
元素组件加载完毕时触发//可用于整个页面加载完毕后触发调查问卷、广告等
表单提交事件——onsubmit
用于表单的校验、控制提交
注意：该事件需要返回boolean类型的值来执行提交/组织表单数据的操作
true：提交
false：阻止

<script>function run(){
   alert("提交");
return true;
}
</script>
<form onsubmit="return run()">
<input type="text" nam="uname"/>
<br />
<input type="submit" value="提交">
</form>

键位弹起事件——onkeyup
鼠标移入事件——onmouseover
//例如鼠标移入文本框，弹出一个对话框
事件句柄绑定方式
优点：开发便捷；传参方便；可以绑定多个函数
缺点：JS和HTML代码高度糅合在一起，不利于开发维护
例如：
<input type="text" value = "点击" οnclick="run1(),run2(this),run3('22')"/>
//这里的this指的是这一句
DOM方式绑定
优点：HTML代码和JS代码完全分离
缺点：①不能传递参数。解决：通过匿名函数实现
②一个事件只能绑定一个函数。解决：匿名函数内部可以实现多个函数。

方式：
①//一次只能绑定一个函数且不能传递参数
window.οnlοad=run1;
②//匿名函数，可以绑定多个函数，可以传递参数
window.οnlοad=function(){
run1();
};

//例子
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function run1(){
				alert("hahha");
			}
			function run2(){
				alert("sss");
			}
			window.onload=function(){
					var t = document.getElementById("s1");
					t.onclick=function(){
						run1();
						run2();
					};	
			};
		</script>
	</head>
	<body>
		<!-- 为文本框s1绑定两个函数run1()和run2()-->
		<input type="text" id="s1"/>
	</body>
</html>

能跑就好

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript——JS事件

JS事件通常鼠标或热键的动作称为”事件“点击、表单提交等等页面特效通过JS事件完成<html> <head> <meta charset="utf-8"> <title></title> <script> function run(){ location.href = "http://www.baidu.com";...
复制链接

扫一扫