事件对象(event)

<div>111</div>var div = document.querySelector('div');
div.onclick = function(event) {};

1.event 就是一个事件对象，写到侦听函数的小括号里，当作形参来看。

2.事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数。

3.事件对象是我们事件的一系列跟事件相关的数据的集合。比如鼠标点击事件里面就包含了鼠标的相关信息，如鼠标的坐标，如果是键盘事件里面就包含的是键盘事件的信息，如判断用户按下哪个按键。

div.addEventListener('click',function(event){
console.log(event);
})

4.这个事件对象可以自己命名，比如event，evt，e

5.事件对象也有兼容性问题ie6,7,8 通过window.event

兼容性的写法：e || window.event;

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

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

事件对象的常见属性和方法:

e.target	返回触发事件的对象标准
e.srcElement	返回触发事件的对象非标准 ie6—8使用
e.type	返回事件类型比如click，mouseover 不带on
e.cancelBubble	该属性阻止冒泡非标准 ie6—8使用
e.returnValue	该属性阻止默认事件(默认行为) 非标准 ie6—8使用比如不让链接跳转
e.preventDefault	该方法阻止默认事件(默认行为) 标准比如不让链接跳转
e.stopropagation	阻止冒泡标准

<div>12</div>
<ul>
<li>ab</li>
<li>ab</li>
<li>ab</li>
</ul>// e.target 返回的是触发事件的对象(元素) this返回的是绑定事件的对象(元素)
var div = document.querySelector('div');
div.addEventListener('click', function(e){
console.log(e.target);
console.log(this);
})
var ul = document.querySelector('ul');
ul.addEventListener('click', function(e){
// 我们给ul绑定事件 那么this就指向ul
console.log(e.target);
})

区别：e.target 点击哪个元素就返回哪个元素，this是哪个元素绑定了这个点击事件就返回哪个。

<div>11</div>
<a href="www.baidu.com">百度</a>
<form action="www.baidu.com">
<input type="submit" value="提交" name="sub">
</form>// 返回事件类型
var div = document.querySelector('div');
div.addEventListener('click', fn);
div.addEventListener('mouseover', fn);
div.addEventListener('mouseout', fn);
function fn(e) {
console.log(e.type);
}// 阻止默认行为(事件) 让链接不跳转或者让提交按钮不提交
var a = document.querySelector('a');
a.addEventListener('click', function(e){
e.preventDefault(); // BOM 标准写法
})

事件对象(event)相关推荐

javaScript中的事件对象event是怎样
事件对象event,每当一个事件被触发的时候,就会随之产恒一个事件对象event,该对象中主要包含了关于该事件的基本属性,事件类型type(click.dbclick等值).目标元素target(我的 ...
js进阶课程 12-9 jquery的事件对象event的方法有哪些？
js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...
JavaScript：事件对象Event和冒泡
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 绑定事件的两种方式我们在上一篇文章 DOM操作详解中已经讲过事件的概 ...
[回顾]事件对象——event
问题由来经常在阅读代码时候发现这样的函数 var btn = document.getElementById('btn'); btn.onclick = function (e) {...一些操作: ...
JS事件对象 (event)
#事件对象 (event) div.onclick = function(event){ console.log(event); let e = event||wind ...
js的三大家族(offset/scroll/client)和一个事件对象(event)///正则
一 offset 第1章 offset家族 4 1.1 三大家族和一个事件对象 4 1.2 Offset家族简介 4 1.2.1 offsetWidth和offsetHi ...
事件对象event及其相关属性
事件对象event 一.什么是事件对象二.事件对象的属性 1.事件对象的兼容性 2.事件对象的type属性 3.target 与currentTarget 4. 事件对象的keyCode属性 5.c ...
jQuery事件对象event的属性和方法
事件处理(事件对象.目标元素的获取,事件对象的属性.方法等)在不同浏览器之间存在差异,jQuery在遵循W3C规范的情况下做了封装统一一.事件对象常用的属性: event.type:获取事件的类型, ...
js中了解什么是事件对象event
event就是一个事件对象写在侦听函数(鼠标点击经过.function)的小括号里面当形参来看也可简写为e 事件对象是系统自动创建的不用传递参数是事件一系列相关数据的集合跟事件相关的如 ...

事件对象(event)

事件对象(event)相关推荐

最新文章

热门文章