概念

凡是事件就会产生一个事件对象，比如：onclick、ondbclick、onfocus、onmousedown、onmousemove····
事件三要素：事件源、事件、事件驱动程序
获取事件源、绑定事件、书写事件驱动程序

示例

btn.onclick = fnnction(event){ //event就是当前事件对象，简称事件对象
···代码块
}

注意：只要触发DOM上的某个时间时，就会产生一个event对象，这个对象中包含着所有与事件相关的信息。

获取时间对象写法

btn.onclick = function(ev){var e = ev || window.event;    //兼容写法console.log(e.target);console.log(e);
}

常见事件

属性	当以下情况发生时，出现此事件	FF	N	IE
onabort	图像加载被中断	1	3	4
onblur	元素失去焦点	1	2	3
onchange	用户改变域的内容	1	2	3
onclick	鼠标点击某个对象	1	2	3
ondblclick	鼠标双击某个对象	1	4	4
onerror	当加载文档或图像时发生某个错误	1	3	4
onfocus	元素获得焦点	1	2	3
onkeydown	某个键盘的键被按下	1	4	3
onkeypress	某个键盘的键被按下或按住	1	4	3
onkeyup	某个键盘的键被松开	1	4	3
onload	某个页面或图像被完成加载	1	2	3
onmousedown	某个鼠标按键被按下	1	4	4
onmousemove	鼠标被移动	1	6	3
onmouseout	鼠标从某元素移开	1	4	4
onmouseover	鼠标被移到某元素之上	1	2	3
onmouseup	某个鼠标按键被松开	1	4	4
onreset	重置按钮被点击	1	3	4
onresize	窗口或框架被调整尺寸	1	4	4
onselect	文本被选定	1	2	3
onsubmit	提交按钮被点击	1	2	3
onunload	用户退出页面	1	2	3

常用属性

属性	用途
clientX	光标相对于该网页的水平位置
clientY	光标相对于该网页的垂直位置
type	事件类型
target	该事件被传送到的对象
screenX	光标相对于该屏幕的水平位置
screenY	光标相对于该屏幕的垂直位置
pageX	光标相对于该网页的水平位置（不适用于IE）
pageY	光标相对于该网页的垂直位置（不用用于IE）
width	该窗口或框架宽度
height	该窗口或框架高度
data	返回拖拽对象的URL字符串

获取时间源方式

var btn1 = document.getElementById('btn');    //通过id
var btn2 = document.getElementsByTagName('button')[0];   //通过标签类型
var btn3 = document.getElementsByClassName('btn')[0];    //通过类名
var btn4 = document.getElementsByName('btn')[0]; //通过name
var btn5 = document.querySelector('.btn');   //通过选择器，返回第一个满足条件的
var btn6 = document.querySelectorAll('.btn')[0]; //通过选择器，返回所有满足条件的

pageX&pageY、screenX&screenY、clientX&clientY的区别

screenX&screenY是以屏幕为基准进行测量，即：当前元素距离屏幕的尺寸
pageX&pageY是以当前文档（绝对定位）为基准，不适用于IE6-8
clientX&clientY是以当前可视区域为基准，类似于固定定位为

注意

防止拖动时选中内容

JS中事件传递机制

冒泡机制

气泡从水底开始往上升，由深到浅，升到最上面。在上升的过程中，气泡会经过不同深度层次的水。
相对应的，每个气泡相当于我们这里的事件，而水则相当于我们整个dom树，事件从dom树的底层，层层向上传递，直到传递到dom树的根节点。
图示
注意
① 冒泡顺序：div ->body ->html ->document ->window
② 不是所有的事件都能冒泡，以下事件不能冒泡：blur、focus、load、unload

基本认识
当如下情况的时候，因为冒泡的存在，我们在点击点我按钮的时候，点击事件会一层一层往上传递。并触发父标签和文档标签的点击事件。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#father{width: 600px;height: 600px;background-color: red;}</style>
</head>
<body>
<div id="father"><button id="btn">点我</button>
</div>
<script>var father = document.getElementById('father');var btn = document.getElementById('btn');btn.addEventListener('click', function (event) {alert('点击了按钮');});father.addEventListener('click', function (ev) {alert('点击了父标签');});document.addEventListener('click', function (ev) {alert('点击了文档');});
</script>
</body>
</html>

执行结果：

阻止冒泡的方法

标准浏览器和ie浏览器
```
w3c：event.stopPropagation();
```

兼容写法

if(event && event.stopPropagation){ // w3c标准event.stopPropagation();
}else{ // IE系列 IE 678event.cancelBubble = true;
}

案例
为按钮点击事件进行冒泡阻止，点击按钮后，不会再向上传递。只会弹出点击了按钮。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#father{width: 600px;height: 600px;background-color: red;}</style>
</head>
<body>
<div id="father"><button id="btn">点我</button>
</div>
<script>var father = document.getElementById('father');var btn = document.getElementById('btn');btn.addEventListener('click', function (event) {if(event && event.stopPropagation){ // w3c标准event.stopPropagation();}else{ // IE系列 IE 678event.cancelBubble = true;}alert('点击了按钮');});father.addEventListener('click', function (ev) {alert('点击了父标签');});document.addEventListener('click', function (ev) {alert('点击了文档');});
</script>
</body>
</html>

捕获机制

element.addEventListener(event, function, useCapture)
参数

参数	描述
event	必须。字符串，指定事件名。注意: 不要使用 “on” 前缀。例如，使用 “click” ,而不是使用 “onclick”。
function	必须。指定要事件触发时执行的函数。当事件对象会作为第一个参数传入函数。事件对象的类型取决于特定的事件。例如， “click” 事件属于 MouseEvent(鼠标事件) 对象。
useCapture	可选。布尔值，指定事件是否在捕获或冒泡阶段执行。可能值: true - 事件句柄在捕获阶段执行 false - 默认。事件句柄在冒泡阶段执行

useCapture
① 为true的时候，是在捕获阶段执行，由外向内不断执行。
② 为false的时候，是在冒泡阶段执行，由内向外不断执行。

举例

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#father{width: 600px;height: 600px;background-color: red;}</style>
</head>
<body>
<div id="father"><button id="btn">点我</button>
</div>
<script>var father = document.getElementById('father');var btn = document.getElementById('btn');btn.addEventListener('click', function (event) {alert('点击了按钮');},true);father.addEventListener('click', function (ev) {alert('点击了父标签');},true);document.addEventListener('click', function (ev) {alert('点击了文档');},true);
</script>
</body>
</html>

运行结果为：

可见是在捕获过程中由外往里触发事件。

Javascript：事件对象—event相关推荐

JavaScript：事件对象Event和冒泡
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 绑定事件的两种方式我们在上一篇文章 DOM操作详解中已经讲过事件的概 ...
javaScript中的事件对象event是怎样
事件对象event,每当一个事件被触发的时候,就会随之产恒一个事件对象event,该对象中主要包含了关于该事件的基本属性,事件类型type(click.dbclick等值).目标元素target(我的 ...
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事件对象
事件对象在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息. 兼容DOM的浏览器会将一个event传入到事件处理程序中.无论指定事件处理程序时使用什么方法 ...
JAVA script 循环图片_深入分析JavaScript 事件循环(Event Loop)
事件循环(Event Loop),是每个JS开发者都会接触到的概念,但是刚接触时可能会存在各种疑惑. 众所周知,JS是单线程的,即同一时间只能运行一个任务.一般情况下这不会引发问题,但是如果我们有一个 ...
[回顾]事件对象——event
问题由来经常在阅读代码时候发现这样的函数 var btn = document.getElementById('btn'); btn.onclick = function (e) {...一些操作: ...
JS事件对象 (event)
#事件对象 (event) div.onclick = function(event){ console.log(event); let e = event||wind ...
事件对象(event)
<div>111</div>var div = document.querySelector('div'); div.onclick = function(event) {}; ...
事件对象event及其相关属性
事件对象event 一.什么是事件对象二.事件对象的属性 1.事件对象的兼容性 2.事件对象的type属性 3.target 与currentTarget 4. 事件对象的keyCode属性 5.c ...

Javascript：事件对象—event

概念

常见事件

常用属性

获取时间源方式

pageX&pageY、screenX&screenY、clientX&clientY的区别

注意

JS中事件传递机制

冒泡机制

阻止冒泡的方法

捕获机制

Javascript：事件对象—event相关推荐

最新文章

热门文章