JS事件的绑定

最新推荐文章于 2024-08-06 12:58:11 发布

Dragon.liu

最新推荐文章于 2024-08-06 12:58:11 发布

阅读量87

点赞数

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_42223701/article/details/121032331

版权

JavaScript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

本文介绍如何在HTML中使用JavaScript实现单击事件监听，如登录验证，并展示了下拉列表的选择事件处理。通过`load()`函数动态绑定事件和`onchange`属性操作，深入理解事件处理在前端开发中的应用。

摘要由CSDN通过智能技术生成

单击事件

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<!-- 单击事件 -->
	<button type="button" onclick="login('smith',1234)">提交</button>
</body>
</html>
<script src="js/shijiandemo1.js">
</script>

function login(username,pwd) {
	name = "smith";
	password = 1234;
	if(name==username&&pwd==password){
		alert("登录成功");
	}
	else {
		alert("账户或者密码有误");
	}
}

在这里插入图片描述

页面加载完毕就开始绑定

function load(){
	//alert("页面加载完毕立即执行");
	document.getElementById("btn").onclick=login;
}
// var button = document.getElementById("btn");
//绑定事件
// button.onclick = login;
function login(username,pwd) {
	name = "smith";
	password = 1234;
	if(name==username&&pwd==password){
		alert("登录成功");
	}
	else {
		alert("账户或者密码有误");
	}
}

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="js/shijiandemo1.js">
	</script>
</head>
<body onload="load()">
	<!-- 单击事件 -->
	<button type="button" id="btn">提交</button>
</body>
</html>

下拉列表事件绑定

window.onload = function(){
	document.getElementsByTagName("select")[0].onchange = selectProvince;
}
function selectProvince(){
	//this表示触发当前函数的元素，本次触发该函数的元素，就是selectiala列表
	//this.value当前select的value值
	alert("value"+this.value);
}

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="js/shijiandemo1.js">
	</script>
</head>
<body>
	<select name="city">
		<option>--选择省份</option>
		<option value="gd">广东</option>
		<option value="bj">北京</option>
		<option value="zj">浙江</option>
	</select>
</body>
</html>

在这里插入图片描述

Dragon.liu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS事件的绑定

单击事件<!DOCTYPE html><html><head> <title></title></head><body>  <button type="button" onclick="login('smith',1234)">提交</button></body></html><script src="js/sh
复制链接

扫一扫

专栏目录