js中了解什么是事件对象event

event就是一个事件对象写在侦听函数(鼠标点击经过.function)的小括号里面当形参来看也可简写为e

事件对象是系统自动创建的不用传递参数是事件一系列相关数据的集合跟事件相关的如鼠标点击则包含了鼠标的相关信息如果是键盘事件则包含了键盘的相关信息判断用户按下了哪个键等


<body><div class="father">father<div class="son">son</div></div><script>var father = document.querySelector('.father');var son = document.querySelector('.son');father.addEventListener('click', function(event) {console.log(event);// console.log(window.event)  ie678兼容性问题不可简写 使用window.event})</script>
</body>

event常见的属性和方法

1.e.target

target 是点击了哪个元素就返回哪个元素

this 返回的是哪个元素绑定了点击事件则返回哪个元素近代表当前元素

<body><ul><li>11</li><li>22</li><li>33</li></ul><script>var ul = document.querySelector('ul');ul.onclick = function(e) {console.log(e.target);console.log(this);}</script>
</body>

2.阻止默认行为（事件）让链接不跳转或者让按钮不提交

3.阻止事件冒泡（掌握！

在侦听函数里加上这句话 e.stopPropagation(); 即可阻止事件冒泡

stop 停止 Propagation 传播

使用场景：比如父盒子里包含了一个子盒子给了子盒子和父盒子分别设置点击事件弹出对话框点了子盒子结果父盒子的对话框也出来了想只弹出子盒子就在子盒子里添加该属性阻止冒泡

js中了解什么是事件对象event相关推荐

js进阶课程 12-9 jquery的事件对象event的方法有哪些？
js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...
js的三大家族(offset/scroll/client)和一个事件对象(event)///正则
一 offset 第1章 offset家族 4 1.1 三大家族和一个事件对象 4 1.2 Offset家族简介 4 1.2.1 offsetWidth和offsetHi ...
javaScript中的事件对象event是怎样
事件对象event,每当一个事件被触发的时候,就会随之产恒一个事件对象event,该对象中主要包含了关于该事件的基本属性,事件类型type(click.dbclick等值).目标元素target(我的 ...
JS事件对象 (event)
#事件对象 (event) div.onclick = function(event){ console.log(event); let e = event||wind ...
JavaScript：事件对象Event和冒泡
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 绑定事件的两种方式我们在上一篇文章 DOM操作详解中已经讲过事件的概 ...
[回顾]事件对象——event
问题由来经常在阅读代码时候发现这样的函数 var btn = document.getElementById('btn'); btn.onclick = function (e) {...一些操作: ...
JS中常用的键盘事件与keycode属性
JS中的键盘事件与keycode属性键盘事件键盘事件与鼠标事件类似,同样常出现在开发过程中. 简单介绍三个常见的键盘事件 keydown (识别所有键) keyup (识别所有键) keypres ...
js中单击和双击事件的区分
js中单击和双击事件的区分 1. 首先要了解鼠标点击(单击或双击)时包含的事件. mousedown 事件: 当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件.与 cl ...
事件对象event及其相关属性
事件对象event 一.什么是事件对象二.事件对象的属性 1.事件对象的兼容性 2.事件对象的type属性 3.target 与currentTarget 4. 事件对象的keyCode属性 5.c ...

js中了解什么是事件对象event

event常见的属性和方法

js中了解什么是事件对象event相关推荐

最新文章

热门文章