JavaScript之DOM事件_解析dom标签 select逐级-优快云博客

本文深入解析JavaScript中的各种事件，包括鼠标事件、键盘事件及其应用实例，如实现表单验证、颜色选择器、字数统计等功能。

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

一丶鼠标事件

事件名称	定义和用法	语法	注释
onclick	在对象被点击时发生	οnclick=“js代码”
onmouseover	在鼠标移动到对象时发生	οnmοuseοver=“js代码”
onmouseout	在鼠标移出对象时发生	οnmοuseοut=“js代码”
onmouseup	在鼠标按键被松开时发生	οnmοuseup=“js代码”
onmousemove	鼠标在对象上移动时发生	οnmοusemοve=“js代码”
onmousedown	在鼠标按键被按下时发生	οnmοusedοwn=“js代码”
onload	在页面元素加载完成后立即发生	οnlοad=“js代码”
onblur	在对象失去焦点时发生	οnblur=“js代码”	主要用于表单中
onfocus	在对象获得焦点时发生	οnfοcus=“js代码”	主要用于表单中
onchange	在域的内容改变时发生	οnchange=“js代码”	主要用在标签
onsubmit	在表单中的确定按钮被点击时触发	οnsubmit=“js代码”	主要用在标签
onresize	在窗口大小被调整时发生	οnresize=“js代码”	主要用在window上
onscroll	在滚动条被拖动时触发	οnscrοll=“js代码”

onclick和onmouseover和onmouseout

<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>

上述方法直接写在html中，当绑定元素过多显得臃肿，复杂，我们应该使用下面的方法

 // 获取按钮
 var btn=document.getElementById("btn");
 function clickBtn(){
 	alert("我是按钮");
 }
 // 点击按钮调用clickBtn这个函数,不要加括号，加上括号会在页面打开时自动调用
 btn.onclick=clickBtn;

onload在页面DOM加载结束后执行，把js写在head中要使用，因为页面还没有获取到body，所以js会出错

window.onload=function(){}

onblur和onfocus实现检测手机号

<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='<img src="img/right.png">';
        }else{
            tip.innerHTML='<img src="img/error.png">';
        }
	}
}
</script>
<div class="box">
    <div class="left">
    	<input type="text" id="phone" placeholder="请输入手机号码">
    </div>
    <div class="tip" id="tip">
    	请输入有效的手机号码
    </div>
</div>

onchange实现select选择option

<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.body.style.background="#fff";
     }else{
     	document.body.style.background=bgcolor;
     }
  }
}
</script>
<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>

二丶键盘事件

事件名称	定义和用法	语法	注释
onkeydown	事件会在用户按下一个键盘按键时发生	οnkeydοwn=“”
onkeypress	事件会在键盘按键被按下并释放一个键时发生	οnkeypress=“”
onkeyup	事件会在键盘按键被松开时发生	οnkeyup=“”
keyCode	获得按下的键盘按键的字符代码	event.keyCode	返回键盘事件触发的键的字符代码，配合
键盘事件使用

onkeyup实现评论字数反馈

<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>