概念


  2. 凡是事件就会产生一个事件对象，比如：onclick、ondbclick、onfocus、onmousedown、onmousemove····
  3. 事件三要素：事件源、事件、事件驱动程序
    获取事件源、绑定事件、书写事件驱动程序
  5. 示例
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的区别


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

注意

防止拖动时选中内容

JS中事件传递机制

冒泡机制



气泡从水底开始往上升，由深到浅，升到最上面。在上升的过程中，气泡会经过不同深度层次的水。



​相对应的，每个气泡相当于我们这里的事件，而水则相当于我们整个dom树，事件从dom树的底层，层层向上传递，直到传递到dom树的根节点。​



图示
Javascript：事件对象—event_事件对象



注意
① 冒泡顺序：div ->body ->html ->document ->window
② 不是所有的事件都能冒泡，以下事件不能冒泡：blur、focus、load、unload



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

<!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>

执行结果：
Javascript：事件对象—event_html_03
Javascript：事件对象—event_事件对象_04

Javascript：事件对象—event_加载_05



阻止冒泡的方法


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

兼容写法
if(event && event.stopPropagation){ // w3c标准
event.stopPropagation();
}else{ // IE系列 IE 678
event.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 678
event.cancelBubble = true;
        }
alert('点击了按钮');
    });

father.addEventListener('click', function (ev) {
alert('点击了父标签');
    });

document.addEventListener('click', function (ev) {
alert('点击了文档');
    });
</script>
</body>
</html>


捕获机制


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

参数

描述

event

必须。字符串，指定事件名。

注意: 不要使用 “on” 前缀。 例如，使用 “click” ,而不是使用 “onclick”。

function

必须。指定要事件触发时执行的函数。

当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， “click” 事件属于 MouseEvent(鼠标事件) 对象。

useCapture

可选。布尔值，指定事件是否在捕获或冒泡阶段执行。

可能值:

true - 事件句柄在捕获阶段执行

false - 默认。事件句柄在冒泡阶段执行


  2. useCapture
    ① 为true的时候，是在捕获阶段执行，由外向内不断执行。
    ② 为false的时候，是在冒泡阶段执行，由内向外不断执行。
  4. 举例
<!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_加载_05
Javascript：事件对象—event_事件对象_04Javascript：事件对象—event_html_03
可见是在捕获过程中由外往里触发事件。