事件冒泡

事件三个阶段

阻断事件冒泡：e.stopPropagation()

好处： 1.事件冒泡好处： 如果一个父元素中所有的子元素需要注册同名事件，只需要给父元素注册即可

        2.事件对象的一些属性介绍

            this: 谁调函数，函数中的this就代表谁 --- 事件源：指的 当前执行的事件处理函数 所属的 dom对象

            e.currentTarget ： 和this一模一样，唯一的区别就是有兼容性。 以后用this是最多的

            e.target : 真正的事件触发源 -- 真正触发这个事件的源头（子元素）  -- IE8 : e.srcElement 

         */

        //需求：给每一个li元素注册鼠标点击事件，弹出当前li元素文本

        //方式一：遍历 每个 li标签，为他们添加 onclick ，打印 自己的内容 ----------

        // let liList = document.querySelectorAll('#ul1>li');

        // for(let i = 0;i<liList.length;i++){

        //     liList[i].onclick = function(){

        //         console.log(this.innerHTML);                

        //     }

        // }

 1.事件冒泡： 如果一个元素的事件被触发 ，所有父级元素同名事件会被依次触发

            事件源->父元素->body->html->document->window

        2.事件捕获： 如果一个元素的事件被触发，会先触发最顶级的元素的同名事件，

        然后一级一级往下触发，直到目标元素

            window->document->html->body->父元素->事件源

        3.事件捕获事件冒泡完全相反的过程

        4.如何注册捕获阶段的事件:唯一方式：  addEventListener注册，第三个参数一定要是 true

          IE没有捕获

          addEventListener(事件名,事件处理函数，是否捕获阶段)

                                                 false -  则事件 为 冒泡阶段 事件

                                                 true - 则事件 为 捕获阶段 事件

        5.阻止冒泡也可以阻止捕获

拓展：e.preventdefault()意思是阻止默认事件执行,比如点击超链接,默认事件就是跳转页面。如果在超链接点击事件中调用该方法,就不会再执行跳转页面

javascript的return false只会阻止默认行为，而是用jQuery的话则既阻止默认行为又防止对象冒泡。