day06_JS事件

最新推荐文章于 2024-09-08 19:46:36 发布

qq_37783111

最新推荐文章于 2024-09-08 19:46:36 发布

阅读量147

点赞数 1

分类专栏： # web前端千峰python学习笔记

本文链接：https://blog.csdn.net/qq_37783111/article/details/107922757

版权

千峰python学习笔记同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

web前端

4 篇文章 0 订阅

订阅专栏

一、事件的概念

1、事件的概念

在JS中的事件是：用户在页面上操作，然后我们要调用函数来处理。

事件触发：用户在页面上操作 就是事件触发

2、事件的模式

内联模式

直接在HTML标签中添加事件

<body>
    <input type='button' value='按钮' onclick='alert("hello");' />
    <!-- 执行自定义的JS函数 -->
    <input type='button' value='按钮' onclick='btnClick();' />
</body>

脚本模式

将JS代码和HTML代码分离，符合代码规范

<body>
    <script type="text/javascript">
        var box = document.getElementById('box');
        // 添加方式一 通过匿名函数，直接触发对应的代码（推荐）
        box.onclick = function(){
            console.log('hello world');
        }
        // 添加方式二：通过指定的函数名赋值方式 来执行函数
        box.onclick = func;
        function func(){
            console.log('hello world');
        }
        
    </script>
</body>

3、事件的组成

完整事件由三部分组成：

触发事件的元素节点对象
事件处理函数
事件执行函数

所有事件处理函数都会有两个部分组成：on+事件类型

二、事件的分类

1、鼠标事件

鼠标事件	描述
click	当单击鼠标按钮并在松开时触发
dbclick	当双击鼠标按钮时触发
mousedown	当按下了鼠标还未松开时触发
mouseup	释放鼠标按钮时触发
mouseover	当鼠标移入某个元素的那一刻触发
mouseout	当鼠标刚移出某个元素的那一刻触发
mousemove	当鼠标指针在某个元素上移动时触发
mouseenter	当鼠标移入某个元素的那一刻触发
mouseleave	当鼠标刚移出某个元素的那一刻触发

mouseover和mouseenter的区别

mouseover，元素的子元素的移入也会触发事件

mouseenter：元素的子元素的移入不会触发事件

mouseout：元素的子元素的移出也会触发事件

mouseleave：元素的子元素的移出不会触发事件

循环中事件的下标

在JS事件中，this表示触发事件的元素节点对象

不用this，如果用for循环定义事件会产生bug

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<img src="img/1.jpg" alt="" >
		<img src="img/2.jpg" alt="" >
		<img src="img/3.jpg" alt="" >
		<hr >
		<img src="img/1.jpg" alt="" id='show'>
		<hr >
		<script type="text/javascript">
			var show = document.getElementById('show');
			var imgs = document.getElementsByTagName('img');
			var srcs = ["img/1.jpg","img/2.jpg","img/3.jpg"];
			for(var i=0;i<imgs.length-1;i++){
				imgs[i].onclick = function(){
					// 代码执行先后顺序的bug
					// show.src = srcs[i];    //bug的产生
					// 因为触发的时候i已经循环到3了 for循环已经执行完了
					show.src = this.src;
				}
			}
			
			// 第二种解决bug的方法
			// for(var i=0;i<imgs.length-1;i++){
			// 	imgs[i].index = i;
			// 	imgs[i].onclick = function(){
			// 		show.src = srcs[this.index];
			// 	}
			// }
		</script>
	</body>
</html>

2、键盘事件

在键盘上按下键时触发的事件

键盘事件	描述
keydown	当用户按下键盘上某个键触发，如果按住不放，会重复触发
keypress	当用户按下键盘上字符键触发，如果按住不放，会重复触发
keyup	当用户释放键盘上的某个键触发

3、HTML事件

HTML事件	描述
load	当页面完全加载后触发
unload	当页面完全卸载后触发
select	当用户选择文本框后的内容触发
change	当文本框内容改变且失去焦点后触发
focus	当页面或者元素获得焦点时触发
blur	当页面或元素失去焦点时触发
scroll	当用户滚动带滚动条的元素时触发

三、事件的对象

1、事件的对象是什么？

event对象是在触发事件时，浏览器会通过函数把事件对象作为参数传递过来

<body>
   <script type="text/javascript">
       var box = document.getElementById('box');
       box.onclick = function(event){
           console.log(event);
       }
    </script>
</body>

2、事件对象的属性

2.1 button鼠标属性

值	说明
0	表示主鼠标按钮（鼠标左键）
1	表示中间的鼠标按钮（鼠标滚轮）
2	表示次鼠标按钮

<body>
   <script type="text/javascript">
       var box = document.getElementById('box');
       box.onclick = function(event){
           console.log(event.button);
       }
    </script>
</body>

2.2 坐标属性

属性	说明
clientX	浏览器可视区域的x坐标
clientY	浏览器可视区域的y坐标
pageX	浏览器内容区域的x坐标
pageY	浏览器内容区域的y坐标
screenX	显示器屏幕的x坐标
screenY	显示器屏幕的y坐标
offsetX	鼠标点击的元素位置距离元素左边界的x坐标
offsetY	鼠标点击的元素位置距离元素左边界的y坐标

2.3 键盘事件的组合键

属性	说明
shiftKey	判断是否按下了shift键
ctrlKey	判断是否按下了ctrl键
altKey	判断是否按下了alt键

2.4 编码属性

keyCode

所有按键在发生keydown和keyup事件时，event对象的keycode属性中会包含一个代码，与键盘上一个特定的键对应，对数字字母键，keyCode属性的值与ASCII码中对应，但是字母键的编码均为大写字母的编码

charCode

使用keypress事件才会得到charCode，区分大小写

也可以使用String.fromCharCode()将编码转换成实际的字符

四、事件流

事件流是描述的从页面接收事件的顺序，具体是隧道式获取，冒泡式触发。

事件流包括两种模式：冒泡和捕获。

1、阻止事件冒泡

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#container{
				height: 400px;
				width: 400px;
				border: 1px red solid;
			}
			#box1{
				height: 200px;
				width: 200px;
				border: 1px solid green;
			}
			#box2{
				height: 100px;
				width: 100px;
				border: 1px solid blue;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="box1">
				<div id="box2">
				</div>
			</div>
		</div>
		<script type="text/javascript">
			container = document.getElementById('container');
			box1 = document.getElementById('box1');
			box2 = document.getElementById('box2');
			container.onclick = function(){
				console.log('container click');
			}
			box1.onclick = function(){
				console.log('box1 click');
			}
			box2.onclick = function(event){
				console.log('box2 click');
			}
		</script>
	</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SnRgXonT-1597147995702)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20200811194233262.png)]

这是以上代码执行的结果
按box2  控制台由内而外输出

阻止事件冒泡的方法是：停止传播  event.stopPropagetion();
在指定不想在继续传递事件的节点的事件执行函数中使用

2、事件监听器

2.1 添加事件监听器

box.addEventListener('click',func,false)
第一个参数：事件名称
第二个参数：事件执行函数名称
第三个参数：是否使用捕捉，反向冒泡

2.2 移除事件监听器

box.removeEventListener('click',func)

3、阻止右键菜单

想要创建自己的右键菜单，则需要先阻止默认的右键菜单

<script type="text/javascript">
    document.oncontextmenu = function(){
        console.log('右键被按下');
        return false;
    }
</script>

五、拖拽

1、实现拖拽相关的三大事件

onmousedown onmousemove onmouseup

2、实现拖拽思路

给目标元素添加onmousedown事件

在鼠标按下的瞬间，记录鼠标所在位置与目标元素左边界的距离disX，以及与上边界的disY
当第一步发生之后，就给document添加onmousemove事件，

不断刷新目标元素的位置
在第二步发生之后，给document添加onmouseup事件，

取消onmousemove事件

<script>
    onload = function() {
    var box = document.getElementById("box");
    //鼠标按下
    box.onmousedown = function(evt) {
        var e = evt || event;
        //计算鼠标位置与div左边和上边的距离
        var disX = e.offsetX;
        var disY = e.offsetY;
        //鼠标移动
        document.onmousemove = function(evt) {
            var e = evt || event;
            box.style.left = e.clientX - disX + "px";
            box.style.top = e.clientY - disY + "px";
        }
        //鼠标松开
        document.onmouseup = function() {
            document.onmousemove = null;
            document.onmouseup = null;
        }
    }
}

</script>