事件委托——前端面试

事件委托又名事件代理。

定义:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。

为了便于理解,我们还是用取快递的例子:

HW公司有三个员工有快递,那么有两个方式取快递。

(1)三个人都等在公司门口,等快递小哥过来取快递;

(2)委托前台帮忙代取快递,并核对信息;

即,对于(2)对于公司已有员工的快递,前台也能核对信息签收,对于公司新入职的员工,也能进行记录并核对。

为什么要用事件委托呢?

在javascript中访问dom节点的次数越多,引起浏览器重绘与重排的次数就会越多,就会延长整个页面交互事件。如果使用事件委托,将所有与dom有关的操作放在js中,与dom的交互只有一次,就能提高性能。

对很多元素进行操作时,如果一个一个执行渲染,那真的是对性能的巨大浪费,但是转换思维,如果对他的父元素进行操作,那么只需进行一次,既节省内存,又提高了性能。

事件委托如何实现?

引用学习中的例子进行讲解:

    
  • 111
  • 222
  • 333
  • 444

功能:点击li元素,实现弹框“触发li弹窗事件”

常规写法:

    var ulList = document.getElementById("ul_list");
    var liList = ulList.getElementsByTagName("li");
    for (var i = 0; i < liList.length; i++) {
        liList[i].onclick = function () {
            alert("触发li弹窗事件")
        }
    }

对于常规写法,首先要找到父级元素ul,在循环给子元素添加事件,如果是100个li元素,那性能自然是不高。

事件委托:


    var ulList = document.getElementById("ul_list");
    ulList.onclick = function () {
        alert("触发li弹窗事件")
    }

对于事件委托写法,点击li元素时,li元素会触发事件冒泡到达父元素,则触发对应事件;同时点击ul也是一样。

功能:只点击li才会发生效果

event事件提供了target属性,target永远表示当前事件的dom,即当前的事件,不是冒泡到的事件。

    var ulList = document.getElementById("ul_list");
    ulList.onclick = function (e) {
        // console.log(e)
        var e = e || window.event;
        var target = e.target || e.srcElement;
        if (target.nodeName === 'LI') {
            alert("触发li弹窗事件" + target.innerHTML)

        }
    }

每个操作都不相同

    
  • 111
  • 222
  • 333
  • 444
    var li1 = document.getElementById("li1")
    var li2 = document.getElementById("li2")
    var li3 = document.getElementById("li3")
    var li4 = document.getElementById("li4")
    li1.onclick = function(){
        console.log("this is li1!")
    }
    li2.onclick = function(){
        console.log("this is li2!")
    }
    li3.onclick = function(){
        console.log("this is li3!")
    }
    li4.onclick = function(){
        console.log("this is li4!")
    }

每个操作都不相同的事件委托

    var ulList = document.getElementById("ul_list");
    ulList.onclick = function (e) {
        var e = e || window.event;
        var target = e.target || e.srcElement;
        if (e.target.nodeName === "LI") {
            switch (target.id) {
                case 'li1':
                    console.log("this is li1!")
                    break;
                case 'li2':
                    console.log("this is li2!")
                    break;
                case 'li3':
                    console.log("this is li3!")
                    break;
                case 'li4':
                    console.log("this is li4!")
                    break;
            }
        }
    }

只进行一次dom操作即可实现对应效果。

对于新增节点:


    var btn = document.getElementById("btn");
    var ulList = document.getElementById("ul_list");
    var liList = ulList.getElementsByTagName('li');
    var num = liList.length;

    //鼠标悬浮改变颜色,移除变回白色
    for (var i = 0; i < liList.length; i++) {
        liList[i].onmouseover = function () {
            this.style.background = 'lightBlue';
        };
        liList[i].onmouseout = function () {
            this.style.background = '#fff';
        };
    }
    //添加新节点
    btn.onclick = function () {
        num++;
        var newLi = document.createElement('li');
        newLi.innerHTML = 111 * num;
        ulList.appendChild(newLi);
    };

新增节点没有效果节点对应的事件效果。

那么改变方式仍然是用事件委托,在父节点上添加事件。

    var btn = document.getElementById("btn");
    var ulList = document.getElementById("ul_list");
    var liList = ulList.getElementsByTagName('li');
    var num = liList.length;

    //鼠标悬浮改变颜色,移除变回白色
    ulList.onmouseover = function (e) {
        var e = e || e.srcElement;
        var target = e.target || e.srcElement;
        if (target.nodeName === "LI") {
            target.style.background = 'lightBlue';
        }
    };
    ulList.onmouseout = function (e) {
        var e = e || e.srcElement;
        var target = e.target || e.srcElement;
        if (target.nodeName === "LI") {
            target.style.background = '#fff';
        }
    };

    //添加新节点
    btn.onclick = function () {
        num++;
        var newLi = document.createElement('li');
        newLi.innerHTML = 111 * num;
        ulList.appendChild(newLi);
    };

本文是学习与分享。欢迎指正。

  参考链接:js中的事件委托或是事件代理详解 - 凌云之翼 - 博客园

你可能感兴趣的:(javascript,面试)