DOM事件-事件委托-自定义事件

1.dom事件的级别（发展史）

1. dom0: element.οnclick= function(){}
2. dom1: (没有规定事件相关内容)
3. dom2: element.addEventListener(‘click’,function(){})
4. dom3: element.addEventListener(‘keyup’,function(){})
   除了鼠标点击click事件外，还提供了键盘按压、弹起等类型

2.事件模型

1.捕获 2.冒泡

3.事件流

事件被捕获——>到达目标元素——>事件冒泡上去

4.dom事件捕获的具体流程

window——>document——>html——>body——>父元素——>子元素——>…——>目标元素

5.event对象的常见应用：事件代理/事件委托

作用： 代码性能的优化。不需要每个子元素都循环绑定同一个事件，而是委托给父元素统一处理。根据event.target判断是哪个子元素触发的,再做相应处理

<section class="parent">
        <div class="sibling">1</div>
        <div class="sibling">2</div>
        <div class="sibling">3</div>
        <div class="sibling">4</div>
</section>
<script>
    var parent = document.getElementsByClassName('parent')[0];
    parent.addEventListener('click',function (event) {
        console.log("触发事件的元素");
        console.log(event.target);//点击的某一sibling
        console.log("绑定事件的元素");
        console.log(event.currentTarget);//parent
    })
</script>

6.自定义事件

作用： 模拟用户的操作，比如模拟用户点击某个按钮

<!--自定义事件Event-->
<script>
    var event1 = new Event('myEvent');
    var box = document.getElementsByClassName('event-custom-box')[0];
    box.addEventListener('myEvent',function () {
        console.log('event1');
    })
    setTimeout(function () {
        box.dispatchEvent(event1);
    },1000)
</script>

<!--自定义事件CustomEvent-->
<section class="event-custom-box2">自定义custom事件</section>
<script>

    var event2 = new CustomEvent('myCustomEvent',{detail:{name:'lalaBao'}})
    var box2 = document.getElementsByClassName('event-custom-box2')[0];
    box2.addEventListener('myCustomEvent',function (event) {
        console.log(event.detail.name);//lalaBao
    })
    setTimeout(function () {
        box2.dispatchEvent(event2);
    },1000)

</script>

CustomEvent 和 Event的区别，CustomEvent可以给事件绑定数据，传入对象的detail属性会被绑定到event上