JavaScript学习9

最新推荐文章于 2024-08-22 14:32:34 发布

aneyal

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量439

点赞数 1

分类专栏：前端学习文章标签： javascript 前端学习

本文链接：https://blog.csdn.net/aneyal/article/details/123829377

版权

前端学习专栏收录该内容

47 篇文章 2 订阅

订阅专栏

注册事件

给元素添加事件，被称为注册事件或者绑定事件。

注册事件有两种方式：传统方法和方法监听注册

传统方法

传统注册方式都是以on开头的事件，例如onclick

具有唯一性，对于同一个元素同一个实践，只能设置一个处理函数，最后注册的处理函数会覆盖前面注册的处理函数

方法监听注册

W3C推荐方法

使用addEventListener()方法

IE9之前的浏览器不支持，可以使用attachEvent()代替（attachEvent()方法非标准）

对于同一个元素同一个事件可以设置多个监听器

使用：

元素名.addEventListener(type,listener[,useCapture])

type是事件类型字符串，比如click、mouseover，注意这里没有on

listener：事件处理函数，事件发生时，会调用该监听函数

useCapture：可选参数，是一个布尔值，默认false，为true则处于捕获阶段，为false则处于冒泡阶段

!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button>点击</button>
		<script>
			var btn=document.querySelector('button');
			// 方法监听注册事件
			// 点击按钮，弹出弹窗
			btn.addEventListener('click',function(){
				alert('hello');
			})
		</script>
	</body>
</html>

删除事件

对于传统方式注册的事件，使用元素名.事件名=null就可以实现，例如：element.οnclick=null

对于方法监听注册，可以通过元素名.removeEventListener（type,listener[,useCapture]）实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button>点击</button>
		<script>
			var btn=document.querySelector('button');
			// 第一次点击按钮时，弹出弹窗
			btn.addEventListener('click',fn);
			function fn(){
				alert('hello');
				btn.removeEventListener('click',fn);
			}
		</script>
	</body>
</html>

DOM事件流

事件流描述的是从页面中接收事件的顺序

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程就是DOM事件流

分为三个阶段：捕获阶段、当前目标阶段、冒泡阶段

事件对象

事件对象就是写在侦听函数的小括号里面的，可以当形参。

是系统自动创建的，不需要我们创建，但如果要使用，必须在小括号中写event或自己命名

事件对象是我们事件的一系列相关数据的集合，和事件相关

IE6、7、8使用window.event

常见属性和方法：

IE6、7、8中阻止冒泡使用event.cancelBubble=true

事件委托

事件委托：不给每个子节点单独设置事件监听器，而是将事件监听器设置在父节点之上，然后利用冒泡原理影响每个子节点

只操作了一次DOM，效率更高

常用的鼠标事件

禁止鼠标右键显示菜单

//contextmenu主要控制应该何时显示上下文菜单
document.addEventListener('contextmenu',function(e){
    e.preventDefault(); //阻止默认事件
}

禁止鼠标选中

document.addEventListener('selectstart',function(e){
    e.preventDefault(); //阻止默认事件
}

鼠标事件对象

MouseEvent

图片跟随鼠标

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			img{
				position: absolute;
				display: none;
				width: 10px;
				height: 10px;
			}
		</style>
	</head>
	<body>
		<img src="img/i1.jpg"  />
		<script>
			var img=document.querySelector('img')
			document.onmousemove=function(e){
				var x=e.clientX;
				var y=e.clientY;
				console.log(x);
				console.log(y);
				img.style.top=y+'px';
				img.style.left=x+'px';
				img.style.display='block';
			}
		</script>
	</body>
</html>