JavaScript里的event

. . . . .

已于 2023-12-21 11:11:24 修改

阅读量3.3k

点赞数

分类专栏：前端开发文章标签： javascript 前端开发语言

于 2018-11-17 10:23:57 首次发布

本文链接：https://blog.csdn.net/yexudengzhidao/article/details/84171803

版权

前端开发专栏收录该内容

344 篇文章 20 订阅

订阅专栏

在这里插入图片描述
注：

标签内的事件必须为event ，如果fn() 不传参数，则在fn执行的时候依然能拿到event，因为在事件调用时会在window上挂载一个临时的window.event。
在标签中写事件，是不会想调用函数的第一个参数传递e的，除非是addEventListener写法。
上面截图中，fn中的e其实是event传入进来的

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div type="text" onclick="clickBtn()">按钮</div>
        <script type="text/javascript">
            function clickBtn(e) {
                console.log("e", e); // undefind
                console.log("event", event); // PointerEvent
            }
        </script>
    </body>
</html>

参考链接：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createEvent

event是事件函数对象，内置对象的一种，当触发某个事件，都会产生一个事件对象event。
event每个事件函数都有的内置对象，里面储存着事件发生之后的信息，我们可以根据这些信息做很多判断，或者是获取信息来显示

首先看一段js冒泡的代码，里面有用到event

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body onclick="parentDivBtn()">
	<div id="div1">
		<div>确定</div>
		<div>取消</div>
		<div onclick="divBtn(event)">取aa消</div>
	</div>
	<div id="div2">
		<div>取消</div>
	</div>
	<script type="text/javascript">
		function parentDivBtn(){
			alert('aaa')
		}
		function divBtn(e){
			var ev = e || window.event;   //兼容性写法
			console.log(e)
			alert('bbb')
			// e.stopPropagation()
		}
		// div1 = document.getElementById('div1')
		// div1.addEventListener('click',function(e){
		// 	e.stopPropagation()
		// 	alert('确定')
		// })
		// var body = document.body
		// body.addEventListener('click', function(e) {
		// 	alert('body')
		// })
	</script>
</body>
</html>

对event解读：

event是事件的意思，它是一个内置对象，就相当于把这个事件的对象传给这个方法，event包含了这个事件的所有参数和信息。
这个event在在火狐下需要手动传入，不是默认传入，否则找不到。
<div onclick="divBtn(event)">取aa消</div>
在IE和Opera中事件对象为window.event。

为了更好地兼容性写法，推荐如下写法：
既手动传入event，又用兼容性的写法。

<div id="wrap" onclick="wrapfunc(event)"> </div>

function wrapfunc(e)
{
	var ev=e || window.event;
	console.log(ev);
}

even常用属性：

// 获取节点
	var wrap=document.getElementById('wrap');
    // 可见事件函数里面有e参数，这个e对应的就是event对象，也可以缩写成ev，每个事件函数都有这个e
	wrap.onclick = function(e)
	{
		var ev=e || window.event;  //或语法，返回为真的值
		console.log(ev);
		// 2.事件对象点击所在的位置
         //clientX和clientY,针对于浏览器视窗而言
		console.log("clientX:"+ev.clientX+" "+"clientY:"+ev.clientY);
		//offsetX和offsetY相对于自身而言
		console.log("offsetX:"+ev.offsetX+" "+"offsetY"+ev.offsetY);
		//screenX和screenY相对于显示屏
		console.log("screenX:"+ev.screenX+" "+"screenY:"+ev.screenY);
		//3.点击所对应的标签
		console.log(ev.target);
	}

完整示例：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#wrap {
			width: 100px;
			height: 100px;
			border: 1px solid skyblue;
		}
	</style>
</head>
<body>
	<div id="wrap">
		
	</div>
</body>
<script type="text/javascript">
    // 获取节点
	var wrap=document.getElementById('wrap');
    // 可见事件函数里面有e参数，这个e对应的就是event对象，也可以缩写成ev，每个事件函数都有这个e
	wrap.onclick = function(e)
	{
		var ev=e || window.event;  //或语法，返回为真的值
		console.log(ev);
		// 2.事件对象点击所在的位置
         //clientX和clientY,针对于浏览器视窗而言
		console.log("clientX:"+ev.clientX+" "+"clientY:"+ev.clientY);
		//offsetX和offsetY相对于自身而言
		console.log("offsetX:"+ev.offsetX+" "+"offsetY"+ev.offsetY);
		//screenX和screenY相对于显示屏
		console.log("screenX:"+ev.screenX+" "+"screenY:"+ev.screenY);
		//3.点击所对应的标签
		console.log(ev.target);
	}
</script>
</html>

e.target 和 e.currentTarget区别：

e.target 点击的那个元素

e.currentTarget 监听的是谁就是谁，e.currentTarget为所在监听函数的那个元素
例如：

import React, { useEffect, useState } from 'react';
function Select() {
    const [showDropdown, toggleDropdown] = useState(false);
    useEffect(() => {
        window.onclick=function(e) {
            console.log(e.target, e.currentTarget) // 在这里 e.currentTarget为window
            toggleDropdown(false);
        }

    }, [])
    function toggle(e) {
        console.log(e.currentTarget) // 在这里 e.currentTarget为div
        toggleDropdown(!showDropdown)
    }
    return (
        <div>
            <div className='selector' data-selector='selector' onClick={toggle}>选择器</div>
            {
                showDropdown && <div className='dropdown'>下拉面板</div>
            }
        </div>
    )
}
export default Select;

document.elementFromPoint(x, y) 返回坐标所对应的节点
在这里插入图片描述
例如：

<body id="body" >
    <div id="div" >hello</div>
</body>
<script>
    const div = document.querySelector('#div');
    const body = document.querySelector('#body');
    div.addEventListener('click', (e) => {
        // console.log(e.clientX, e.clientY);
        // console.log(e.pageX, e.pageY);
        // console.log(e.screenX, e.screenY);
        // console.log(e.offsetX, e.offsetY);
        console.log('target', e.target)
        console.log('currentTarget', e.currentTarget) // e.currentTarget在div的click事件处理中，所以currentTarget为这个div，因此e.currentTarget为所在监听函数的那个元素
        // e.stopPropagation();
    }, false);
    body.addEventListener('click', (e) => {
        console.log('target', e.target)
        console.log('currentTarget', e.currentTarget) // e.currentTarget在body的click事件处理中，所以currentTarget为这个body
    }, false);
</script>

在这里插入图片描述

event.x和event.clientX的区别：

event.clientX返回事件发生时,mouse相对于客户窗口的X坐标
event.x也一样
但是如果设置事件对象的定位属性值为relative
event.clientX不变
而event.x返回事件对象的相对于本体的坐标(相当于event.offsetX)

故：只需要用如下三个即可：

div.addEventListener('click', (e) => {
   console.log(e.clientX, e.clientY);
   console.log(e.screenX, e.screenY);
   console.log(e.offsetX, e.offsetY);
   // console.log('target', e.target)
   // console.log('currentTarget', e.currentTarget)
   // e.stopPropagation();
}, false);