事件委托的小应用

vvpale 发布于2019-08-22 10:53 / 3408人阅读

事件委托

事件委托
利用冒泡原理，把事件加到父级元素上，触发事件的执行效果

优点：

节省内存开销

对于追加的节点同样有效

举了例子，创建一堆无序列表，我们希望当鼠标滑过的时，改变当前

的背景颜色


    Event commission
    mountain
    leopard
    tiger
    Stalin
    Hitler
    Barton

    var ulBox = document.getElementById("ulBox");
    var li = document.getElementsByTagName("li");
    var l = li.length;
    for(i=0;i
这样，我们已经为每个 
 都添加了事件，但是，这个事件循环了 i 次，比较消耗性能。
用事件代理也可以实现同样的效果
    var ulBox = document.getElementById("ulBox");
    ulBox.onmouseover = function(e){
        var hover = e||window.event;//获取事件对象，
        var nodeLi = hover.target||hover.srcElement;//获取事件对象的具体子元素
        nodeLi.style.background="red";
    }
    
    ulBox.onmouseout = function(e){
        var hover = e||window.event;//获取事件对象，
        var nodeLi = hover.target||hover.srcElement;//获取事件对象的具体子元素
        nodeLi.style.background="red";
    }
如果我们要追加几个 
 ，使用一个


    Event commission
    mountain
    leopard
    tiger
    Stalin
    Hitler
    Barton

如果使用常规方法
    var ulBox = document.getElementById("ulBox");
    var li = document.getElementsByTagName("li");
    var btn = document.getElementById("btn");
    var l = li.length;
    for(i=0;i
新加入的 
 并不能响应滑过变色的事件，因为在添加完元素之前，循环已经执行完毕。
使用事件委托，即可以直接响应事件效果
        ulBox.onmouseover=function(e){
            var hover=e||window.event;
            var nodeLi=hover.target||hover.srcElement;
            nodeLi.style.background="red";
        }
        ulBox.onmouseout=function(e){
            var hover=e||window.event;
            var nodeLi=hover.target||hover.srcElement;
            nodeLi.style.background="";
        }
       
        btn.onclick=function(){
            var oLi = document.createElement("li");
            oLi.innerHTML="Low";
            ulBox.appendChild(oLi);
        }

GPU云服务器云服务器委托事件事件委托事件委托c javascript事件委托

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91396.html

JavaScript MVC 学习笔记（三）类的使用（中）

摘要：实际上，可以将其理解为某种形式的继承。如果上下文是，则使用全局对象代替。例如的第个参数是上下文，后续是实际传入的参数序列中允许更换上下文是为了共享状态，尤其是在事件回调中。公开记录学习JS MVC，不知道能坚持多久= =。以《基于MVC的JavaScript web富应用开发》为主要学习资料。接上一篇类的学习，发现实在是看晕了，有些例子是能看懂在干嘛，但是不知道为什么这样做，有的甚至...

DandJ 2019-08-22 10:56 评论0 收藏0
彻底搞懂JS事件冒泡与捕获

摘要：事件冒泡与事件捕获事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流事件发生顺序的问题。如下假设三层都有事件监听，这时我们点击的小的蓝方框，事件执行的顺序是怎么样的呢红黄蓝事件冒泡微软提出了名为事件冒泡的事件流。事件冒泡与事件捕获事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流（事件发生顺序）的问题。如下：假设三层div都...

Half 2019-08-02 15:29 评论0 收藏0
彻底搞懂JS事件冒泡与捕获

摘要：事件冒泡与事件捕获事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流事件发生顺序的问题。如下假设三层都有事件监听，这时我们点击的小的蓝方框，事件执行的顺序是怎么样的呢红黄蓝事件冒泡微软提出了名为事件冒泡的事件流。事件冒泡与事件捕获事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流（事件发生顺序）的问题。如下：假设三层div都...

zhangxiangliang 2019-08-23 18:36 评论0 收藏0
彻底搞懂JS事件冒泡与捕获

摘要：事件冒泡与事件捕获事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流事件发生顺序的问题。如下假设三层都有事件监听，这时我们点击的小的蓝方框，事件执行的顺序是怎么样的呢红黄蓝事件冒泡微软提出了名为事件冒泡的事件流。事件冒泡与事件捕获事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流（事件发生顺序）的问题。如下：假设三层div都...

周国辉 2019-08-30 11:22 评论0 收藏0