第十二章：第37节DOM——事件操作（二）设置事件与事件流
更新于：2017-12-21 19:18:55
为一元素添加事件，使用上节的那四种方式足以满足大部分编程需要。其实节点对象也提供了可以添加事件属性的方法。说下怎么用节点对象方法添加事件属性：
用对象方法添加事件属性，会有兼容性问题：
主流浏览器方式(包括IE9以上 版本浏览器)：
itnode.addEventListener(事件类型，事件处理[，事件流]); //设置
itnode.removeEventListener(事件类型，事件处理[，事件流]); //取消
IE浏览器方式(IE6/7/8)：
itnode.attachEvent(事件类型，事件处理); //设置
itnode.detachEvent(事件类型，事件处理); //取消
事件类型：
就是我们可以设置的具体事件，例如onclick/onmouseover等
主流浏览器方式没有”on标志”，例如addEventListener(‘click’，...);
IE浏览器方式有”on”标志
事件处理：
事件驱动，可以是一个有名/匿名函数
例如addEventListener(‘click’,function(){}/有名函数);
事件流：true捕捉型、[false冒泡型]
事件取消(removeEventListener/detachEvent)操作具体要求：
① 事件处理必须是有名函数，不可以是匿名函数。
② 事件取消的参数与绑定的参数完全一致(数量/内容)
这种方式的特点：
① 可以为同一个对象设置多个同类型事件。
② 事件取消也非常灵活。
③ 对事件流也有很好的处理。
除了方法名比较长些，理解起来没什么难度。本节代码中提供了三个示例代码，大家下载来看吧。说下什么是事件流：
事件流
看这个HTML元素代码：
<div id = "d1" onclick="f1()"><div id = "d2" onclick="f2()"></div></div>
id="d2"是id="d1"的子元素。正常情况下，当我们点击id="d2"的div元素时，必然也得触发id="d1"的div元素的点击事件。
多个彼此嵌套元素，他们拥有相同的事件，最内部元素事件被触发后，外边多个元素的同类型事件也会被触发，多个元素他们同类型事件同时执行的效果称为“事件流”。
代码演示：
依次点击span-》p-》div
反之，把三个点击事件的事件流全改成捕捉类型，依次点击span-》p-》div：
如果使用上节学习的添加事件属性方式，那它会怎么处理事件流的问题？
经过测试，默认是冒泡类型。
这种需求出现的不多，处于事件流的考虑可选择本节的方式添加事件属性。多数情况下推荐使用上节课的内容添加事件属性。
继续拓展下，怎么阻止事件流的产生？
需要依靠事件对象event的stopPropagation方法
事件对象下节课会介绍。
事件返回值
事件的返回值，会影响到默认动作的执行。
如：<a>默认动作就是打开一个URL，但onclick的返回值，会影响到链接是否能打开(或者默认动作是否执行)。
事件返回true或空，则默认动作将执行；
若返回false，则阻止默认动作的执行。
事件返回值，受影响的事件有哪些？有onClick事件和onSubmit事件。
提示：“onSubmit”，表单提交前触发此事件。“onSubmit”多用于表单提交前验证数据是否规范，很重要的事件。
单独说下加载事件onload
js代码执行时候，需要html&css的支持，就让html先执行(先进入内存)，js代码后执行
js代码在最后执行的过程就是“加载过程”，通常通过“加载事件”实现加载过程
具体设置：
<body onload=”加载函数()”>
window.onload = 匿名/有名函数; //推荐
当然如果不使用加载事件，推荐大家把JS代码写到HTML的末尾处，这样也能确保HTML执行完才执行JS。