JavaScript之DOM事件

本文深入解析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代码”
  • onclickonmouseoveronmouseout
<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(){}
  • onbluronfocus实现检测手机号
<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>

三丶事件的执行脚本

  1. ele.onclick = function () { 执行脚本 };
  2. ele.onclick = fn;
    function fn () { 执行脚本 };
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值