• Web APIs：事件高级--事件对象

    什么是事件对象

    eventTarget.onclick = function(event) {} eventTarget.addEventListener('click', function(event) {}）

    // 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt

    官方解释：event 对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。

    简单理解：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象 event，它有很多属性和方法。

    比如：

    1. 谁绑定了这个事件。

    2. 鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置。

    3. 键盘触发事件的话，会得到键盘的相关信息，如按了哪个键。 

    事件对象的使用语法

    1. div.onclick=function(event){
    2. 				console.log(event);
    3. 			}
    4. 			div.addEventListener('click',function(e){
    5. 				console.log(e)
    6. 			})

    这个 event 是个形参，系统帮我们设定为事件对象，不需要传递实参过去。

    当我们注册事件时， event 对象就会被系统自动创建，并依次传递给事件监听器（事件处理函数）。

    代码

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title></title>
    6. 		<style>
    7. 			div{
    8. 				width: 100px;
    9. 				height: 100px;
    10. 				background-color: pink;
    11. 			}
    12. 		</style>
    13. 	</head>
    14. 	<body>
    15. 		<div>123</div>
    16. 		<script>
    17. 			var div=document.querySelector('div');
    18. 			div.onclick=function(event){
    19. 				console.log(event);
    20. 			}
    21. 			div.addEventListener('click',function(e){
    22. 				console.log(e)
    23. 			})
    24. 			// 1.event就是一个事件对象 写到我们侦听函数的 小括号里面 当形参俩看
    25. 			// 2.事件对象只有有了事件才会存在，它在系统给我们自动创建的，不需要我们传递参数
    26. 			// 3.事件对象 是 我们事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包括鼠标的相关信息，
    27. 			// 鼠标坐标啊，如果是键盘事件里面的就包括了键盘事件的信息，比如 用户按下了那个健
    28. 			// 4.这个事件对象我们可以自己命名 比如event，evt,e
    29. 		</script>
    30. 	</body>
    31. </html>

    e.target和this的区别

    e.target 返回的是触发事件的对象（元素）  this 返回的是绑定事件的对象（元素）
    区别 ：

    e.target 点击了那个元素，就返回那个元素

    this 那个元素绑定了这个点击事件，那么就返回谁

    1.  
    2. <!DOCTYPE html>
    3. <html lang="en">
    4.  
    5. <head>
    6.     <meta charset="UTF-8">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    9.     <title>Document</title>
    10.     <style>
    11.         div {
    12.             width: 100px;
    13.             height: 100px;
    14.             background-color: pink;
    15.         }
    16.     </style>
    17. </head>
    18.  
    19. <body>
    20.     <div>123</div>
    21.     <ul>
    22.         <li>abc</li>
    23.         <li>abc</li>
    24.         <li>abc</li>
    25.     </ul>
    26.     <script>
    27.         // 常见事件对象的属性和方法
    28.         // 1. e.target 返回的是触发事件的对象（元素）  this 返回的是绑定事件的对象（元素）
    29.         // 区别 ： e.target 点击了那个元素，就返回那个元素 this 那个元素绑定了这个点击事件，那么就返回谁
    30.         var div = document.querySelector('div');
    31.         div.addEventListener('click', function(e) {
    32.             console.log(e.target);
    33.             console.log(this);
    34.  
    35.         })
    36.         var ul = document.querySelector('ul');
    37.         ul.addEventListener('click', function(e) {
    38.                 // 我们给ul 绑定了事件  那么this 就指向ul  
    39.                 console.log(this);
    40.                 console.log(e.currentTarget);
    41.  
    42.                 // e.target 指向我们点击的那个对象 谁触发了这个事件 我们点击的是li e.target 指向的就是li
    43.                 console.log(e.target);
    44.  
    45.             })
    46.             // 了解兼容性
    47.             // div.onclick = function(e) {
    48.             //     e = e || window.event;
    49.             //     var target = e.target || e.srcElement;
    50.             //     console.log(target);
    51.  
    52.         // }
    53.         // 2. 了解 跟 this 有个非常相似的属性 currentTarget  ie678不认识
    54.     </script>
    55. </body>
    56.  
    57. </html>

    阻止默认行为

    像a标签里面如果我们设置src属性，默认是又跳转效果的，而我们不想让它执行，此时我们可以阻止默认行为

    一般浏览器

    preventDefault()         方法

    传统方式

    return false；      

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title></title>
    6. 	</head>
    7. 	<body>
    8. 		<div>123</div>
    9. 		    <a href="http://www.baidu.com">百度</a>
    10. 		    <form action="http://www.baidu.com">
    11. 		        <input type="submit" value="提交" name="sub">
    12. 		    </form>
    13. 			<script>
    14. 				// 常见事件对象的属性和方法
    15. 				// 1，返回事件类型
    16. 				var div=document.querySelector('div')
    17. 				div.addEventListener('click',fn)
    18. 				function fn(e){
    19. 					console.log(e.type)
    20. 				}
    21. 				// 2.阻止默认行为（事件）让链接不跳转 或者让提交按钮不提交
    22. 				var a=document.querySelector('a')
    23. 				a.addEventListener('click',function(e){
    24. 					// e.preventDefault(); //dom标准写法
    25. 					return false;
    26. 					// 我们可以使用return false来阻止默认行为 没有兼容性问题 特点：return 后面的代码是不执行的
    27. 					// 而且只限于传统的注册方式
    28. 					alert(1)
    29. 				})
    30. 				
    31. 			</script>
    32. 	</body>
    33. </html>
  • 相关阅读:
    【问题解决】load_dataset报错An error occurred while generating the dataset
    《Aerosol Science and Technology》期刊介绍（SCI 3区）
    基于JAVA的网上图书商城参考【数据库设计、源码、开题报告】
    一次带你掌握MVC和MVVM的区别
    技术学习：Python ｜欲先善其事，必先利其器（JSON）二
    vue加载图片，地图，请求api跨域问题
    算法学习day10（贪心算法）
    结构光三维重建（二）线结构光三维重建
    java实现线程安全的三种方式
    【MySQL】数据库数据类型
  • 原文地址：https://blog.csdn.net/weixin_64612659/article/details/127042431