JavaScript里的event

注：标签内的事件必须为event

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，每个事件函数都有这个ewrap.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，每个事件函数都有这个ewrap.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 监听的是谁就是谁

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.stopPropagation();}, false);body.addEventListener('click', (e) => {console.log('target', e.target)console.log('currentTarget', e.currentTarget)}, 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);

JavaScript里的event相关推荐

JAVA script 循环图片_深入分析JavaScript 事件循环(Event Loop)
事件循环(Event Loop),是每个JS开发者都会接触到的概念,但是刚接触时可能会存在各种疑惑. 众所周知,JS是单线程的,即同一时间只能运行一个任务.一般情况下这不会引发问题,但是如果我们有一个 ...
JavaScript中的event讲解及一些常见案例
JavaScript中的event就是发生在dom元素上的事件,你也许已经使用过不少dom事件,但是event对象在js中有很多强大并且常用的功能.本文将讲解部分常用event的属性方法. 目录 ev ...
从Promise来看JavaScript中的Event Loop、Tasks和Microtasks
原文 github.com/creeperyang- 主题 Promise 看到过下面这样一道题: (function test() {setTimeout(function() {console.l ...
javascript笔记：深入分析javascript里对象的创建（上）续篇
今天回来一看我的博客居然有这么多人推荐真是开心极了,看来大家对我的研究有了认可,写博客的动力越来越大了,而且我发现写javascript在博客园里比较受欢迎,写java的受众似乎少多了,可能博客园里j ...
JavaScript 里，$ 代表什么？/JQuery是什么语言？/html中用link标签引入css时的中 rel=stylesheet属性？/EL表达式是什么？...
JavaScript 里,$ 代表什么? 比如说我写一个mouseover事件: $(document).ready(function(){ $("p").mouseover(fu ...
JavaScript里的循环方法：forEach，for-in，for-of
2019独角兽企业重金招聘Python工程师标准>>> JavaScript诞生已经有20多年了,我们一直使用的用来循环一个数组的方法是这样的: for (var index = 0 ...
javascript里的面向对象
2019独角兽企业重金招聘Python工程师标准>>> 前言: javascript 项目中原生态的语法用得比较少了,都是基于jQuery开发,但在移动项目中还是比较麻烦的.想整理个 ...
java 动态字符串_Java动态编译执行一串字符串,类似于Javascript里的eval函数
Javascript里的eval函数能动态执行一串js脚本. 那Java里怎么做到呢. 有两种方法: 一种是使用可以执行js脚本的Java类 ScriptEngineManagerpublic sta ...
java script创建对象_javascript笔记：深入分析javascript里对象的创建
大家知道在java里面类可以具有静态属性和方法,无需实例化该类的对象,就可以访问这些属性和方法,但是javascript里面是不是只有通过对象初始化方式才会模拟出这样的特点了?其实不然,在编程语言里, ...