JavaScript绑定事件

最新推荐文章于 2024-05-17 13:52:13 发布

十万-

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量74

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_68225334/article/details/129901235

版权

js常用事件
事件名	说明
onload	某个页面或图像被完成加载
onsubmit	当表单提交时触发该事件
onclick	鼠标单击事件
ondblclick	鼠标双击事件
onblur	元素失去焦点
onfocus	元素获取焦点
onchange	用户改变域的内容

<html>
	<head>
		<meta charset="utf-8">
		<title>事件的绑定</title>
	</head>
	<body>
		<button id="b1" onclick="alert('被点了')">按钮</button>
		<br />
		<button id="b2" onclick="fun('aaa')">按钮</button>
		<br />
		<button id="b3" >按钮</button>
		<br />
		<input type="text" onfocus="fun3()"/>
	</body>
	<script>
		function fun(msg){
			alert(msg)
		}
		
		
		function fun2(){
			alert("弹窗")
		}
		
		function fun3(){
			alert("获得焦点")
		}
		//使用js绑定,最好绑定没有参数的传递
		//1.获取对象
		var but = document.getElementById("b3");
		//2.绑定事件
		but.onclick=fun2;
	</script>
</html>

图片切换的案例：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<img id = "img" src="./bb.jpg" width="20%" height="30%"/>
		<input type="text" name="username"/>
	</body>
	<script>
		//1.1获取图片对象
		var img = document.getElementById("img")
		//2.绑定事件
		img.onclick = fun;
		
		//定义变量代表灯泡状态
		var flag = false;
		//每次执行，更换图片
		function fun(){
			if(flag){
				//说明灯泡是亮的
				img.src = "./bb.jpg";
				flag = false;
			}else{
				img.src="./aa.jpg";
				flag = true;
			}
		}
	</script>
</html>