事件概念和事件绑定

最新推荐文章于 2022-07-15 15:56:00 发布

_水果先生

最新推荐文章于 2022-07-15 15:56:00 发布

阅读量244

点赞数

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

本文链接：https://blog.csdn.net/hcwdd/article/details/90704200

版权

JavaScript 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

事件的概念

就和数据库中的触发器一样，当操作了数据的时候回引发对应的触发器程序的执行，JS中的世间就是对用户的特定行为做出相应的响应的过程，其实就是浏览器监听到用户的特定行为时会执行对应的绑定程序。

事件的绑定

在html元素上将触发事件的行为和事件相应的程序相关联起来的过程就叫做事件的绑定
DEMO:绑定函数（一个单击事件）
html文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action="index_submit" method="post" accept-charset="utf-8">
			用户名:<input type="text" name="username"><br>
			密&nbsp;&nbsp;&nbsp;码:<input type="password" name="pwd"><br><br>
		</form>
		<button type="button" onclick="login()">登录</button>
	</body>
</html>
<script src="js/login.js"></script>

js文件

function login(name,pwd){
	//取得用户输入的用户名和密码
	var username=document.getElementsByName("username")[0].value;
	var pwd=document.getElementsByName("pwd")[0].value;
	
	if ("smith"==username && "1234"==pwd) {
		alert("登陆成功!")
	}else{
		alert("用户名密码错误!")
	}
}

这种绑定方式因为直接在html标签中绑定，就会造成html代码混乱，不方便维护，所有要使用js来实现事件的绑定
DEMO:绑定函数（一个单击事件）
html文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action="index_submit" method="post" accept-charset="utf-8">
			用户名:<input type="text" name="username"><br>
			密&nbsp;&nbsp;&nbsp;码:<input type="password" name="pwd"><br><br>
		</form>
		<button type="button" id="btn">登录</button>
	</body>
</html>
<script src="js/login.js"></script>

js文件

//根据id选出要绑定的标签，并将对应事件绑定在标签上
document.getElementById("btn").onclick=login;
function login(name,pwd){
	//取得用户输入的用户名和密码
	var username=document.getElementsByName("username")[0].value;
	var pwd=document.getElementsByName("pwd")[0].value;
	
	if ("smith"==username && "1234"==pwd) {
		alert("登陆成功!")
	}else{
		alert("用户名密码错误!")
	}
}

_水果先生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件概念和事件绑定

事件的概念就和数据库中的触发器一样，当操作了数据的时候回引发对应的触发器程序的执行，JS中的世间就是对用户的特定行为做出相应的响应的过程，其实就是浏览器监听到用户的特定行为时会执行对应的绑定程序。事件的绑定在html元素上将触发事件的行为和事件相应的程序相关联起来的过程就叫做事件的绑定DEMO:绑定函数（一个单击事件）html文件<!DOCTYPE html><ht...
复制链接

扫一扫