投稿
  1. 首页
  2. html-js-css

JavaScript学习07-DOM事件高级

code • 2022-5-17 • html-js-css • 阅读 35

JavaScript学习07-DOM事件高级,第1张

目录 注册事件传统方式方法监听方式 删除事件传统方式方法监听方式删除事件兼容性解决 DOM事件流事件流、事件捕获、事件冒泡 事件对象事件对象常见属性方法事件触发对象 e.target 和 this事件类型e.type阻止冒泡 e.cancelBubble （非标准）和 e.stopPropagation() （标准）阻止（禁用）默认事件属性 e.returnValue 和方法 e.preventDefault() 事件委托(代理、委派)常用鼠标事件禁用鼠标右键菜单禁用鼠标选中鼠标事件对象案例：跟随鼠标移动的图片 常用键盘事件键盘事件对象属性

注册事件

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

传统方式

以on开头的事件，比如onclick、onmouseover…
同一个元素同一个事件只能设置一个处理函数，重复设置取最后注册的处理函数

方法监听方式

W3C推荐
addEventListener()
IE9之前不支持，可用attachEvent()代替
同一个元素同一个事件可以注册多个监听器，按注册顺序执行

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

// type 事件类型，比如click,mouseover... 没有on
// listener 事件处理函数，写函数名或者匿名函数
// userCapture 可选参数，是一个布尔值，默认false

<script>
	var btn=document.querySelector('button');
	function func(){
		alert('点击了按钮。。');
	}
	btn.addEventListener('click',function(){
					alert('点击了按钮');
					}  );
	btn.addEventListener('click',func);
script>

元素.attachEvent(eventNameWithOn,callbak);

//eventNameWithOn  事件类型字符串，有on，比如onclick,onmouseover..
//callbak  事件处理函数，函数名或者匿名函数

<script>
	var btn=document.querySelector('button');
	function func(){
		alert('点击了按钮。。');
	}
	btn.attachEvent('onclick',function(){
					alert('点击了按钮');
					}  );
	btn.attachEvent('onclick',func);
script>

事件处理函数如果写成：函数名（），
因为addEventListener第二个参数是函数，这样写传入的就是函数返回值，如果没写return就是undefined

删除事件 传统方式 
元素.οnclick=null;
方法监听方式 
元素.removeEventListener(type, listener, [useCapture]);
元素.detachEvent(eventNameWithOn, callback);
删除事件兼容性解决 
<script>
	function removeEventLisener(element,eventName,fn){
		if(element.removeEventListener){
			element.removeEventListener(element,fn);
		}else if(){
			element.detachEven('on'+eventName,fn);
		}else{
			element['on'+eventName]=null;
		}
	}
script>
DOM事件流 事件流、事件捕获、事件冒泡

事件流：描述页面接收事件的顺序，事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程就是DOM事件流
事件流三个阶段：捕获阶段、当前目标阶段、冒泡阶段
事件捕获：网景最早提出，从DOM最顶层节点开始，逐级向下传播到最具体的元素接收 的过程
事件冒泡：IE最早提出，事件开始时由最具体的元素接收，逐级向上传播到DOM最顶层节点 的过程


注意
（1）JS代码只能执行捕获或冒泡其中一个阶段
（2）onclick 和 attachEvent只能得到冒泡阶段
（3）addEventListener第三个参数写true表示在事件捕获阶段调用事件处理程序，写false或者不写表示在事件冒泡阶段调用事件处理程序
（4）更关注事件冒泡
（5）没有事件冒泡的：onblur , onfocus , onmouseenter , onmouseleave…

<body>
	<div class="father"><div class="son">div>div>
body>
//事件捕获，顶层的先执行
<script>
	var father=document.querySelector('.father');
	var son=document.querySelector('.son');
	father.addEventListener('click',function(){
		alert('father');
	},true);
	son.addEventListener('click',function(){
		alert('son');
	},true);
	//点击father,事件传播：document->html->body->father div->son div
	//先提示father后提示son
script>

//事件冒泡，底层的先执行
<script>
	var father=document.querySelector('.father');
	var son=document.querySelector('.son');
	father.addEventListener('click',function(){
		alert('father');
	});
	son.addEventListener('click',function(){
		alert('son');
	},false);
	//点击father,事件传播：son div->father div->body->html->document
	//先提示son后提示father
script>
事件对象

事件对象代表事件的状态，比如键盘的按键状态，鼠标的位置，鼠标按钮的状态
即事件发生后，跟事件有关的信息集合，有很多属性和方法

<script>
	var div=document.querySelector('div');
	div.addEventListener('click',function(event){
		console.log(event);
	});
script>

上面代码中形参event就是一个事件对象
事件对象只有有了事件才存在，是系统自动创建的，不需要传递实参
事件对象包括事件的一系列相关数据，比如鼠标点击事件有鼠标点击时的坐标
可以自己命名，event , e ,evt…
事件兼容性：IE678通过window.event兼容性的写法，e=e || window.event
event可以是绑定事件的元素，也可以是绑定事件的元素的孩子

<script>
	div.onclick=function(event){}

	div.addEventListener('click',function(event){})
script>
事件对象常见属性方法 事件触发对象 e.target 和 this

e.target返回触发事件的对象，this返回绑定事件的对象

<div style="width=100px;height=100px;background-color:red;">
	<p style="background-color:blue;">xxxp>
div>
<script>
	var div=document.querySelector('div');
	div.addEventListener('click',function(event){
		console.log(event.target);   
				//点击红色区域打印包括div标签内的所有元素
				//点击蓝色区域打印包括p标签内的所有元素
		console.log(this);
				//绑定事件的是div，打印包括div标签内的所有元素
	});
script>

了解兼容性

<script>
	div.onclick=function(e){
		e=e || window.event;
		var target=e.target || e.srcElement;
		console.log(target);
	}
	
script>
事件类型e.type 
<script>
	function func(e){
		console.log(e.type);
	}
	var div=document.querySelector('div');
	div.addEventListener('click',func);    //click
	div.addEventListener('mouseover',func);   //mouseover
	div.addEventListener('mouseout',func);   //mouseout

script>
阻止冒泡 e.cancelBubble （非标准）和 e.stopPropagation() （标准） 
<body>
	<div class="father"><div class="son">div>div>
body>

<script>
	var father=document.querySelector('.father');
	var son=document.querySelector('.son');
	document.addEventListener('click',function(){
		alert('document');
	});
	father.addEventListener('click',function(){
		alert('father');			//提示father后提示document
	});
	son.addEventListener('click',function(e){
		alert('son');
		e.stopPropagation();      //阻止冒泡，只提示son
		//或者
		//e.cancelBubble=true;
	});
	
script>

兼容性解决

<script>
	if(e && e.stopPropagation){
		e.stopPropagation();
	}else{
		window.event.cancelBubble=true;
	}
script>
阻止（禁用）默认事件属性 e.returnValue 和方法 e.preventDefault() 
//a标签默认点击跳转链接，阻止跳转
<script>
	var a=document.querySelector('a');
// DOM标准
	a.addEventListener('click',function(e){
		e.preventDefault();
	});

// IE678方法
	a.onclick=function(){
		e.returnValue;
	}

// return false方法
	a.onclick=function(){
		return false;
	}
script>
事件委托(代理、委派)

利用事件冒泡在父节点设置监听，影响子节点。比如多个li，在ul上设置监听
起到只 *** 作一次DOM提高程序性能的作用

<script>
var ul=document.querySelector('ul');
ul.addEventListener('click',function(){
	// 利用e.target获取子元素
	e.target.style.backgroundColor='blue';
});
script>
常用鼠标事件 禁用鼠标右键菜单

contextmenu控制显示右键菜单

<script>
	document.addEventListener('contextmenu',function(){
		e.preventDefault();   
	});
script>
禁用鼠标选中

selectstart

<script>
	document.addEventListener('selectstart',function(){
		e.preventDefault();   
	});
script>
鼠标事件对象
鼠标事件对象说明
e.clientX返回浏览器可视区域的X坐标
e.clientY返回浏览器可视区域的Y坐标
e.pageX返回文档页面区域的X坐标，IE9+支持
e.pageY返回文档页面区域的Y坐标，IE9+支持
e.screenX返回电脑屏幕区域的X坐标
e.screenY返回电脑屏幕区域的Y坐标
<script>
	document.addEventListener('click',function(e){
		console.log(e.clientX);
		console.log(e.clientY);
		console.log(e.pageX);
		console.log(e.pageY);      // 以上都是距离地址栏以下页面区域的鼠标XY坐标，两种值一样
		console.log(e.screenX);  
		console.log(e.screenY);    
	});
script>
案例：跟随鼠标移动的图片 
<img src="img/mouse.png" alt="">
			
		<script>
			var pic=document.querySelector('img');
			console.log(pic);
			document.addEventListener('mousemove',function(e){
				var x=e.pageX;
				var y=e.pageY;
				console.log(x,y);
				pic.style.position='absolute';
				pic.style.left=x+'px';
				pic.style.top=y+'px';
			})
		script>
常用键盘事件
键盘事件触发条件
onkeyup按键松开
onkeydown按键按下
onkeypress按键按下，不识别功能键如ctrl shift 箭头

先dwon 后press 最后up

<script>
	document.addEventListener('keyup',function(){
		console.log('up');  
	});
	document.addEventListener('keydown',function(){
		console.log('down');  
	});
	document.addEventListener('keypress',function(){
		console.log('press');  //press和down 一直按住会一直打印
	});
script>
键盘事件对象属性

e.key

//打印按键的值，字母区分大小写，keypress不识别功能键
<script>
	document.addEventListener('keyup',function(e){
					console.log('up: '+e.key);  
				});
	document.addEventListener('keydown',function(e){  
					console.log('down: '+e.key)
				});
	document.addEventListener('keypress',function(e){
					console.log('press: '+e.key);  
				});
script>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/929165.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
code code 管理员组
0 0
上一篇 2022-05-17
下一篇 2022-05-17

发表评论

登录后才能评论

评论列表（0条）

保存