JavaScriptDOM事件

最新推荐文章于 2024-05-17 01:18:21 发布
最新推荐文章于 2024-05-17 01:18:21 发布
阅读量277 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zerobaek/article/details/78382930
版权

JavaScriptDOM事件

1. 掌握什么是事件

2. 掌握HTML事件

3. 掌握DOM0级事件

4. 掌握常用的鼠标与键盘事件

5. 掌握this的指向

 

什么是事件：

事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。js与html的交互就是通过事件来实现的

 

HTML事件：

HTML事件

DOM0级事件

 

HTML事件：

<tag 事件=”执行脚本”></tag>

在HTML元素上绑定事件

执行脚本可以是一个函数的调用

<!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="弹 出" οnclick="alert('我是按钮')">
	<!--鼠标划过按钮时调用mouseoverFn的函数-->
	<div class="btn" οnmοuseοver="mouseoverFn(this,'#f00')" οnmοuseοut="mouseoutFn(this,'#ff0')">开始</div>
	<div class="btn" οnmοuseοver="mouseoverFn(this,'#0f0')" οnmοuseοut="mouseoutFn(this,'#333')">结束</div>
	<script>
        function mouseoverFn(btn,bgColor){
        	// 鼠标划过按钮时，按钮的背景变为红色
            btn.style.background=bgColor;
        }
        function mouseoutFn(btn,bgColor){
            btn.style.background=bgColor;
        }
	</script>
</body>
</html>

鼠标点击事件：

onload:页面加载时触发

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script>
	   // 页面加载时执行，unload页面卸载
       window.οnlοad=function(){
       	 // 获取box
       	 var box=document.getElementById("box");
       	 var clicked=function(){
       	 	  alert('我被点击了');
       	 }
       	 box.οnclick=clicked;
       }
	</script>
</head>
<body>
	<div id="box">这是一个DIV</div>
</body>
</html>

onclick:页面点击是触发

onmouseover:鼠标滑过是触发

onmouseout:鼠标离开时触发

onfocus:获得焦点时触发

onblur:失去焦点时触发

onchange:域的内容改变时发生

<!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.οnlοad=function(){
       	  // 获取文本框和提示框
       	  var phone=document.getElementById("phone"),
              tip=document.getElementById("tip");
          // 给文本框绑定激活的事件
          phone.οnfοcus=function(){
          	  // 让tip显示出来
          	  tip.style.display='block';
          }
          // 给文本框绑定失去焦点的事件
          phone.οnblur=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>
</head>
<body>
	<div class="box">
		<div class="left">
			<input type="text" id="phone" placeholder="请输入手机号码">
		</div>
		<div class="tip" id="tip">
           请输入有效的手机号码
		</div>
	</div>
</body>
</html>


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script>
       // 页面加载
       window.οnlοad=init;

       // 初始化
       function init(){
          // 获取下拉菜单
          var menu=document.getElementById("menu");
          // 给菜单绑定change事件,一般作用域select或checkbox或radio
          menu.οnchange=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>
</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>
</body>
</html>


关于this指向：

在事件触发的函数中，this是对该DOM对象的引用。

 

DOM0级事件：

1. 通过DOM获取HTML元素

2. （获取HTML元素）.事件=执行脚本

语法：ele.事件=执行脚本

功能：在DOM对象上绑定事件

说明：执行脚本可以是一个匿名函数，也可以是一个函数调用（不要写括号）

<!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");
        //var btn=document.querySelector(".lock");
        function clickBtn(){
           alert("我是按钮");
        }
        // 点击按钮调用clickBtn这个函数
        btn.οnclick=clickBtn;
       /* // 给按钮绑定事件,this是对该DOM元素的引用
        btn.οnclick=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>

不建议使用HTML事件的原因：

1. 多元素绑定相同事件时，效率低

2. 不建议在HTML元素中写JavaScript代码

 

onfocus事件用于：

input标签type为text、password

textarea标签

 

鼠标事件补充：

onsubmit：表单中的确认按钮被点击时发生

onmousedown：鼠标按钮在元素上按下时触发

onmousemove：在鼠标指针移动是发生

onmouseup：在元素上松开鼠标按钮时触发

onresize：当调整浏览器窗口的大小时触发

onscroll：拖动滚动时触发

onmousedown和onmouseup构成了onclick事件


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<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.οnmοusedοwn=function(){
       	  console.log("我被按下了");
       }
       // 绑定移动的事件
       box.οnmοusemοve=function(){
       	  console.log("我被移动了");
       }
       // 绑定松开的事件
       box.οnmοuseup=function(){
       	  console.log("我被松开了");
       }
       // 绑定点击的事件
       box.οnclick=function(){
       	  console.log("我被点击了");
       }
       // 浏览器窗口尺寸发生改变时
       window.οnresize=function(){
       	  console.log("我的尺寸被改变了");
       }
       // 拖动滚动条
       window.οnscrοll=function(){
       	  console.log("我被拖动了");
       }
       box.οnscrοll=function(){
       	  console.log("我是DIV的滚动条");
       }
	</script>
</body>
</html>

键盘事件与keyCode属性：

onkeydown:在用户按下一个键盘按键时发生

onkeypress:在键盘按键被按下并释放一个键时发生

onkeyup:在键盘按键被松开时发生

keyCode:返回onkeydown，onkeypress或onkeyup事件触发的键的值的字符代码，或键的代码

<script type="text/javascript">

//在事件触发的function里，用一个参数接受事件对象

document.οnkeypress=function (event) {

console.log(event.keyCode);

}

</script>


实例：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
       .text span{font-weight:bold;color:#f00;}
       em{font-style:normal;}
       b{font-weight:normal;}
	</style>
</head>
<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.οnkeyup=function(){
	   	  // 获取文本框值的长度
	   	  var len=text.value.length;
	   	  // 计算可输入的剩余字符
	   	  var allow=total-len;
	   	  var overflow=len-total;
	   	  // 如果allow小于0
	   	  if(allow<0){
              showcount.innerHTML="您已超出";
              totalbox.innerHTML=overflow;
              totalbox.style.color='#f00';
	   	  }else{
	   	  	  showcount.innerHTML='您还可以输入';
	   	  	  totalbox.innerHTML='<em id="count">'+allow+'</em>/30';
	   	  }
	   }
	</script>
</body>
</html>


 

zerobaek
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript DOM事件(笔记)
10-24
主要介绍了JavaScript DOM事件(笔记) ,需要的朋友可以参考下
DOM 常用事件（详解）
qq_44709805的博客
11-26 3145
1.onload事件：页面或图像加载完成后立即发生 <script> function load(){ alert("页面已加载！"); } </script> <body onload="load()"> <h1>Hello World!</h1> </body> 用匿名函数实现：常用 <script> window.onload=function(){ //窗口加载完毕触发此函数 alert("页面已加载！"); }.
DOM 事件详解
weixin_48376132的博客
07-05 4473
注册事件（绑定事件） 1. 概述 给元素添加事件，称为注册事件 / 绑定事件 注册事件有两种方式：传统方式和方法监听注册方式 2. 传统注册方式 利用 on 开头的事件 DOM 0级事件绑定方式—— 因为 W3C 在确定 DOM 版本时，在之前已经有了事实上存在的一些事件，比如 onclick 这种直接绑定给元素的属性的事件，DOM1 中用的还是之前的事件，所以是 DOM 0级事件，而不是1级事件 <button oncilck = "alert(1)"></button> btn.
Web前端最全从零开始学WEB前端——JavaScript-DOM操作，2024年最新字节跳动前端开发面试
最新发布
2401_84438488的博客
05-17 263
技术栈比较搭，基本用过的东西都是一模一样的。快手终面喜欢问智力题，校招也是终面问智力题，大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了，建议回去补一下。风急天高猿啸哀，渚清沙白鸟飞回。无边落木萧萧下，不尽长江滚滚来。万里悲秋常作客，百年多病独登台。艰难苦恨繁霜鬓，潦倒新停浊酒杯。——杜甫《登高》⌨本文知识点DOM介绍获取节点通过ID获取用类名获取用CSS选择器获取用name属性获取用标签获取获取属性获取元素内容获取表单数据创建节点插入节点删除节点事件。
JavaScript之DOM
qq_43751200的博客
06-05 1759
DOM
DOM事件类型详解
s13166803785的博客
12-13 945
一、表单事件： input事件当<input>、<textarea>的值发生变化时触发。此外，打开contenteditable属性的元素，只要值发生变化，也会触发input事件。input事件的一个特点，就是会连续触发，比如用户每次按下一次按键，就会触发一次input事件。 select事件当在<input>、<textarea>中选中文本时触发。 Change事件当<input>、<select>、<textarea>的
DOM系列之DOM事件
老__L的博客
07-18 1509
JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。简单理解：触发— 响应机制。网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个 事件，然后去执行某些操作。
JavaScript DOM 添加事件
10-30
是我在给库中添加事件的时候写的添加事件的方法！这个方法实现了跨浏览器之间的方法！
谈谈我对JavaScript DOM事件的理解
10-23
DOM与事件是JavaScript最核心的组成部分之一，他们赋予了页面无限的想象空间，你根本无法离开他们，否则js将...本文给大家分享我对javascript dom事件的了解，对javascript dom事件相关知识感兴趣的朋友一起学习吧
Javascript进阶 ----- DOM技术
weixin_65489884的博客
04-20 820
dom事件的学习
DOM事件详解
qq_46492364的博客
06-01 385
文章目录前言一、绑定事件的方法1.addEventListener绑定事件2.attachEvent绑定事件3.注册事件兼容写法4.解除绑定事件的方法5.移除事件兼容写法二、DOM事件流1.事件流三个阶段2.事件冒泡应用-事件委托三、事件对象总结 前言 这部分学习一些关于dom事件绑定方法、解除绑定的方法，以及一些相关案例。 一、绑定事件的方法 1.addEventListener绑定事件 参数为：（1）事件类型字符串，click等（2）事件函数 同一个元素可以多次绑定事件监听，同一个事件类型可以注册多
DOM基本概念
学无止境
10-30 971
DOM的基本概念
DOM事件机制
冰霜的博客
09-11 359
事件机制 HTML DOM 允许 JavaScript 对 HTML 事件作出反应。JavaScript 能够在事件发生时执行，比如当用户点击某个 HTML 元素时。 为了在用户点击元素时执行代码，请向 HTML 事件属性添加 JavaScript 代码： <div id='div1'>我是一个div</div> <button id='btn'>点我啊</button> <!-- 还可以在HTML标签中进行事件的绑定 需要加()--> <.
DOM事件详解(一)
weixin_44992737的博客
07-04 465
DOM事件详解
10-JavaScript的DOM对象
m0_57262196的博客
05-12 778
10-DOM 1.DOM简介 DOM，全称Document Object Model文档对象模型。 1).JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面。 -文档——文档表示的就是整个的HTML网页文档 -对象——对象表示将网页中的每一个部分都转换为了一个对象。 -模型——使用模型来表示对象之间的关系，这样方便我们获取对象。 2).要使用DOM来操作网页，我们需要浏览器至少得先给我一个对象才能去完成各种操作 所以浏览器已经为我们提供了一个document对象，它是
JavaScript之DOM操作
如果相遇，那么你好哦~
11-24 98
JavaScript操作DOM
DOM 事件相关知识总结——事件绑定、事件流（事件冒泡、捕获）
alokka的博客
04-16 837
onclickalert'我被点击了！优点：大家都会，几乎所有的浏览器都支持缺点：夹杂在HTML代码中，代码不简洁；这种事件写法效率不高；不符合“行为，样式，结构”相分离。
【JavaScript学习总结】【5】、JS DOM
lily19970107的博客
10-09 73
当页面加载时，浏览器会创建页面的文档对象模型（Document Object Model）。文档对象模型定义访问和处理 HTML 文档的标准方法。DOM 将 HTML 文档呈现为带有元素、属性和文本的树结构，即节点树。通过 DOM，JS 可创建动态的 HTML，可以使网页显示动态效果并实现与用户的交互功能。JS 能够改变页面中所有的 HTML 元素、属性和 CSS 样式，并对页面中所有事件做出响应。所以学习 JS 的起点就是处理网页，处理网页就需要使用 DOM 进行操作。
【DOM】DOM事件全解析，万字总结，看这一篇文章就够了_07
青春木鱼的博客
05-29 1068
事件是DOM中最重要的知识，可以这么说，我们之前讲的DOM的增删改查操作，一旦到了学了框架或者将来到了公司当中，可能就不用了，但我们不可以不学，因为我们学DOM是为了学框架打基础，学DOM有助于你对框架的理解，对一些API和实现原理的理解。另外，毕竟框架也不是万能的，我们谁也确定不了一个流行框架能活跃多长时间，所以，不管以后框架怎么变，但基础的还是基础，就像学习了自动挡开车之后，万一有一天只有手动挡的车，你该怎么办呢？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值