JavaScript 事件流（事件要素/普通事件/事件绑定/事件冒泡/阻止冒泡/阻止默认行为）

1. JS是以 事件驱动 为核心的一门语言。

2. 事件三要素
事件源、事件、事件处理程序

使用事件的基本结构：事件源 + 事件类型 = 执行的指令

事件的定义：当什么时候执行什么事

编程中的事件包括：事件源（标签）、事件（JS为我们设计好了事件）、事件驱动程序（我们要做哪些逻辑）

3. 事件经典三部曲

① 获取事件源

② 绑定事件

③ 书写事件驱动程序

4. js加载 和 onload 事件

- 页面加载的时候，html和js是同步加载的，谁在上面加载谁
- 要用到某个标签的时候，一定要确保该标签已经被加载完毕，否则获取不到
- onload事件，就是整个文档中的所有元素加载完毕之后，再执行function中的代码
- window.onload也不能多写，后面的会把前面的层叠掉，一个html中一般只有一个window.onload

- 点击事件和所有事件都一样，如果多次绑定会把前面的事件给层叠掉

5. 事件绑定方法

方法1：经典三部曲（最常用）

//1.获取事件源,大部分都是对象数据类型：DOM对象
var box = document.getElementById("box");//box是object类型
//2.绑定事件
box.onclick = function () {
//3.书写事件驱动程序
alert("事件绑定方法1");
}

方法2：

box.onclick = fn2;//fn2不能加括号，函数名相当于整个函数
function fn2() {
alert("事件绑定方法2");
}

方法3：

<!-- fn3必须加小括号-->
<div id="box" onclick="fn3()"></div>

<script>
function fn3() {
alert("事件绑定方法3");
}
</script>

6. 基本事件



7. 其他事件

① dom.onmousemove
只要鼠标在绑定该事件的事件源上移动，哪怕1像素，也会触动这个事件。
（这个事件可以直接或者间接的替代定时器）

② window.onresize：窗体大小发生改变的事件
只要浏览器的大小改变，哪怕1像素，都会触动这个事件。

③ window.onscroll：屏幕滑动

④ onmouseup / onmousedown  ==  onclick

⑤ 鼠标滚动事件 onmousewheel

window.onload = function () {
var count = 0;
document.onmousewheel = function (e) {
if(e.wheelDelta < 0){
count++;
}else {
count--;
}
console.log(count);
/*鼠标滚动的量 下滚是负 上滚是正*/
console.log(e.wheelDelta);
}
}

8. addEventListener（兼容绑定、移除、原理）

① 使用方法

btn.onclick = fn;          //DOM0时代开始的方法，会层叠。
btn.addEventListener(...);      //火狐谷歌IE9+
btn.attachEvent(...);           //IE678

② 移除事件（怎么绑定，怎么解绑）

btn.onclick = null;
btn.removeEventListener(...);
btn.detachEvent(...);   //(attachEvent)

③ addEventListener(参数1，参数2，参数3)
调用者是：事件源。
参数1：事件去掉on   
参数2 ：调用的函数
参数3：可有可无。没有默认false.false情况下，支持冒泡。True支持捕获。

9. 冒泡

事件冒泡：当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。(BUG)
（就好像本来应该一人做事一人当，结果，我做错了事情，你去告诉我妈）
什么是冒泡：子元素事件被触动，父盒子的同样的事件也会被触动。
取消冒泡就是取消这种机制。

10.  阻止冒泡

w3c的方法是：（火狐、谷歌、IE11）

event.stopPropagation()

IE10以下则是使用：

event.cancelBubble = true

兼容代码如下：

var event = event || window.event;
if(event && event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}

11. 阻止默认行为

例：点击a链接不跳转，阻止默认的跳转行为

<a href="www.baidu.com" id='bita' >点击不跳转</a>
<script>

var bita = document.getElementById('bita') ;
bita.onclick = function( event ){
stopDefault( event ) ;
console.log( 123 );
}
function stopDefault(e) {
// 阻止默认浏览器动作(W3C)
if ( e && e.preventDefault ) {
e.preventDefault();
} else {
// IE中阻止函数器默认动作的方式
window.event.returnValue = false;
}
return false;
}

</script>