JavaScript WebAPI 系列三 注册事件、删除事件的两种方式以及兼容方案；DOM事件流（冒泡阶段和捕获阶段）；事件对象的常见属性和方法；鼠标事件对象

1.0 三种动态创建元素区别

1. document.write()
2. element.innerHTML
3. document.createElement()

区别：

1. document.write 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
2. innerHTML 是将内容写入某个 DOM 节点，不会导致页面全部重绘
3. innerHTML 创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
4. createElement() 创建多个元素效率稍低一点点，但是结构更清晰

        // window.onload = function() {
   
        //         document.write('<div>123</div>');
        //     }
        三种创建元素方式区别 
        1. document.write() 创建元素  如果页面文档流加载完毕，再调用这句话会导致页面重绘
        // var btn = document.querySelector('button');
        // btn.onclick = function() {
   
        //     document.write('<div>123</div>');
        // }

        2. innerHTML 创建元素
        var inner = document.querySelector('.inner');
        // for (var i = 0; i <= 100; i++) {
   
        //     inner.innerHTML += '<a href="#">百度</a>'
        // }
        var arr = [];
        for (var i = 0; i <= 100; i++) {
   
            arr.push('<a href="#">百度</a>');
        }
        inner.innerHTML = arr.join('');
        
        3. document.createElement() 创建元素
        var create = document.querySelector('.create');
        for (var i = 0; i <= 100; i++) {
   
            var a = document.createElement('a');
            create.appendChild(a);
        }

总结：不同浏览器下，innerHTML 效率要比 creatElement 高

2.0 DOM 重点核心–总结

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。

W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。

1. 对于JavaScript，为了能够使JavaScript操作HTML，JavaScript就有了一套自己的dom编程接口。
2. 对于HTML，dom使得html形成一棵dom树. 包含 文档、元素、节点
3. 我们获取过来的DOM元素是一个对象（object），所以称为 文档对象模型

关于dom操作，我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。

2.1 创建

1. document.write
2. innerHTML
3. createElement

2.2 增

1. appendChild
2. insertBefore

2.3 删

1. removeChild

2.4 改（主要修改dom的元素属性，dom元素的内容、属性, 表单的值等）

1. 修改元素属性： src、href、title等
2. 修改普通元素内容： innerHTML 、innerText
3. 修改表单元素： value、type、disabled等
4. 修改元素样式： style、className

2.5 查 （主要获取查询dom的元素）

1. DOM提供的API 方法： getElementById、getElementsByTagName 古老用法 不太推荐
2. H5提供的新方法： querySelector、querySelectorAll 提倡
3. 利用节点操作获取元素： 父(parentNode)、子(children)、兄(previousElementSibling、
   nextElementSibling) 提倡

2.6 属性操作 （主要针对于自定义属性。）

1. setAttribute：设置dom的属性值
2. getAttribute：得到dom的属性值
3. removeAttribute移除属性

2.7 事件操作

1. 给元素注册事件， 采取 事件源.事件类型 = 事件处理程序（现在主要是鼠标事件）

事件高级

1. 注册事件（绑定事件）

给元素添加事件，称为 注册事件 或者 绑定事件 。
注册事件有两种方式：传统方式和方法监听注册方式

1. 传统注册方式

1. 利用 on 开头的事件 onclick
2. 特点： 注册事件的唯一性
3. 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

2. 方法监听注册方式

1. w3c 标准 推荐方式
2. addEventListener() 它是一个方法
3. IE9 之前的 IE 不支持此方法，可使用 attachEvent() 代替
4. **特点：**同一个元素同一个事件可以注册多个监听器
5. 按注册顺序依次执行

1.1 addEventListener 事件监听方式(主要用这个新版本的)

1. eventTarget.addEventListener(type, listener[, useCapture])
   (方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。)

该方法接收三个参数：

1. type：事件类型字符串，比如 click 、mouseover ，注意这里不要带 on
2. listener：事件处理函数，事件发生时，会调用该监听函数
3. useCapture：可选参数，是一个布尔值，默认是 false。学完 DOM 事件流后，我们再进一步学习

1.2 attachEvent 事件监听方式 (ie8早期版本)

1. eventTarget.attachEvent(eventNameWithOn, callback)
   （方法将指定的监听器注册到 eventTarget（目标对象） 上，当该对象触发指定的事件时，指定的回调函数就会被执行）

该方法接收两个参数：

1. eventNameWithOn：事件类型字符串，比如 onclick 、onmouseover ，这里要带 on
2. callback： 事件处理函数，当目标触发事件时回调函数被调用
   注意：IE8 及早期版本支持

        var btns = document.querySelectorAll('button');
        1. 传统方式注册事件
        btns[0].onclick = function() {
   
            alert('hi');
        }
        btns[0].onclick = function() {
   
                alert('hao a u');
            }
            
       2. 事件侦听注册事件 addEventListener 
            // (1) 里面的事件类型是字符串 必定加引号 而且不带on
            // (2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序）
        btns[1].addEventListener('click', function() {
   
            alert(22);
        })
        btns[1].ad