JS事件

最新推荐文章于 2023-06-27 17:18:45 发布
最新推荐文章于 2023-06-27 17:18:45 发布
阅读量1.3k 收藏 3
点赞数 4
分类专栏： 笔记 文章标签： css javascript css3 html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45604710/article/details/104878529
版权

一、什么是事件

1、是指用户在某事务上由于某种行为所执行的操作
2、事件的要素
事件源：是指那个元素引发的事件，如：a标签、div标签
事件：事件是指执行的动作，如：单击、双击等
事件驱动程序：即执行的结果，如：单击button标签所执行的函数

二、事件的绑定

1.行内事件绑定函数
定义事件函数，在元素的事件上调用函数，此方式一个事件只能绑定一个函数

<button οnclick="foo()"></button>
		<script type="text/javascript">
			function foo(){
			  console.log("点击事件");
			}
		</script>

2.脚本中绑定匿名函数

<button id="btn"></button>
		<script type="text/javascript">
			
			var btn = document.getElementById("btn");
			btn.onclick = function(){
			  console.log("点击事件");
			}
			
		</script>

3.用 addEventListener() 来绑定事件监听函数

addEventListener语法：
elementObject.addEventListener(eventName,handle,useCapture);

参数 obj 为点击的元素对象，ev为事件类型注意要去掉事件的on，只写 click、dblclick、mouseover这样的事件，fn为事件运行的函数。

elementObject：DOM对象（即DOM元素 ）

eventName：事件名称。注意，这里的事件名称没有“ on ”，如鼠标单击事件 click ，鼠标双击件 doubleclick ，鼠标移入事件 mouseover，鼠标移出事件 mouseout 等

handle：事件句柄函数，即用来处理事件的函数。

useCapture：Boolean类型，是否使用捕获，一般用false。

<button id="btn"></button>
		<script type="text/javascript">
			
			var btn = document.getElementById("btn");
			btn.addEventListener("click",function(){
			  console.log("点击事件");
			})
			
		</script>

特点：
1、行内绑定：绑定函数是唯一的，可以在调用的时候传入参数，但参数是固定的值，不建议使用
2、在脚本中使用onxxxx绑定函数：可以绑定多个函数，但是后面绑定的函数会替换掉前面的函数，最终只会执行最后一个，直接给引用的方式不能传参，如果要传参必须使用匿名函数，在匿名函数中调用事件的函数并传参。
3、使用addEventListener:可以绑定多个函数，并且多个函数依次执行，如果在传参与2的方式相同

三、DOM的常用事件与基本操作

1、鼠标移动事件
•鼠标移动事件包括鼠标移入、移出、和移动事件
•移入： onmouseover
•移出： onmouseout
•移动： onmousemove

<button id="btn"></button>
		<script type="text/javascript">
			var box = document.getElementById("box");		
			//鼠标移入
			box.onmouseover = function(){
				console.log("鼠标移入");
			}
			//鼠标移动
			box.onmousemove = function(){
				console.log("鼠标移动");
			}
			//鼠标移出
			box.onmouseout = function(){
				console.log("鼠标移出");
			}			
		</script>

例题：鼠标的拖拽效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width: 100px;
				height: 100px;
				background: red;
				position: absolute;
	            left: 0;
	            top: 0;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<!--<button id="btn">回放</button>-->
		</div>
		
		<script type="text/javascript">
			// 选中元素之中让元素发生跟随鼠标移动的行为;
	        // 1. 鼠标按下 :  拖拽开始;
	        // 2. 鼠标移动 :  拖拽进行中;
	        // 3. 鼠标抬起 :  拖拽结束;
	        
	        //绑定id名为box的div
	        var box = document.getElementById("box");
	        //判断是否开启状态--拖拽默认没有开始
	        var drag_start = false;
	        //因为当鼠标按下的时候，会需要到左上的坐表
	        var offset_x = null;
	        var offset_y = null;
	        
	        //1. 鼠标按下 :  拖拽开始
	        box.onmousedown = function( evt ){
	        	//console.log("拖拽开始");
	        	drag_start = true;
	        	
	        	var e = evt || event;	        	
	        	//获取鼠标按下时,距离元素边框的x轴和y轴的位置
	        	offset_x = e.offsetX;
	        	offset_y = e.offsetY;
	        	
	        }
	        
	        // 2. 鼠标移动 :  拖拽进行中;
	        //鼠标移动，就必须用到鼠标的位置，就必须使用到事件对象，则创建evt
	        document.onmousemove = function( evt ){
	        	//console.log("拖拽进行中");
				//如果拖拽默认没有开始，那么后边的代码不执行
	        	if( drag_start === false ){ return false }
	        	
	        	var e = evt || event;
	        	//给box设置x,y值
	        	box.style.left = e.clientX - offset_x +"px";
	        	box.style.top = e.clientY - offset_y +"px";
	        	
	        }
	        
	        
	        // 3. 鼠标抬起 :  拖拽结束;
	        box.onmouseup = function(){
	        	//console.log("拖拽结束");
	        	//拖拽结束drag_start = false
	        	drag_start = false;
	        }      
		</script>
	</body>
</html>

2、鼠标位置的获取
•鼠标的位置可以通过事件对象获取
•要获取事件对象，必须在事件函数中定义形参，在调用函数时传入”event”对象

		<button id="btn"></button>
		<script type="text/javascript">
			
			var box = document.getElementById("box")
			box.onclick = function( evt ){
				var e = evt || event;
				console.log(e);
			}
			
		</script>
属性名描述
clientX/clientY事件发生的时候，鼠标相对于浏览器窗口可视文档区域的左上角的位置；在DOM标准中，这两个属性值都不考虑文档的滚动情况，也就是说，无论文档滚动到哪里，只要事件发生在窗口左上角，clientX和clientY都是 0，所以在IE中，要想得到事件发生的坐标相对于文档开头的位置，要加上document.body.scrollLeft和 document.body.scrollTop
offsetX,offsetY事件发生的时候，鼠标相对于源元素左上角的位置
pageX,pageY检索相对于父元素鼠标水平坐标的整数
screenX、screenY鼠标指针相对于显示器左上角的位置，如果你想打开新的窗口，这两个属性很重要

例题：一个跟随鼠标移动的效果

		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background: yellow;
				position: absolute;
			}
		</style>
		<div id="box"></div>
		<script type="text/javascript">
			window.onload = function(){

				document.onmousemove = function( evt ){
					var e = evt || event;
					var oDIV = document.getElementById("box");
					var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
					var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;
					oDIV.style.left = e.clientX + scrollLeft + "px";
					oDIV.style.top = e.clientY + scrollTop + "px";
					
					
				}
			}
		</script>

扩展效果：一连串元素跟随鼠标效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 50px;
				height: 50px;
				background: red;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div></div><div></div><div></div><div></div><div></div>
		<div></div><div></div><div></div><div></div><div></div>
		<div></div><div></div><div></div><div></div><div></div>
		<div></div><div></div><div></div><div></div><div></div>
		<div></div><div></div><div></div><div></div><div></div>
		<script type="text/javascript">
			window.onload = function(){
				var oDIV = document.getElementsByTagName("div");
				document.onmousemove = function( evt ){
					var e = evt || event;
					for(var i = oDIV.length - 1 ; i > 0 ; i --){
	                    oDIV[i].style.left = oDIV[i - 1].style.left;
	                    oDIV[i].style.top = oDIV[i - 1].style.top;
                	}
                oDIV[0].style.left = e.clientX + "px";
                oDIV[0].style.top = e.clientY + "px";
				}
			}
		</script>
	</body>
</html>

3.按键事件的处理
(1).事件与描述：
onkeydown----某个键盘的键被按下
onkeypress-—某个键盘的键被按下或按住
onkeyup-----某个键盘的键被松开
(2).事件对象的属性
属性 与描述
altKey:返回当事件被触发时，“ALT” 是否被按下。
ctrlKey :返回当事件被触发时，“CTRL” 键是否被按下。
shiftKey:返回当事件被触发时，“SHIFT” 键是否被按下。
keyCode/which:对于 keypress 事件，该属性声明了被敲击的键生成的Unicode 字符码。对于 keydown 和 keyup 事件，它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。

按键示例： 聊天对话框

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>无标题文档</title>
	<style type="text/css">
		*{
			font-size: 14px; 
			padding:0; 
			margin:0;
		}
		.main{
			position: relative;
			margin: 20px auto;
			border: 1px solid steelblue;
			width: 430px;
			height: 400px;
		}
		.msgInput{
			display: block;
			width: 406px;
			height: 60px;
			margin: 10px auto;
			
		}
		.sendbtn{
			position: absolute;
			width: 100px;
			height: 29px;
			bottom: 5px;
			right: 10px;
		}
		.content{
			list-style: none;
			width: 410px;
			height: 280px;
			margin: 5px auto;
			border: 1px dotted #D1D3D6;
			overflow-y: scroll;
		}
		.msgContent{
			width:auto;
			max-width: 250px;
			height: auto;
			word-break: break-all;
			margin: 5px;
			padding: 3px;
			border-radius: 5px;
		}		
		.content .left{
			float: left;
			text-align: left;
			background-color: lightgrey;
		}
		.content .right{
			float: right;
			text-align: right;
			background-color: yellowgreen;
		}
	</style>
</head>
<body>
	<div id="main" class="main">
		<ul id="content" class="content">
			<li class="msgContent left">hello?</li>
			<div style="clear: both;"></div>
			<li class="msgContent left">hello</li>
			<div style="clear: both;"></div>
			<li class="msgContent right">hi</li>
			<div style="clear: both;"></div>
			<li class="msgContent left">hehe</li>
			<div style="clear: both;"></div>
			<li class="msgContent left">goodbye</li>
			<div style="clear: both;"></div>
			<li class="msgContent right">。。。。</li>
			<div style="clear: both;"></div>
			<li class="msgContent right">sdfasdsadfassdfsdfsdfdsfsdfsdfsdfdfasdffasdfasfdasd fasd fasd fasdfasdfasdf</li>
		</ul>
		<textarea id="msg_input" class="msgInput"></textarea>
		<button id="sendbtn" class="sendbtn">发送</button>
	</div>
</body>
<script>
	var sendbtn_ele = document.getElementById("sendbtn");
	var msg_ipt_ele = document.getElementById("msg_input");
	var content_ele = document.getElementById("content");
	// 添加事件 : 
	sendbtn_ele.onclick = function(){
		sendMsg();
	}
	// alt + 回车;
	msg_ipt_ele.onkeydown = function( evt ){
		var e = evt || event;
		var keyCode = e.which || e.keyCode;
		// 按下alt键的同时 按下回车
		if( e.altKey && keyCode === 13){
			sendMsg();
		}
	}
	// 信息发送功能; => DOM操作;
	// 所有输入内容都在textarea里面所以我们必须要先去进行数据的获取;
	function sendMsg(){
		// 1. 取值;
		var ipt_value = msg_ipt_ele.value;
		// 2. 创建元素;
		var li  = document.createElement("li");
		var div = document.createElement("div");
		// 3. 建立 元素的基本结构;
		li.className = "msgContent right"
		// li.innerHTML = ipt_value;
		li.innerText = ipt_value;
		div.style.clear = "both";
		// 4. 元素插入;
		content_ele.appendChild(div);
		content_ele.appendChild(li);
		// 5. 用户体验优化;
		li.scrollIntoView();
		// 6. 清空输入框之内的内容;
		msg_ipt_ele.value = "";
		// 7. 让输入框获取焦点 : 
		// 获得焦点;
		msg_ipt_ele.focus();
		// 失去焦点;
		// msg_ipt_ele.blur();
		// 选中文字;
		// msg_ipt_ele.select();
	}
</script>
</html>
阿潼
关注
  • 4
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript事件学习小结（三）js事件对象
10-22
主要介绍了JavaScript事件学习小结（三）js事件对象的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
js中的event详解
woxingx的博客
01-07 1万+
event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等。 event对象只在事件发生的过程中才有效。 event的某些属性只对特定的事件有意义。比如，fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义。 event中的一些经常用到的属性： altKey, button, cancelBubb
js中事件对象event
热门推荐
冰雪为融的博客
03-06 1万+
一、Event对象 Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。 事件通常与函数结合使用，函数不会在事件发生前被执行！ 当一个事件发生的时候，和当前这个对象发生的这个事件有关的一些详细信息（包括导致事件的元素、事件的类型、以及其它与特定事件相关的信息等。这个对象是在执行事件时，浏览器通过函数传递过来的。）都会被临时保存到一个指定的地方...
ethers js监听合约事件
weixin_36058228的博客
01-03 1608
contract.on有两个参数，一个是要监听的事件名称"eventName"，需要包含在合约abi中；另一个是我们在事件发生时调用的函数。
vue.js 中fnname($event--js原生事件的event对象)
tangcc的博客
04-15 941
在调用事件时传$event--（固定写法）来捕获原生DOM对象point:    1.target--指当前触发的对象    2.currentTarget--指当前绑定事件的对象e.g:model:js:
element.addEventListener DOM事件模型
梦想狂奔的专栏
12-18 1721
https://developer.mozilla.org/zh-CN/docs/DOM/element.addEventListener 概述 addEventListener() registers a single event listener on a single target. The event target may be a single element in
JS 事件委托
似水流年QC的博客
06-27 2914
JavaScript事件委托（Event delegation）又叫事件代理，是一种在父元素上监听事件，然后通过事件冒泡机制来处理子元素的事件的技术。通过事件委托，可以避免为每个子元素都绑定事件处理程序，提高性能并简化代码。事件委托的基本原理是将事件处理程序绑定在父元素上，然后通过事件冒泡捕获到子元素的事件触发。这样，无论子元素是现有的还是动态生成的，它们的事件都会被父元素捕获并处理。
javaScript事件轮询
weixin_61721830的博客
02-03 1148
当主线程的同步任务执行完毕之后，开始执行微任务队列的所有微任务，微任务执行完成，执行宏任务队列里面的所有宏任务，执行完成主线程询问任务队列是否还有等待的任务，如果有的话则继续进入主线程执行，以上步骤的循环重复执行就是事件轮询，然后继续执行主线程任务，当异步线程执行完毕，判断异步任务的类型，异步任务可分为宏任务和微任务，不同的任务进入不同的队列，等待调用，首先主线程读取js代码，此时是同步环境，当主线程检测到异步操作时，会将异步代码交给其他异步线程处理，常见的宏任务：定时器，微任务:Promise。
JavaScript事件监听
CSPsy的博客
03-06 3281
JavaScript事件监听 常用的事件监听 DOM0级事件监听 DOM2级事件监听 onclick addEventListener
JS事件三要素
Revin的博客
01-08 1384
JS事件三要素
javascript事件思维导图
12-30
全面，直观javascript的事件
js事件监听机制(事件捕获)总结
12-04
在前端开发过程中我们经常会遇到给页面元素添加事件的问题，添加事件的js方法也很多，有直接加到页面结构上的，有使用一些js事件监听的方法，由于各个浏览器对事件冒泡事件监听的机制不同，le浏览器只有事件冒泡，...
JavaScript事件学习小结(二)js事件处理程序
10-22
主要介绍了JavaScript事件学习小结(二)js事件处理程序的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
JavaScript 事件冒泡应用实例分析
10-29
在一些传统的小型WEB应用开发过程中，JavaScript通常只是拿来做表单验证而以，所以你很少会遇到因为JavaScript事件冒泡而影响功能的实现情况，又或者事件冒泡对最终实现效果影响不大，可忽略。
javascript事件代理
过客如期的博客
04-02 1815
一，事件介绍 1.事件用来实现js和html之间交互，网页中的每个元素都有一些事件属性可以触发 JavaScript 函数(下文的事件处理函数）。 2.一个完整的事件包含: 事件源 (html元素） 事件类型 (click,mouseover……) 事件处理程序-侦听器 (js回调函数) 二，事件流 1.事件流分为三种：事件冒泡，事件捕获，dom事件流。 2.事件冒泡：事件开始时由最具体的元素 (...
js事件触发操作实例分析
10-16
主要介绍了js事件触发操作,结合实例形式分析了javascript事件触发机制原理、使用方法及相关操作注意事项,需要的朋友可以参考下
javascript事件侦听器
01-08
javascript事件侦听器 事件侦听器就是用来处理事件的，可以接收事件携带的信息，并在接收的该事件后执行特定的代码。 那么这个事件侦听器到底能有什么作用的，现在我就来给大家介绍下事件侦听器的一个用法： 在...
JavaScript 事件系统
12-08
事件流 JavaScript 的事件是以一种流的形式存在的，一个事件会有多个元素同时响应。有时候这不是我们 想要的，我们只需要某个特定的元素响应我们的绑定事件就可以了。 事件分类 捕获型事件(非IE)、冒泡型事件(所有...
JavaScript事件
最新发布
09-09
JavaScript事件是指在Web页面中，通过JavaScript代码来侦测和响应用户的操作或系统的事件。事件可以是用户的鼠标点击、键盘按键、页面加载完成等等。事件驱动式是指JavaScript代码通过侦测到这些事件，并执行相应的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值