事件知识点总结 --初学JS

已于 2022-06-25 11:16:53 修改
阅读量1.3k 收藏
点赞数 1
分类专栏： JS知识点总结 文章标签： javascript js
于 2022-04-26 22:07:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_49907632/article/details/124437368
版权

目录

一、事件的介绍

1.事件是什么

2.事件的对象

3.事件的冒泡

4.事件的绑定

5.事件的传播

二、常用的事件

1.鼠标事件

2.滚轮事件

3.键盘事件

三、总结

一、事件的介绍

1.事件是什么

简单来说，事件就是用户和浏览器之间的交互行为

比如：点击鼠标、鼠标移动、关闭窗口......

2.事件的对象

在事件对象中封禁了当前事件相关的一切信息 比如：鼠标的坐标 键盘哪个建被按下 鼠标滚轮滚动的方向等等，

当事件的响应函数被触发时 浏览器每次都会将一个事件对象作为实参传递进响应函数

这里举个例子：

这里涉及到 onmousemove事件，该事件会在鼠标移动时触发 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #area{
            width: 200px;
            height: 100px;
            border: 2px solid black;
        }
        #show{
            width: 200px;
            height: 50px;
            margin-top: 20px;
            border: 2px solid black;
        }
    </style>
    <script>
        window.onload=function(){
            var area=document.getElementById("area");
            var show=document.getElementById("show");
            //onmousemove 该事件会在鼠标移动时触发 
             //这里的event即用来传递事件的对象，用来获取触发该事件时，鼠标的位置
            area.onmousemove=function(event){
                //clientX可以获取鼠标指针的水平位置 clientY 垂直位置               
                var x=event.clientX;
                var y=event.clientY;
                show.innerHTML="x="+x+",y="+y;          
            }
        }
    </script>
</head>
<body>
    <div id="area"></div>
    <div id="show"></div>
</body>
</html>

3.事件的冒泡

 事件的冒泡简单来说可以是，其事件被触发时，其祖先相同的事件也会被触发

下面举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
        #sp{
            background-color: aquamarine;
        }
    </style>
    <script>
        window.onload=function(){
            var box1=document.getElementById("box1");
            box1.onclick=function(event){
                alert("我是div")
            }
            var sp=document.getElementById("sp")
            sp.onclick=function(event){
                alert("我是span")
            }
            document.body.onclick=function(event){
                alert("我是body")
            }
        }
    </script>
</head>
<body>
    <div id="box1">我是div
        <span id="sp">我是span</span>

    </div>
</body>
</html>

这里只要点击子元素span，同样div body的事件也会触发。

对于日常开发中，大部分冒泡是有用的，如果不希望发生事件冒泡也可以取消冒泡，

可以将事件对象的cancleBubble设置为true,即可取消冒泡。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
        #sp{
            background-color: aquamarine;
        }
    </style>
    <script>
        window.onload=function(){
            var box1=document.getElementById("box1");
            box1.onclick=function(event){
                alert("我是div")
                //可以将事件对象的cancleBubble设置为true,即可取消冒泡
                event.cancelBubble=true;

            }
            var sp=document.getElementById("sp")
            sp.onclick=function(event){
                alert("我是span")
                event.cancelBubble=true;
            }
            document.body.onclick=function(event){
                alert("我是body")
                event.cancelBubble=true;
            }
        }
    </script>
</head>
<body>
    <div id="box1">我是div
        <span id="sp">我是span</span>

    </div>
</body>
</html>

这样再点击子元素时，父元素不会在触发了。

其中一个用处是事件的委派。

事件的委派指将事件统一绑定给元素的祖先元素，这样后代元素上的事件触发时会一直冒泡到

祖先元素，从而通过祖先元素的响应函数来处理事件。

下面举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload=function(){
            var btn=document.getElementById("btn");
            var u=document.getElementById("u");
            btn.onclick=function(){
                var li=document.createElement("li");
                li.innerHTML="<li id='l'><a href='#' class='link'>新超链接</a>";
                u.appendChild(li)
            }
            //为所有的a标签绑定单击响应函数 
            u.onclick=function(event){
                //为了只保证点到a标签时进行响应
                //target表示事件触发的对象
                //alert(event.target)
                if(event.target.className=="link"){
                    alert("我是ul的响应事件")
                } 
            }

        }
    </script>
</head>
<body>
    <button id="btn">添加超链接</button>
    <ul id="u">
        <li id="l"><a href="javascript:;" class="link">超链接</a></li>
        <li id="l"><a href="javascript:;" class="link">超链接</a></li>
        <li id="l"><a href="javascript:;" class="link">超链接</a></li>

    </ul>
</body>
</html>

这里点击任何一个超链接，都会触发ul的响应事件，这里就不用再一个个区给a标签绑定了。

4.事件的绑定

方法一：

使用 对象.事件 = 函数 的形式绑定响应函数， 

但是有个缺点它只能同时为一个元素的一个事件绑定一个响应函数，

不能绑定多个，如果绑定了多个，则后边会覆盖掉前边的

例如：

btn01.onclick = function(){
	alert(1);
};

方法二：

利用addEventListener()方法

 - 通过这个方法也可以为元素绑定响应函数

 - 参数：

1.事件的字符串，不要on

2.回调函数，当事件触发时该函数会被调用

3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false

使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，

这样当事件被触发时，响应函数将会按照函数的绑定顺序执行

例如：

btn01.addEventListener("click",function(){
        alert(1);
},false);

5.事件的传播

这里了解即可

关于事件的传播网景公司和微软公司有不同的理解

微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，

 然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。

网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，

然后在向内传播给后代元素

W3C综合了两个公司的方案，将事件传播分成了三个阶段

1.捕获阶段

在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件

2.目标阶段

事件捕获到目标元素，捕获结束开始在目标元素上触发事件

3.冒泡阶段

 事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件

如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true

一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false

二、常用的事件

1.鼠标事件

这里有三个常用的属性

鼠标按下 onmousedown

鼠标移动 元素跟着移动 onmousemove

鼠标松开 元素固定在当前位置 onmouseup

与之相关的方法：

clientX和clientY

用于获取鼠标在当前的可见窗口的坐标

pageX和pageY

可以获取鼠标相对于当前页面的坐标

screenX和screenY

获取鼠标位置相对于屏幕左上角的坐标

offertX和offerY

获得鼠标位置与目标节点padding的距离

下面是利用鼠标事件的方法做的一个div跟随鼠标拖拽移动的案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
     #box1{
            height: 100px;
            width: 100px;
            background-color: red;
            position: absolute;
        }
    #box2{
            height: 100px;
            width: 100px;
            background-color: rgb(217, 255, 0);
            position: absolute;
            left: 200px;
            top: 200px;
        }
</style>
<script>
    /*
    拖拽box1元素
    1.鼠标按下 onmousedown
    2.鼠标移动 元素跟着移动 onmousemove
    3.鼠标松开 元素固定在当前位置 onmouseup

    */
   window.onload=function(){
       var box1=document.getElementById("box1");
    //    1.鼠标按下 onmousedown
       box1.onmousedown=function(event){
        //解决 点击鼠标一直在左上角的问题
        //div的偏移量 鼠标.clientX-元素.offsetLeft 鼠标.clientY-元素.offsetTop
        var ol=event.clientX-box1.offsetLeft;
        var ot=event.clientY-box1.offsetTop;
        // 2.鼠标移动 元素跟着移动 onmousemove
        document.onmousemove=function(event){
            var left=event.clientX-ol;
            var top=event.clientY-ot;
            box1.style.left=left+"px";
            box1.style.top=top+"px";
        }
        // 3.鼠标松开 元素固定在当前位置 onmouseup
        document.onmouseup=function(){
            //取消document.onmousemove事件
            document.onmousemove=false;
            //取消document.onmouseup事件
            document.onmouseup=false;
        }
        //当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容
        //此时会导致拖拽功能异常，可以通过return false来取消默认行为
        return false;
       }
   }

</script>
<body>
    这是一段文字
    <div id="box1" ></div>
    <div id="box2" ></div>
    
</body>
</html>

2.滚轮事件

常用的方法：

onwheel 获取滑轮滚动事件

与之相关的方法：

wheelDelta 可以获取鼠标滚轮滚动的方向（火狐使用detail）

它会返回一个值，这个值不看大小，只看正负

获取的正值往上 负值往下

下面是一个div根据滚轮变长变短的案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
    <script>
        window.onload=function(){
            var box1=document.getElementById("box1");
            //onwheel获取滑轮滚动事件
            box1.onwheel=function(event){
                //wheelDelta 获取的正值往上 负值往下
                //火狐使用detail
               
                if(event.wheelDelta>0){
                    box1.style.height=box1.clientHeight+10+"px";
                }else{
                    box1.style.height=box1.clientHeight-10+"px";
                }
                //当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动
                //这是浏览器的默认行为 如果不希望发生 可以return false取消

                return false;
                
            }
        }
    </script>
</head>
<body style="height: 1000px;">
    <div id="box1" ></div>
    
</body>
</html>

3.键盘事件

键盘事件一般绑定给可以获取到焦点的对象或是document

常用的属性：

onkeydown 按键被按下 一直按事件会连续触发

onkeyup 按键被松开

与之相关的方法：

keycode可以获取按下键盘的编码

altkey ctrlkey shiftkey 可以判断alt ctrl shift是否被按下 若按下返回true反正flase

下面是一个案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			window.onload = function(){
				
				document.onkeydown = function(event){
					
					//判断一个y是否被按下
					//判断y和ctrl是否同时被按下
					if(event.keyCode === 89 && event.ctrlKey){
						console.log("ctrl和y都被按下了");
					}
					
					
				};
				
				/*document.onkeyup = function(){
					console.log("按键松开了");
				};*/
				
				//获取input
				var input = document.getElementsByTagName("input")[0];
				
				input.onkeydown = function(event){
					
					event = event || window.event;
					
					//console.log(event.keyCode);
					//数字 48 - 57
					//使文本框中不能输入数字
					if(event.keyCode >= 48 && event.keyCode <= 57){
						//在文本框中输入内容，属于onkeydown的默认行为
						//如果在onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中
						return false;
					}
					
					
				};
			};
			
			
		</script>
	</head>
	<body>
		
		<input type="text" />
		
	</body>
</html>

还有一个比较常见的案例：利用方向键移动div

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
			
		</style>
		
		<script type="text/javascript">
			
			//使div可以根据不同的方向键向不同的方向移动
			/*
			 * 按左键，div向左移
			 * 按右键，div向右移
			 * 。。。
			 */
			window.onload = function(){
				
				//为document绑定一个按键按下的事件
				document.onkeydown = function(event){
					event = event || window.event;
					
					//定义一个变量，来表示移动的速度
					var speed = 10;
					
					//当用户按了ctrl以后，速度加快
					if(event.ctrlKey){
						speed = 500;
					}
					
					/*
					 * 37 左
					 * 38 上
					 * 39 右
					 * 40 下
					 */
					switch(event.keyCode){
						case 37:
							//alert("向左"); left值减小
							box1.style.left = box1.offsetLeft - speed + "px";
							break;
						case 39:
							//alert("向右");
							box1.style.left = box1.offsetLeft + speed + "px";
							break;
						case 38:
							//alert("向上");
							box1.style.top = box1.offsetTop - speed + "px";
							break;
						case 40:
							//alert("向下");
							box1.style.top = box1.offsetTop + speed + "px";
							break;
					}
					
				};
				
			};
			
			
		</script>
	</head>
	<body>
		<div id="box1"></div>
	</body>
</html>

三、总结

这次我初次接触js事件,跟着视频做了简单的学习，为了防止遗忘做了初步总结，把事件的轮廓做了一个大致的疏通，不足之处还请包涵，后续经过深层次的学习也会对其进行补充。

最新事件知识点已经更新：JS事件总结超详细-思维导图_时雨.`的博客-CSDN博客

时雨.`
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
js基础知识点总结-入门级别
05-31
### JavaScript基础知识点总结—入门级别 #### 一、JavaScript简介 JavaScript是一种主要应用于网页开发的脚本语言，它能够在客户端运行。通过JavaScript可以为网页添加动态效果，改善用户体验，例如实现网页元素...
js-鼠标滚轮
weixin_47295886的博客
10-26 1765
/但是火狐不成功，因为取消默认行为在火狐中使用addEventListener()方法绑定响应函数u，取消默认行为的时候不能使用return false;---需要使用event.preventDefault()取消默认行为。火狐需要使用：DOMmouseScroll来绑定滚动事件，注意该事件需要通过。向下滚动：-120---值不看大小--只看正负。//当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动。第一步：知道滚轮有没有滚动：鼠标滚轮事件--)：鼠标滚轮滚动的方向——不支持火狐。
32js学习第十五天DOM鼠标点击事件
liuyaoshun123456的博客
04-27 353
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>01DOM的鼠标事件</title> <style> * { margin: 0; padding: 0; } .box { width: ...
JS事件属性总结【鼠标 / 键盘 / 表单】
前端、python爱好者
10-20 759
前言： JS事件通常是指用户通过鼠标或者键盘以及其他方式对浏览器或浏览器网页中的某些节点或者元素进行操作，是用户与浏览器交互最为常见的方式，主要包含以下事件： 1、鼠标事件 2、键盘事件 3、表单事件 鼠标事件 下列代码使用了body作为点击的元素，需要在body中加入一个元素节点或文字节点，为方便区别比较，事件相近的做到了一起，常用的鼠标事件前加了 ✦ ✦1、onclick onclick是最常见的鼠标事件，由用户使用鼠标左键点击后触发相应的函数方法 document.body.onclick = fun
js 滚轮事件
qq_35385241的博客
04-14 1517
js滚轮事件 目前不同浏览器的滚轮事件如下： 事件 浏览器 wheel Chrome(31+), FF(17+), IE(9+) mousewheel Chrome, IE(6+), Opera, Safari MozMousePixelScroll FF(3.5 only!) (2010-2013) DOMMouseScroll FF(0.9.7+) since 2003 因此通用的滚轮事件有3个：wheel/mousewheel/DOMMouseScroll 为此可以封装
onWheel 和 onScroll 区别
独碟的博客
07-19 5963
onwheel 事件在鼠标滚轮在元素上下滚动时触发。同样可以在触摸板上滚动或放大缩小区域时触发（如笔记本上的触摸板）。 onscroll 事件在元素滚动条在滚动时触发。滚动条必须存在，否则不会触发。无论以那种方式，只要滚动条滚动，事件都会触发。触发方式：鼠标滚轮，鼠标拖动，键盘上下键，或者设置的滚动函数，如 scrollTo，scrollBy，scrollByLines, scrollByPag...
JavaScript入门系列之知识点总结
10-22
本文将总结JavaScript的入门知识点，帮助初学者快速理解和掌握这门语言。 首先，我们了解JavaScript的基本特性。JavaScript是一种动态类型语言，这意味着变量的类型可以在运行时改变。它也是弱类型语言，允许变量在...
jQuery基础知识点总结(必看)
10-22
在本文中，我们将深入探讨 jQuery 的基础知识点，帮助开发者更好地理解和运用这一强大的工具。 1. **jQuery 入口函数与 JavaScript 入口函数的区别** - **书写个数不同**：JavaScript 的入口函数通常是 `window....
jQuery常用知识点总结以及平时封装常用函数
11-23
本文主要总结了jQuery中的一些常用知识点和自定义函数封装，旨在帮助初学者更好地理解和运用jQuery。 1. **基本选择器与DOM操作** - `$(selector)`：这是jQuery的核心，用于选取DOM元素。例如，`$("p")`会选择所有...
ThreeJS入门指南-城市地图构建案例
最新发布
04-01
#### 知识点概述 本案例旨在通过一个具体的城市地图构建项目，引导初学者逐步掌握ThreeJS的基本用法。ThreeJS是一款基于WebGL的JavaScript 3D库，它让开发者能够轻松地在网页上创建和展示3D图形。本次案例将涵盖...
js-获取小数点后的所有数-onscroll/onwhell-返回顶部
大熊的博客
01-16 81
请问js如何获取小数点后的所有数？ var num = 123.1234567; //var num1 = 123; var str = num.toString().split('.'); //console.log(str[1] != undefined ? str[1] : ''); //console.log(1 + Number(str[1])); js中点击返回顶部 win...
浅谈wheel滚轮事件
Z_Wonderful的博客
10-26 272
浅谈`wheel`滚轮事件，探索`wheelEvent`事件中常用属性的有效性，垂直步进算法（滑动幅度）兼容触摸板多次触发）
Web前端自学记录（十八）DOM&BOM
zqc382750716的博客
04-21 123
DOM&BOM 1.滚轮事件 onmousewheel(onwheel)鼠标滚动的事件，会在滚轮滚动时触发 判断鼠标滚轮滚动的方向 event.wheelDelta 可以获取鼠标滚轮滚动的方向 向上滚120 向下滚-120 wheelDelta这个值我们不看大小只看正负 wheelDelta这个属性火狐中不支持 在火狐中使用event.detail来获取滚动的方向 向上滚-3 向下滚3 当滚轮滚动时，如果浏览器有滚动条，该滚动条会随之滚动 这是浏览器的默认行为，如果不希望发生，则可以取消默认行为
JS鼠标滚轮判断向上还是向下滚动
dengjianma7223的博客
04-18 1496
前言： 在写本篇的时候火狐已经支持最新鼠标滚轮事件的标准，支持统一方法onwhell方法，但是ie11没有支持onwheel方法 1，在火狐下 a，如果绑定事件DOMMouseScroll，document.addEventListener("DOMMouseScroll",wheelHander,false); 　　　则event.detail>0向下滚...
vue图片放大缩小：onwheel
m0_70722541的博客
04-27 1506
vue-photo-preview（放大和缩小、切换上下张等功能）vue-picture-preview（预览和切换上下张功能）viewerjs（放大和缩小、切换上下张等功能）实现图片的放大缩小，可以采用插件。2.在mounted里写放大缩小的方法。1.给img标签绑定一个id。
onscroll事件和onwheel事件的区别
weixin_33701294的博客
05-04 2150
为什么80%的码农都做不了架构师？>>> ...
【js学习笔记-095】----鼠标滚轮事件
Will 的专栏
02-27 2901
鼠标滚轮事件 学习本节时，除Firefox(妈的，firefox终于各色了一把)外所有浏览器都支持“mousewheel”事件，但firefox支持DOMMouseScroll 而DOM3规范草案建议使用名“wheel”替代“mousewheel” 传递“mousewheel”处理程序的事件对象有wheelDeta属性，其指定用户滚动滚轮有多远。远离用户方向一次鼠标滚轮“单击”的wheelDe
js滚轮和键盘事件
weixin_45842954的博客
12-15 1228
滚轮 当鼠标在元素内滚动的时候，根据鼠标的移动方向 使元素的可视高度发生变化 <style> #box1 { width: 100px; height: 100px; background-color: blueviolet; } </style> <script> window.onload = function() {
JavaScript鼠标滚轮控制左右移动
string佳佳的博客
05-10 1528
项目效果： 实现方法： <!DECTYPE html> <html> <head> <meta charset=‘utf-8’> <title>onwheel-test</title> </head> <body> <div id='out' style='width:500px;height:500px;overflow:auto'> &lt
"Web前端知识点总结：HTML标签功能、常用属性及使用场合
Web前端知识点总结中也包括了JavaScript的基础语法、数据类型、运算符、流程控制、函数、对象、DOM操作、事件处理等知识点，这些知识点对于理解和掌握JavaScript编程语言非常重要，可以帮助开发者实现丰富的网页交互...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

时雨.`

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值