js-api操作dom元素04----元素的动态操作以及事件的进阶

1.创建元素的三种方式：

 1.1 document.write()
 弊端：只能在body中添加元素；
 可以解析富文本

 <script>
        document.write('<div class="div1">我是div</div>')
    </script>

 1.2  innerHTML  
 弊端：在同级下只能添加一种元素，多个会被覆盖

<script>
        document.write('<div class="div1">我是div</div>')
        document.body.innerHTML = '<p>我是p1</p>';
        document.body.innerHTML = '<p>我是p2</p>';
    </script>
    //页面中只显示我是p2

1.3 document.createElement()
   父元素.appendChild(子元素)，给父元素的末尾添加子元素；

<button>添加元素</button>
    <div></div>
    <script>
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        var arr = ['张三', '李四', '王五', '火狐', '盒子']
        btn.onclick = function() {
            var ul = document.createElement('ul');
            div.appendChild(ul)
            for (var i = 0; i < arr.length; i++) {
                var li = document.createElement('li')
                document.querySelector('ul').appendChild(li)
                li.innerText = arr[i]
                li.onmouseover = function() {
                    this.style.backgroundColor = 'red'
                }
                li.onmouseout = function() {
                    this.style.backgroundColor = ''
                }
            }
        }
    </script>

2.事件的进阶：

      2.1  事件三要素：事件源；事件类型；书写函数体
      2.2  监听事件

<button>监听事件</button>
    <script>
        //    开始的事件点击事件
        var btn = document.querySelector('button');
        btn.onclick = function() {
            console.log(111);
        }
        btn.onclick = function() {
                console.log(222);
            }
            // 此时控制台只打印222，而不会打印111
            // 监听事件：addEventListener('事件的类型'，事件处理程序)  需要注意的是参数1事件类型不需要加on
        btn.addEventListener('click', function() {
            console.log(111);
        })
        btn.addEventListener('click', function() {
            console.log(222);
        })
        // 既打印111,又打印222
    </script>

  2.3 事件对象event，属于浏览器的内置对象。

<button>事件对象</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            console.log(event);
            console.log(event.target); //<button>事件对象</button>
            //event.target就是事件源    注意区分event.target和this的区别
        })
    </script>

3.事件冒泡：什么是冒泡事件
事件冒泡阶段：事件从事件目标target开始，往上冒泡直到页面的最上级标签。

阻止事件冒泡的方式：
3.1  e.stopPropagation()
3.2 event.cancelBubble = true;

 <div class="div1">
        <p class="p1"></p>
    </div>
    <div class="div2">
        <p class="p2"></p>
    </div>
    <script>
        // 阻止事件的冒泡
        var div1 = document.querySelector('.div1');
        var p1 = document.querySelector('.p1');
        var div2 = document.querySelector('.div2');
        var p2 = document.querySelector('.p2');
        div1.addEventListener('click', function() {
            console.log('我是div1');
        })
        p1.addEventListener('click', function() {
                console.log('我是p1'); //点击p，控制台打印'我是p1'后，再打印'我是div1'；
            })
            阻止事件冒泡：e.stopPropagation();
        div2.addEventListener('click', function() {
                console.log('我是div2');
            })
            // p2.addEventListener('click', function(e) {
            //     e.stopPropagation();
            //     console.log('我是p2'); //点击p，控制台只打印'我是p2'，不打印'我是div2'
            // })
            阻止事件冒泡：event.cancelBubble = true;
        p2.addEventListener('click', function() {
            event.cancelBubble = true;
            console.log('我是p2'); //点击p，控制台只打印'我是p2'，不打印'我是div2'
        })
    </script>

 3.3  监听事件的第三个参数：