利用事件委托提高页面性能

页面结构

<div id="container">
    <div class="record-head">
        <div class="head id">序号</div>
        <div class="head name">姓名</div>
        <div class="head sex">性别</div>
        <div class="head tel">电话号码</div>
        <div class="head province">省份</div>
        <div class="head">操作</div>
    </div>
    <ul id="list">
        <li>
            <div class="id">1</div>
            <div class="name">张三</div>
            <div class="sex">男</div>
            <div class="tel">13788888888</div>
            <div class="province">浙江</div>
            <div class="user-delete">删除</div>
        </li>
        <li>
            <div class="id">2</div>
            <div class="name">李四</div>
            <div class="sex">女</div>
            <div class="tel">13788887777</div>
            <div class="province">四川</div>
            <div class="user-delete">删除</div>
        </li>
        <li>
            <div class="id">3</div>
            <div class="name">王二</div>
            <div class="sex">男</div>
            <div class="tel">13788889999</div>
            <div class="province">广东</div>
            <div class="user-delete">删除</div>
        </li>
    </ul>
</div>

样式

* {
    padding: 0;
    margin: 0;
}

.head,
li div {
    display: inline-block;
    width: 70px;
    text-align: center;
}

li .id,
li .sex,
.id,
.sex {
    width: 15px;
}

li .name,
.name {
    width: 40px;
}

li .tel,
.tel {
    width: 90px;
}

li .del,
.del {
    width: 15px;
}

ul {
    list-style: none;
}

.user-delete {
    cursor: pointer;
}

如果单独对每个li绑定事件，会造成性能浪费；当页面节点过多时，会造成页面卡顿

使用事件委托，只绑定一次事件，大大减少了性能的损耗

function Contact() {
    this.init();
}


Contact.prototype.init = function() {
    var lis = document.querySelector('#list');
    lis.addEventListener('click', function(e) {
        var target = e.target || e.srcElement;
        if (!!target && target.className.toLowerCase() === 'user-delete') {
            target.parentNode.parentNode.removeChild(target.parentNode);
        }
    })
}

new Contact();

两个感叹号的作用：

如果明确设置了变量的值（非null/undifined/0/""等值)，结果就会根据变量的实际值来返回；如果没有设置，结果就会返回false。