JavaScript笔记6-JS DOM事件

最新推荐文章于 2024-03-14 19:32:21 发布

Cinderella2333

最新推荐文章于 2024-03-14 19:32:21 发布

阅读量228

点赞数

分类专栏： js 文章标签： JS DOM事件

本文链接：https://blog.csdn.net/Cinderella2333/article/details/83960249

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.鼠标事件
onload :页面加载时触发
onclick :鼠标点击时触发
onmouseover :鼠标滑过时触发
onmouseout :鼠标离开时触发
onfoucs :获得焦点时触发
onblur :失去焦点时触发
onchange :域的内容改变时发生
onsubmit :表单中的确认按钮被点击时发生
onmousedown :鼠标按钮在元素上按下时触发
onmousemove :在鼠标指针移动时发生
onmouseup :在元素上松开鼠标按钮时触发
onresize :当调整浏览器窗口的大小时触发
onscroll :拖动滚动条滚动时触发
示例1：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JS</title>
	<style type="text/css">
		.tip1{display: none;font-size: 14px;}
	</style>
</head>
<body>
	<div>
		<button id="btn" onclick="clickBtn()" onmouseover="mouseoverBtn()" onmouseout="mouseoutBtn()">点我呀</button>
	</div>
	<div>
		<input type="text" id="phone" placeholder="请输入电话号码" onfocus="myfunction()" onblur="checkphone()">	
	</div>	
	<div class="tip1" id="tip">
		请输入有效手机号
	</div>
	<script>
		function clickBtn() {
			alert("我被点击了");
		}
		function mouseoverBtn() {
			btn.style.background="red";
		}
		function mouseoutBtn() {
			btn.style.background="white";
		}
		function myfunction() {
			tip.style.display="block";
		}
		function checkphone() {
			var num=document.getElementById("phone").value;
			var re = /^1\d{10}$/;
  			if (re.test(num)) {
    			tip.innerHTML='<p>正确</p>';
  			} else {
   			 	tip.innerHTML='<p>错误</p>';
  			}
		}
	</script>
</body>
</html>

示例2：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>changeColor</title>
</head>
<body>
	<div>
		请选择你喜欢的背景颜色
		<select id="bgselect" onchange="changeBgcolor()">
			<option value="">请选择</option>
			<option value="red">红色</option>
			<option value="blue">蓝色</option>
			<option value="green">绿色</option>
		</select>
	</div>
	<script type="text/javascript">
		function changeBgcolor() {
			var color=document.getElementById("bgselect").value;		
			document.body.style.background=color;
		}
	</script>
</body>
</html>

2.键盘事件
onkeydown :在用户按下一一个键盘按键时发生
onkeypress :在键盘按键被按下并释放一个键时发生
onkeyup :在键盘按键被松开时发生
keyCode :返回onkeypress, onkeydown 或onkeyup事件触发的键的值的字符代码,或键的代码。
示例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		span{
			color: red;
		}
	</style>
</head>
<body>
	<p>您还可以输入<span><span id="count">30</span>/30</span>个字</p>
	<textarea id="text" cols="30" rows="4" onkeyup="myfunction()"></textarea>
	<script type="text/javascript">
		function myfunction() {
			var text=document.getElementById("text").value.length;
			var allow=30-text;
			count.innerHTML=allow;
		}
	</script>
</body>
</html>

Cinderella2333

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript笔记6-JS DOM事件

1.鼠标事件onload :页面加载时触发onclick :鼠标点击时触发onmouseover :鼠标滑过时触发onmouseout :鼠标离开时触发onfoucs :获得焦点时触发onblur :失去焦点时触发onchange :域的内容改变时发生onsubmit :表单中的确认按钮被点击时发生onmousedown :鼠标按钮在元素上按下时触发onmousemove :在...
复制链接

扫一扫

专栏目录