1. related operations of the node

1.1 Delete method

Delete method of node node: node.removeChild (nodes),
review the method of adding a node: node.appendChild (nodes),

1.2 Copy operation (clone)

Assignment method node: node.cloneNode ();
caveats:

cloneNode here () brackets have two values a false A true. If it is false it is to represent the "shallow" clone. Just copy the label does not copy the contents inside

1.3 create elements of three ways

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

Note: There is a difference between them

document.write content is written directly to the content flow will lead to redraw the text of the page
innerHTML is to write the contents of a DOM node will not result in redrawn, but this is to take the string concatenation, a bit complicated
createElemnet () also create elements, the efficiency is not very high, but higher than the innerHTML createElement

Is there a more efficient way of? Have! , Using an array plus innerHTML

  function fn() {
        var d1 = +new Date();
        var array = [];
        for (var i = 0; i < 1000; i++) {
            array.push('<div style="width:100px; height:2px; border:1px solid blue;"></div>');
        }
        document.body.innerHTML = array.join('');
        var d2 = +new Date();
        console.log(d2 - d1);
    }
    fn();

2.DOM core knowledge points

Core knowledge points. It is a series of standard programming interfaces

DOM tree, is the core of parity, acquired through the DOM is a subject that has its attributes, its methods have

2.1 Create

Said earlier mainly three write, innerHTML, createElement

2.2 add, delete, change,

The following are specifically related to the operation!

2.3 Operation attribute

3. Advanced Operations events

3.1 What is a registered events (two kinds

The traditional way

- 使用on开头的时间
- 然后给一个函数btn.onclick = function(){}
- 这种方式注册事件是唯一的，如果后面还有，会发生覆盖

Registered way to listen

这就是比较高端的方式了。addEvenListener(),如果是ie9之前，使用attachEvent，
同一个元素可以有多个监听器，按注册的顺序执行

In the end how to use it? What are some precautions it?

//公式 把监听器放在eventTarget上面
eventTarget.addEventListener(Type,Listener[,userCapture])
//参数说明》
type:事件类型的字符串，比如click ，这里不需要带有on
listener：事件的处理函数，事件发生的时候会调用
userCapture：是一个布尔值，可选参数，默认是false与事件流有关


eventTarget.attachEvent(eventNameWithON，callback)方法将指定的监听器注册到 eventTarget（目标对象） 上，当该对象触发指定的事件时，指定的回调函数就会被执行。
这里的时间需要指定on ，

Monitor and event handling 3.2 compatibility

For compatibility events, we can go directly to a function package deal

3.2 Delete event

This is also the same, there are two ways, one is the traditional one is listening event.

evemtTarget.onclick = null;

eventTarget.removeEventListener(Type,Listener[,userCapture])
eventTarget.detachEvent(eventNameWithON，callback)

    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        var divs = document.querySelectorAll('div');
        divs[0].onclick = function() {
            alert(11);
            // 1. 传统方式删除事件
            divs[0].onclick = null;
        }
        // 2. removeEventListener 删除事件
        divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号
        function fn() {
            alert(22);
            divs[1].removeEventListener('click', fn);
        }
        // 3. detachEvent
        divs[2].attachEvent('onclick', fn1);

        function fn1() {
            alert(33);
            divs[2].detachEvent('onclick', fn1);
        }
    </script>

同样的对于兼容性的处理，我们也可以使用兼容性的封装函数

3.3DOM事件流

所谓的事件流指的是从页面中接受到事件的顺序。

我们的事件状态一共与三种捕获状态——>当前目标阶段——>冒泡阶段

js在执行代码的时候，只能执行其中的捕获或者冒泡阶段，
onclick还有attachEvent只能得到冒泡，
对于另外的一个绑定事件的函数，第三个值userCapture前面的值，默认是false表示是在冒泡阶段调用处理程序，如果是true就是在捕获的时候执行。

以下的时间是没有冒泡的，onblur，onfocus，onmouseenter,onmouseleave
事件冒泡

    <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        // onclick 和 attachEvent（ie） 在冒泡阶段触发
        // 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 
        // son -> father ->body -> html -> document
        var son = document.querySelector('.son');
        // 给son注册单击事件
        son.addEventListener('click', function() {
            alert('son');
        }, false);
        // 给father注册单击事件
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false);
        // 给document注册单击事件，省略第3个参数
        document.addEventListener('click', function() {
            alert('document');
        })
    </script>

事件捕获

    <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        // 如果addEventListener() 第三个参数是 true 那么在捕获阶段触发
        // document -> html -> body -> father -> son
         var son = document.querySelector('.son');
        // 给son注册单击事件，第3个参数为true
         son.addEventListener('click', function() {
             alert('son');
         }, true);
         var father = document.querySelector('.father');
        // 给father注册单击事件，第3个参数为true
         father.addEventListener('click', function() {
             alert('father');
         }, true);
        // 给document注册单击事件，第3个参数为true
        document.addEventListener('click', function() {
            alert('document');
        }, true)
    </script>

4.事件对象

事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象。

4.1事件对象的使用

在事件处理函数中声明1个形参用来接收事件对象。这个形参就是e ，function(e)
它的兼容性问题,在window.event中获取查找，e = e || window.event;

只要“||”前面为false, 不管“||”后面是true 还是 false，都返回 “||” 后面的值。
只要“||”前面为true, 不管“||”后面是true 还是 false，都返回 “||” 前面的值。

    <div>123</div>
    <script>
        var div = document.querySelector('div');
        div.onclick = function(e) {
                // 事件对象
                e = e || window.event;
                console.log(e);
        }
    </script>

4.2事件的属性和方法

e.target 和 this 的区别

this 是事件绑定的元素（绑定这个事件处理函数的元素）。
e.target 是事件触发的元素。

常情况下terget 和 this是一致的，
但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行），
  这时候this指向的是父元素，因为它是绑定事件的元素对象，
  而target指向的是子元素，因为他是触发事件的那个具体元素对象。

    <div>123</div>
    <script>
        var div = document.querySelector('div');
        div.addEventListener('click', function(e) {
            // e.target 和 this指向的都是div
            console.log(e.target);
            console.log(this);

        });
    </script>

事件冒泡下的e.target和this

    <ul>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
              // 我们给ul 绑定了事件  那么this 就指向ul  
              console.log(this); // ul

              // e.target 触发了事件的对象 我们点击的是li e.target 指向的就是li
              console.log(e.target); // li
        });
    </script>

4.1阻止默认行为

html中一些标签有默认行为，例如a标签被单击后，默认会进行页面跳转。

    <a href="http://www.baidu.com">百度</a>
    <script>
        // 2. 阻止默认行为 让链接不跳转 
        var a = document.querySelector('a');
        a.addEventListener('click', function(e) {
             e.preventDefault(); //  dom 标准写法
        });
        // 3. 传统的注册方式
        a.onclick = function(e) {
            // 普通浏览器 e.preventDefault();  方法
            e.preventDefault();
            // 低版本浏览器 ie678  returnValue  属性
            e.returnValue = false;
            // 我们可以利用return false 也能阻止默认行为 没有兼容性问题
            return false;
        }
    </script>

4.2阻止事件冒泡

e.stopPropagation()

e.canceBubble = true;

    <div class="father">
        <div class="son">son儿子</div>
    </div>
    <script>
        var son = document.querySelector('.son');
        // 给son注册单击事件
        son.addEventListener('click', function(e) {
            alert('son');
            e.stopPropagation(); // stop 停止  Propagation 传播
            window.event.cancelBubble = true; // 非标准 cancel 取消 bubble 泡泡
        }, false);

        var father = document.querySelector('.father');
        // 给father注册单击事件
        father.addEventListener('click', function() {
            alert('father');
        }, false);
        // 给document注册单击事件
        document.addEventListener('click', function() {
            alert('document');
        })
    </script>

同样的这里也有兼容性的处理方法

if(e && e.stopPropagation{
    e.stopPropagation()
}else{
    windows.evet.canceBubble  = true;
}

4.3事件委托（原理还有作用）

说白了就是，不给子元素注册事件，给父元素注册事件，把处理代码在父元素的事件中执行。

委托的原理：利用了冒泡
：给父元素注册事件，利用事件冒泡，当子元素的事件触发，会冒泡到父元素，然后去控制相应的子元素。这么做，可以提高一些性能

我们只操作了一次 DOM ，提高了程序的性能。
动态新创建的子元素，也拥有事件。

    <ul>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
    </ul>
    <script>
        // 事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            // e.target 这个可以得到我们点击的对象
            e.target.style.backgroundColor = 'pink';
        })
    </script>

JavaScript-- node operation, DOM core, event listeners