js事件

最新推荐文章于 2024-06-10 17:00:16 发布

hoho_12

最新推荐文章于 2024-06-10 17:00:16 发布

阅读量312

点赞数

分类专栏： JavaScript Java Training 文章标签： js

本文链接：https://blog.csdn.net/hoho_12/article/details/52141582

版权

Java Training 同时被 2 个专栏收录

39 篇文章 0 订阅

订阅专栏

JavaScript

31 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>

		<script type="text/javascript">
			function showTime() {
				var currentTime = new Date();
				var month = currentTime.getMonth();
				var day = currentTime.getDate();

				var hour = currentTime.getHours();
				var minute = currentTime.getMinutes();
				var second = currentTime.getSeconds();

				var time = month + 1 + "/" + day + "    " + hour + ":" + minute + ":" + second;

				document.getElementById("time").innerHTML = time;

				setTimeout("showTime()", 500);
			}

			function checkName(str) {
				//只要长度： 6 ~ 16
				if(str.length < 6 || str.length > 16) {
					alert("格式不对，回头是岸");
				}
			}

			function checkInput() {
				return false;
			}
		</script>
	</head>

	<!--
    	
    	描述：事件:事件是可以被 JavaScript 侦测到的行为。    	
    	Js在浏览器执行
    	需求：Js需要监听到用户的点击，双击这些操作。
    	
    	多选框：勾选一个checkbox,需要把一组checkbox全部勾选
    	1.全选checkbox被勾选
    	2.将这一组checkbox全部勾选
    	----------------------------------------------
    	onload: frameset 和 body
    	    当页面载入时执行脚本
    	  οnlοad="js函数"
    	  οnlοad="javascript:js代码"
    	
    	----------------------------------------------
    	表单元素的事件
    	onfocus: 获取焦点
    		输入框：点击之后，可以输入
    		按钮：点击
    		checkbox/radio ：点击
    		this.value : this代表当前元素 
    	onblue: 失去焦点
    		οnblur="checkName(this.value)"
    	onchange: 元素内容改变时触发
    	        输入框在输入时不会触发
    	    checkbox用的较多
    	    select使用onchange
    	onselect: 选中时触发（输入框中的文本被选中）
    	
    	表单的事件
    	onsubmit : 提交时触发
    		return 返回值为boolean的函数
	    		提交表单，对整个表单数据做检查
	    		如果数据合法（true），提交
	    		如果不合法（false），不提交
    		
    	onreset : 重置时触发
    -->

	<body οnlοad="showTime()">
		<span id="time"></span>

		<form action="success.html" method="get" οnreset="alert('重置了')" οnsubmit="return checkInput()">

			<input type="text" placeholder="用户名" name="username" οnchange="alert(this.value)" /><br />
			<input type="password" placeholder="密码 " name="password" οnselect="alert(this.value)" /><br />

			<input type="checkbox" οnchange="alert('改变')" />

			<select οnchange="alert(this.value)">
				<option value="aaa">aaa</option>
				<option value="bbb">bbb</option>
				<option value="ccc">ccc</option>
			</select>
			
			<input type="submit" value="登陆 " />
			<input type="reset" value="重置" />
		</form>

	</body>

</html>

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#div1 {
				width: 100px;
				height: 100px;
				background-color: aquamarine;
			}
		</style>
		<script type="text/javascript">
			function changeColor(mode) {
				switch(mode) {
					case 1:
						document.getElementById('div1').style.background = "#7FFFD4";
						break;
					case 2:
						document.getElementById('div1').style.background = "#ff00ff";
						break;
					case 3:
						document.getElementById('div1').style.background = "#00ff00";
						break;
					case 4:
						document.getElementById('div1').style.background = "#ffff00"
						break;
					case 5:
						document.getElementById('div1').style.background = "#f0f0f0";
						break;
				}
			}
		</script>
	</head>

	<!--    	
    	描述：
    	
    	keydown : 按下
    	keyup: 松开
    	keypress: 按下并松开
    	
    	onclick 脚本 当鼠标被单击时执行脚本 
    		οnclick="alert('点击了')"
		ondblclick 脚本 当鼠标被双击时执行脚本 
			οndblclick="toBaiDu()"
		onmousedown 脚本 当鼠标按钮被按下时执行脚本 
			οnmοusedοwn="toBaiDu()"
		onmousemove 脚本 当鼠标指针移动时执行脚本 ：鼠标没有按下
			οnmοusemοve="toBaiDu()" 
		onmouseout 脚本 当鼠标指针移出某元素时执行脚本 
			οnmοuseοut="toBaiDu()"
		onmouseover 脚本 当鼠标指针悬停于某元素之上时执行脚本 
			
		onmouseup 脚本 当鼠标按钮被松开时执行脚本 
    -->

	<!--    	
    	描述：常用事件
    	onfocus
    	onblue
    	onchange
    	onsubmit
    	onclick
    	onload
    -->

	<body>
		<!--
			<input type="text" name="username" οnkeydοwn="alert('键盘按下')" οnkeypress="alert('键盘按下并松开')" οnkeyup="alert('键盘松开')" />
		-->

		<input type="button" ondbclick="alert('点击了')" value="按钮" />

		<div id="div1" οnmοuseοver="changeColor(4)" οnmοuseup="changeColor(5)">
			这是一个div
		</div>

	</body>

</html>