js---Dom(六)事件---重点

最新推荐文章于 2023-02-06 10:36:24 发布
最新推荐文章于 2023-02-06 10:36:24 发布
阅读量212 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41532872/article/details/86513250
版权

鼠标事件


<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<style>
			#box {
				width: 200px;
				height: 200px;
				background-color: yellow;
			}
			
			#child {
				width: 100px;
				height: 100px;
				background-color: green;
			}
		</style>

	</head>

	<body>

		<div id="box">
			<!-- 子元素 -->
			<div id="child">

			</div>

		</div>
		<script>
			/*	onmouseenter:鼠标进入被选元素时会触发onmouseenter事件
				onmouseover:鼠标进入被选元素或者它的任意子元素时都会触发onmouseover事件
				onmouseenter通常与onmouseleave一起用,onmouseover和onmouseout一起用
				onmouseleave:鼠标离开被选元素时触发
				onmouseout:鼠标离开被选元素或者它的任意子元素时都会触发
			* */

			var box = document.getElementById('box');
			var child = document.getElementById('child');
			box.onmouseenter = function() {
				console.log("鼠标进入--onmouseenter");
			}
			box.onmouseover = function() {
				console.log("鼠标进入--onmouseover");
			}
			box.onmouseleave=function(){
				console.log("鼠标离开--onmouseleave");
			}
			box.onmousemove=function(){
				console.log("鼠标移动--onmousemove");
			}
			/* 鼠标按下时触发 */
			box.onmousedown=function(){
				console.log('鼠标被按下了');
			}
			/* 鼠标松开时触发 */
			box.onmouseup=function(){
				console.log('鼠标松开了');
			}
		</script>
	</body>

</html>

在这里插入图片描述

键盘事件


<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		

	</head>

	<body>
		<script>
		 /* 键盘事件：是在键盘的按键上触发的事件
		  *  键盘事件的事件源:body或者document元素
		  *  console.log("按键被按下了"); onkeydown:键盘的按键被按下时触发
		  *  onkeyup:按键松开时触发
		  */
		 
		 document.body.onkeydown=function(){
		 	 console.log("按键被按下了");
		 }
		 document.body.onkeyup=function(){
		 	 console.log("按键被松开了");
		 }
		</script>
	</body>

</html>

在这里插入图片描述

event事件对象_属性


<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		

	</head>

	<body>
		<script>
		 /* event事件对象：这个对象是结合键盘事件使用的，将它传到键盘事件的响应函数中
		  *event对象的属性 ctrlKey：判断键盘事件触发时是否按下了Ctrl键
		  *  event事件对象也可以跟鼠标事件一起使用
		  * clientX属性：获取鼠标指针相对于窗口客户区域的 x 坐标
		  * clientY属性：获取鼠标指针相对于窗口客户区域的 Y坐标
		  * 
		  * onmousemove:鼠标指针在元素上移动时触发的事件，可以在这个事件中获取鼠标指针的x和y坐标
		  * onmousemove事件一般加在document对象上
		  * keyCode：获取按键的ascii值
		  */
		 
		 document.body.onkeydown=function(event){
		 	    var f= event.ctrlKey;
		 	 console.log("按键被按下了"+f);
		 }
		 document.body.onkeyup=function(){
		 	 console.log("按键被松开了");
		 }
		  
		document.onmousemove=function(event){
		  	 var x=  event.clientX;
		  	 var y=event.clientY;
		  	 console.log('鼠标指针的x坐标：'+x+",y坐标："+y);
		  }
		  document.body.onkeydown=function(event){
		  	//获取按键的ascii码值，就是一个数字
		  	//常用的几个ascii:
		  	//回车键---13    左键--37  右键--38  上键--39  下键--40
		  	  var code= event.keyCode;
		  	  console.log('按键的ascii：'+code);
		  }
		 
		</script>
	</body>

</html>

在这里插入图片描述

event对象的方法–阻止事件冒泡和阻止默认行为


<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<style>
			#parent {
				width: 200px;
				height: 200px;
				background-color: yellow;
			}
			
			#child {
				width: 100px;
				height: 100px;
				background-color: red;
			}
		</style>
	</head>

	<body>
		<div id="parent">
			<div id="child"></div>
		</div>
		<a href="http://www.baidu.com"  id="link">百度一下，你就知道</a>
		<script>
		/*	事件冒泡:当事件发生时,事件源会把该事件由下向上(由内向外)传播出去(事件派发),此时它的父元素也触发了该事件,
		 * 并执行相应的事件处理函数
		 * evvent
			event.stopPropagation()：阻止事件冒泡
			event.preventDefault():阻止事件的默认行为
		**/
			var parent=document.getElementById('parent');
			var child=document.getElementById('child');
			//给子元素添加事件
			child.onclick=function(event){
				console.log('onlick事件,child');
				 //阻止事件冒泡
				event.stopPropagation(); 
			}
			//给父元素parent添加事件
			parent.onclick=function(event){
				console.log('onlick事件,parent');
				//阻止事件冒泡
				event.stopPropagation(); 
			}
			document.body.onclick=function(){
				console.log('onlick事件,body');
			}
			var link=document.getElementById('link');
			link.onclick=function(event){
				  //阻止超链接的单击事件的默认跳转行为
				  event.preventDefault();
			}
		</script>
	</body>

</html>

在这里插入图片描述

表单的事件


<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>

		<form action="http://www.baidu.com" id="form">
		用户名：	<input type="text" name="username" id="uname" placeholder="请输入用户名..."> <br>
		密码：	<input type="password" name="password" placeholder="请输入密码..."> <br>
			<input type="submit" value="提交" />
			<input type="reset" value="重置" />
			
			<input type="button"  id="btn" value="普通按钮提交表单" />
		</form>

		
		<script>
			/* onsubmit:是提交表单时就会自动触发onsubmit事件
			    onreset:是重置表单时会自动触发onreset事件
			    不需要给提交按钮添加单击事件
			    如果需要给表单中的数据做验证，就直接把验证的代码写到onsubmit事件的响应函数中
			    在onsubmit事件中做js验证时，如果要阻止表单提交，可以写event.preventDefault();或者 return false;
			  提交表单可以用提交按钮来提交(点击提交按钮，默认就会提交表单)，也可以用普通按钮
			    普通按钮提交表单的步骤：
			    1.给普通按钮添加单击事件
			    2.在单击事件中调用表单的submit()方法，该方法会自动的去提交表单，如果要做js验证，就把验证代码写到普通按钮的onclick事件中
			    
			 注意：
			 如果是用提交按钮提交表单，不需要做js验证，那么就不用写表单的onsubmit事件；
			如果是用普通按钮提交表单，不需要做js验证，那么不能省略按钮的onclick事件，只需要在onclick事件的响应函数中写 form.submit();    
			 * */
			//获取表单
			var form=document.getElementById('form');
			form.onsubmit=function(event){
				//console.log('表单被提交了');
				//当用户名的长度少于6时，不符合要求，要求：用户名的长度至少是6位
				var uname=  document.getElementById('uname').value;
				if(uname.length<6){
					console.log('用户名至少要6位');
					 //不符合要求，阻止表单提交
					 //event.preventDefault();
					 return false;
				}
				//允许表单提交
			}
			//获取普通按钮
			var btn=document.getElementById('btn');
			//给按钮添加单击事件
			btn.onclick=function(){
				var uname=  document.getElementById('uname').value;
				if(uname.length<6){
					console.log('用户名至少要6位');
					return;
				}
				//提交表单
				 form.submit();
			}
			
			
		</script>
	</body>

</html>

在这里插入图片描述

司天宏
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
event-delegation:浏览器DOM事件的事件委托。 灵活，跨浏览器兼容且以打字稿为重点
04-12
浏览器DOM事件的事件委托。 灵活，跨浏览器兼容且以Typescript为重点。 快速链接 安装 CDN 您可以找到此软件包。 缩小的UMD捆绑包约为1.7KB（压缩）。 < script src =" ...
09-JS的事件流的概念(重点)
06-03 116
在学习jQuery的事件之前，大家必须要对JS的事件有所了解。看下文 事件的概念 HTML中与javascript交互是通过事件驱动来实现的，例如鼠标点击事件、页面的滚动事件onscroll等等，可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的，就需要了解一下“事件流”的概念。 什么是事件流 事件流描述的是从页面中接收事件的顺序 1、D...
js-DOM-事件
qq_43260366的博客
03-27 365
1.事件阶段 事件分为三大阶段 冒泡事件 当某个元素的事件被触发之后，那么它所有的 父元素 相同的事件 也会被触发； 执行顺序：由内到外，从小到大； 目标事件(正常事件) 捕获事件 2.如何理解事件代理 [1]定义：事件代理简单来说就是：事件不直接绑定在某个元素上而是绑定在该元素的父元素上，进性触发的时候再通过条件进性判断； [2]优点： 大量节省内存占用，减少注册事件； 当在新增加子对象时，无需再对齐进性事件绑定，对于动态内容比较友好； [3]举例说明 如下，若是我.
js -- dom重点核心
贝la的博客
06-15 109
dom-to-image.js 页面截图
张小胖
02-06 2587
dom-to-image.js 页面截图 解决： dom-to-image.js 视频标签 video 不显示 解决： dom-to-image.js svg 标签不显示 解决： dom-to-image.js 图片链接失效报错
JS---JS的DOM详解（四）
前端与计算机相关知识的分享，博主的qq523235674
02-06 865
1、DOM简介 1.1、什么是DOM 文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口 W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。 文档：一个页面就是一个文档，DOM中使用doucument来表示 元素：页面中的所有标签都是元素，DOM中使用 element 表示 节点：网页中的所有内容都是节点（标签，属性，文本，注释等），DO.
std-js:标准JavaScript函数和polyfills库
04-05
标准js一个JavaScript库，用于使前端开发变得明智导航该库的目的不只是提供jQuery等的替代方案，而是提供本机JavaScript的polyfills和wrapper，从而可以使用现代JavaScript，而不必为浏览器支持和实现带来麻烦。...
react-study:React学习和开发
04-27
react-study React学习和开发 @ ，若fork或star请注明来源 于2018年7月21日，代码所用版本： 学习新技术，无非就是看官方文档，加以延展，最后融会贯通 线上库文件： Files Reaact组件 ...重点内容
JavaScript-and-DOM-Manipulation:宾夕法尼亚州数据训练营作业14-交互式网页，显示动态的UFO目击数据表，并具有使用JavaScript和D3.js在HTML表单上构建的过滤功能
04-09
JavaScript和DOM操作 宾夕法尼亚州数据训练营作业14-交互式网页，显示动态的UFO目击数据表，并具有使用JavaScript和D3.js在HTML表单上构建的过滤功能 背景 分配的目的是创建一个HTML页面，该页面根据提供的UFO数据集...
drumkit-app-js-css
03-27
目录关于该项目使用JavaScript * DOM操作*控件结构* HTML音频API * JavaScript CSS操作* addEventListener项目说明/摘要该项目的重点是要使每个琴键在按下时发出相应的鼓声。 它还使用CSS过渡和动画使项目对用户更具...
picoh:另一个JavaScript前端微框架-缩小并压缩到2.3KB左右
05-28
Picoh是我对JavaScript前端微框架的支持，它提供事件处理，DOM查询/操作，XMLHTTP请求和一些实用程序方法。 重点是精简代码占用空间-缩小并压缩后，所有文件的大小都在2.3KB左右。 所有方法都在window.$ / window....
simple-reactive-js
06-12
该框架处理将 DOM 事件连接到您的处理程序/路由器，将您的路由器连接到您的模型，可能是您的模型连接到您的模型，然后是您的模型连接到您的视图。 用法 见example.html。 请注意，这里显示了两个示例，一个使用...
JS-Practice
03-08
JS实践重点全面的DOM操作提取请求活动与事件委托用JavaScript解决问题前言您有一个db.json其中包含可在http://localhost:4000/horror ， http://localhost:4000/comedy和http://localhost:4000/action上找到的电影...
react-animation-comparison:重点关注开发人员体验的React动画库之旅
05-02
卸载网格组件时，它应先等待其子对象进行动画处理，然后再对其进行动画处理，并以与它到达的位置相反的方向离开DOM。 如果快速切换进入/退出状态，则应适当取消进行中的动画。 如果洗牌，它们仍应按照预期的交错...
细说浏览器特性检测(2)-通用事件检测
01-19
事件检测，即检测某一事件在不同的浏览器中是否存在（可用），这在编写Javascript的过程中也非常重要，如mouseenter/mouseleave事件虽然实用，但并不是所有浏览器都提供了标准的支持，因此需要自己手动模拟，即：...
focus-options-polyfill:适用于focusOptions的WHATWG规范JavaScript polyfill，可将一组选项传递给focus方法
05-11
焦点选项-polyfill JavaScript focusOptions for focusOptions ，这是传递给HTMLElement.focus()的可选属性，其中包含preventScroll布尔值，该布尔值控制浏览器是否应防止将焦点元素滚动到视图中。目前的支持文件...
shopping-cart
03-27
这个项目的主要重点是设计方面，对前两个项目的React和react-routing-dom很满意。 利用在线线框工具获得最佳外观。 该网页的主题是一个过于自负，极简主义的嘲讽画展，这为我提供了借口扫除DSLR相机上的灰尘。 与...
Book-Review
03-22
任务的重点： JavaScript DOM操作 处理表格（书评表格） 创建对象 编辑和删除书评 会话和本地存储 安装 选择绿色的代码按钮 选择HTTPS并复制URL 打开Git Bash。 转到要克隆存储库的目录/文件夹。 要克隆存储库，请...
详解vuejs之v-for列表渲染
12-29
Vue.js 的核心是一个响应的数据绑定系统，它让数据与DOM保持同步非常简单 如下列表展示，当我们从后端接口或者json文件使用ajax获取数据之后现实到页面，我们有n中方式去把数据渲染到页面 1.使用js的for循环去遍历...
重点讲讲javascript的使用
最新发布
03-18
以下是JavaScript的一些重点使用方面： 1. 变量和数据类型：JavaScript中的变量可以用来存储各种类型的数据，包括数字、字符串、布尔值等。它使用动态类型，意味着变量的类型可以在运行时改变。 2. 条件语句和循环...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值