事件委托的应用—座位预定

DOM事件流

定义

DOM事件流包括三个阶段

• 捕获阶段：事件的触发响应会从最外层目标一层层地向内到最低层；
• 目标阶段：目标阶段就是指事件响应到触发事件的最底层元素上；
• 冒泡阶段：事件的触发响应会从最底层目标一层层地向外到最外层；

事件触发时会在元素节点间按照特定的顺序传播，这个传播的过程就是DOM事件流

图例

事件委托

概念

事件委托，就是把一个元素响应事件的函数委托到另一个元素；
一般来讲，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数。

优点

1.可以减少事件的注册，节省内存占用

在每行里面我们有许多座位，我们需要在点击座位的时候来切换预定状态；

<div class="area">
	<div class="row">
        <div class="seat"></div>
        <div class="seat"></div>
        <div class="seat"></div>
        <div class="seat"></div>
        <div class="seat"></div>
        <div class="seat"></div>
        <div class="seat"></div>
        <div class="seat"></div>
	</div>
//div.row*20
<div class="area">

如果给每个座位都绑定一个函数，会增加很多DOM操作，也占用很多内存资源。
如果用事件委托把座位的点击事件绑定到一个合适的外层元素上（area)，然后在执行事件的时候再去匹配判断目标元素(使用e.target)。
所以事件委托可以提高内存和性能。

2.适合动态元素的绑定事件

新添加的元素也会有监听函数，也可以有事件触发机制。

应用示例–座位预定

预览

布局

<h1>电影座位预定</h1>
    <ul class="seatExample">
        <li>
            <div class="seat example"></div>
            <small>可选</small>
        </li>
        <li>
            <div class="seat selected example"></div>
            <small>已选</small>
        </li>
        <li>
            <div class="seat occupied example"></div>
            <small>不可选</small>
        </li>
    </ul>

    <div class="area">
        <div class="screen"></div>
    </div>

座位预定

座位的动态生成：

const oarea = document.querySelector(".area");
const oseat = document.querySelectorAll("row .seat:not(.occupied)");

window.onload = function createState() {
    for(let i = 1;i<=6;i++){
        let row = document.createElement('div')
        oarea.appendChild(row)
        row.setAttribute('class','row')
        for(let j = 1;j<=8;j++) {
            let newseat = document.createElement('div');
            row.appendChild(newseat);
            newseat.setAttribute('class', 'seat');
            // newseat.addEventListener('click',function(e){
            //     if(newseat.classList.contains('seat')&&
            //     !newseat.classList.contains('occupied'))
            //     {
            //         newseat.classList.toggle('selected');
            //     }
		}
	}
}

在添加上的元素中通过 setAttributet 方法添加样式，可以根据自己的需求自己去写相应的css代码。

注释部分是在每个座位元素创立时绑定事件。

使用事件委托，给最外面的 .area 添加监听器，那么点击座位时的时候，都会冒泡到外层的 .areo 上（.seat>.row>.area), e.target 返回目标节点。

oarea.addEventListener("click",function(e){
    if(e.target.classList.contains('seat')&&
    !e.target.classList.contains('occupied'))
    {
        e.target.classList.toggle('selected');
    }
})

结尾

以上就是事件委托在电影座位预定中的使用啦。之前阅读介绍事件委托的文章时大都是用抽象的例子来解释,所以自己补充了在具体的情况下的应用了。