概念
  1. 凡是事件就会产生一个事件对象，比如：onclick、ondbclick、onfocus、onmousedown、onmousemove····
  2. 事件三要素：事件源、事件、事件驱动程序
    获取事件源、绑定事件、书写事件驱动程序
  3. 示例
    btn.onclick = fnnction(event){ //event就是当前事件对象，简称事件对象
···代码块
}
  4. 注意：只要触发DOM上的某个时间时，就会产生一个event对象，这个对象中包含着所有与事件相关的信息。
  5. 获取时间对象写法
    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的区别
  1. screenX&screenY是以屏幕为基准进行测量，即：当前元素距离屏幕的尺寸
  2. pageX&pageY是以当前文档（绝对定位）为基准，不适用于IE6-8
  3. clientX&clientY是以当前可视区域为基准，类似于固定定位为
注意

防止拖动时选中内容

JS中事件传递机制

冒泡机制

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

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

  3. 图示
    Javascript：事件对象—event_句柄

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

  5. 基本认识
    当如下情况的时候，因为冒泡的存在，我们在点击点我按钮的时候，点击事件会一层一层往上传递。并触发父标签和文档标签的点击事件。
    Javascript：事件对象—event_事件对象_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_加载_03
    Javascript：事件对象—event_句柄_04

    Javascript：事件对象—event_加载_05

阻止冒泡的方法

  1. 标准浏览器和ie浏览器
    w3c：event.stopPropagation();
  2. 兼容写法
    if(event && event.stopPropagation){ // w3c标准
	event.stopPropagation();
}else{ // IE系列 IE 678
    event.cancelBubble = true;
}
  3. 案例
    为按钮点击事件进行冒泡阻止，点击按钮后，不会再向上传递。只会弹出点击了按钮。
    <!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>

捕获机制

  1. element.addEventListener(event, function, useCapture)
  2. 参数
参数 描述
event 必须。字符串，指定事件名。
注意: 不要使用 “on” 前缀。 例如，使用 “click” ,而不是使用 “onclick”。
function 必须。指定要事件触发时执行的函数。
当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， “click” 事件属于 MouseEvent(鼠标事件) 对象。
useCapture 可选。布尔值，指定事件是否在捕获或冒泡阶段执行。
可能值:
true - 事件句柄在捕获阶段执行
false - 默认。事件句柄在冒泡阶段执行
  1. useCapture
    ① 为true的时候，是在捕获阶段执行，由外向内不断执行。
    ② 为false的时候，是在冒泡阶段执行，由内向外不断执行。
  2. 举例
    	 <!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_加载_03
    可见是在捕获过程中由外往里触发事件。