JavaScript之DOM事件基础

最新推荐文章于 2025-06-14 21:17:08 发布

原创最新推荐文章于 2025-06-14 21:17:08 发布 · 205 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript之DOM事件基础

Javascript 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了DOM事件的使用，包括鼠标事件、焦点事件、表单事件等，并通过实例展示了如何利用这些事件实现按钮交互、手机号验证、下拉菜单颜色选择及文本输入限制等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
       .btn{width:140px;height:30px;line-height: 30px;background:#00f;
       	color:#fff;font-size:14px;text-align:center;border-radius:5px;
       	cursor:pointer;margin-top:30px;}
	</style>
</head>
<body>
	<input type="button" value="弹 出" onclick="alert('我是按钮')">
	<!--鼠标划过按钮时调用mouseoverFn的函数-->
	<div class="btn" onmouseover="mouseoverFn(this,'#f00')" onmouseout="mouseoutFn(this,'#ff0')">开始</div>
	<div class="btn" onmouseover="mouseoverFn(this,'#0f0')" onmouseout="mouseoutFn(this,'#333')">结束</div>
	<script>
        function mouseoverFn(btn,bgColor){
        	// 鼠标划过按钮时，按钮的背景变为红色
            btn.style.background=bgColor;
        }
        function mouseoutFn(btn,bgColor){
            btn.style.background=bgColor;
        }
	</script>
</body>
</html>

DOM0级事件

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
       .lock{width:140px;height:30px;line-height: 30px;background:#00f;
       	color:#fff;font-size:14px;text-align:center;border-radius:5px;
       	cursor:pointer;margin-top:30px;}
       	.unlock{width:140px;height:30px;line-height: 30px;background:#666;
       		color:#ccc;font-size:14px;text-align:center;border-radius:5px;
       		cursor:pointer;margin-top:30px;}
	</style>
</head>
<body>
	<div class="lock" id="btn">锁定</div>
	<script>
        // 获取按钮
        var btn=document.getElementById("btn");
        function clickBtn(){
           alert("我是按钮");
        }
        // 点击按钮调用clickBtn这个函数
        btn.onclick=clickBtn;
        // 给按钮绑定事件,this是对该DOM元素的引用
        btn.onclick=function(){
           // 判断如果按钮是锁定，则显示为解锁，变为灰色，否则显示为锁定，变为蓝色
           if(this.className=="lock"){
               this.className="unlock";
               this.innerHTML="解锁";
           }else{
               this.className="lock";
               this.innerHTML="锁定";
           }
          /* if(this.innerHTML=="锁定"){
               this.className="unlock";
               this.innerHTML="解锁";
           }else{
               this.className="lock";
               this.innerHTML="锁定";
           }*/
        }
	</script>
</body>
</html>

简单的手机号检测（获取焦点/失去焦点）

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
       .box{
       	  padding:50px;
       }
       .left,.tip{
       	  float:left;
       }
       .left{margin-right:10px;}
       .tip{display:none;font-size:14px;}
	</style>
	<script>
       window.onload=function(){
       	  // 获取文本框和提示框
       	  var phone=document.getElementById("phone"),
              tip=document.getElementById("tip");
          // 给文本框绑定激活的事件
          phone.onfocus=function(){
          	  // 让tip显示出来
          	  tip.style.display='block';
          }
          // 给文本框绑定失去焦点的事件
          phone.onblur=function(){
             // 获取文本框的值,value用于获取表单元素的值
             var phoneVal=this.value;
             // 判断手机号码是否是11位的数字
             // 如果输入正确，则显示对号图标，否则显示错号图标
             if(phoneVal.length==11 && isNaN(phoneVal)==false){
                tip.innerHTML='√';
             }else{
             	tip.innerHTML='×请输入正确的手机号';
             }
          }
       }
	</script>
</head>
<body>
	<div class="box">
		<div class="left">
			<input type="text" id="phone" placeholder="请输入手机号码">
		</div>
		<div class="tip" id="tip">
           请输入有效的手机号码
		</div>
	</div>
</body>
</html>

onchange 域内容被更改

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box2{
			width: 20px;
			height: 20px;
            border: 1px solid black;
		}
	</style>
	<script>
       // 页面加载
       window.onload=init;

       // 初始化
       function init(){
          // 获取下拉菜单
          var menu=document.getElementById("menu");
          // 给菜单绑定change事件,一般作用域select或checkbox或radio
          menu.onchange=function(){
             // 获取当前选中的值
             //var bgcolor=this.value;
             var bgcolor=menu.options[menu.selectedIndex].value;
             // 如果bgcolor为空，则下面的脚本将不执行
             // if(bgcolor=="")return;
             // 设置body的背景色
             // 如果bgcolor为空，则将背景色设为白色，否则是选择的颜色
             if(bgcolor==""){
                document.getElementById("box2").style.background="#fff";
             }else{
             	document.getElementById("box2").style.background=bgcolor;
             }
          }
       }
	</script>
</head>
<body>
	<div class="box">
		请选择您喜欢的背景色：
		<select name="" id="menu">
			<option value="">请选择</option>
			<option value="#f00">红色</option>
			<option value="#0f0">绿色</option>
			<option value="#00f">蓝色</option>
			<option value="#ff0">黄色</option>
			<option value="#ccc">灰色</option>
		</select>
	</div>
	<div class="box2" id="box2">
		
	</div>
</body>
</html>

div滚动

	<style>
	   body{height:2000px;}
       .box{width:200px;height:200px;background:#f00;overflow:auto;}
	</style>
</head>
<body>
	<div class="box" id="box">
		<p>拖动</p>
		<p>拖动</p>
		<p>拖动</p>
		<p>拖动</p>
		<p>拖动</p>
		<p>拖动</p>
		<p>拖动</p>
		<p>拖动</p>
		<p>拖动</p>
		<p>拖动</p>
	</div>
	<script>
       var box=document.getElementById("box");
       // 绑定按下的事件
       box.onmousedown=function(){
       	  console.log("我被按下了");
       }
       // 绑定移动的事件
       box.onmousemove=function(){
       	  console.log("我被移动了");
       }
       // 绑定松开的事件
       box.onmouseup=function(){
       	  console.log("我被松开了");
       }
       // 绑定点击的事件
       box.onclick=function(){
       	  console.log("我被点击了");
       }
       // 浏览器窗口尺寸发生改变时
       window.onresize=function(){
       	  console.log("我的尺寸被改变了");
       }
       // 拖动滚动条
       window.onscroll=function(){
       	  console.log("我被拖动了");
       }
       box.onscroll=function(){
       	  console.log("我是DIV的滚动条");
       }
	</script>
</body>

<div>
		<p class="text">
			<b id="showcount">您还可以输入</b>
			<span id="totalbox"><em id="count">30</em>/30</span>
		</p>
		<div class="input">
			<textarea name="" id="text" cols="70" rows="4"></textarea>
		</div>
	</div>
	<script>
	   // 获取文本框及其他元素
       var text=document.getElementById("text");
       var total=30;
       var count=document.getElementById("count");
       var showcount=document.getElementById("showcount");
       var totalbox=document.getElementById("totalbox");
	   // 绑定键盘事件
	   document.onkeyup=function(){
	   	  // 获取文本框值的长度
	   	  var len=text.value.length;
	   	  // 计算可输入的剩余字符
	   	  var allow=total-len;
	   	  var overflow=len-total;
	   	  // 如果allow小于0
	   	  if(allow<0){
              showcount.innerHTML="您已超出"+overflow;
              totalbox.innerHTML='';
	   	  }else{
	   	  	  showcount.innerHTML='您还可以输入';
	   	  	  totalbox.innerHTML='<em id="count">'+allow+'</em>/30';
	   	  }
	   }
	</script>