JS事件之事件委托

最新推荐文章于 2023-07-05 23:37:25 发布

关耳佳

最新推荐文章于 2023-07-05 23:37:25 发布

阅读量747

点赞数

分类专栏： JS小记文章标签：事件委托事件源事件对象绑定事件添加事件

本文链接：https://blog.csdn.net/u014205965/article/details/45673609

版权

JS小记专栏收录该内容

25 篇文章 9 订阅

订阅专栏

事件委托：

一个事件本来是加到某些元素身上来完成一些事情，但是这些元素却委托其他元素来替它完成;

比如 ul下有4个li元素，现在要给这些li添加鼠标移入移出事件完成 “改变背景”

<body>
<ul id="ulList">
    <li>点我</li>
    <li>点我</li>
    <li>点我</li>
    <li>点我</li>
</ul>
</body>

常规一般我们会这样写：得到ul然后循环为每个li添加点击事件

<script>
        window.onload = function () {
            var oUl = document.getElementById('ulList');
            var aLi = oUl.getElementsByTagName('li');
            for(var i=0;i<aLi.length;i++){
                aLi[i].onmousemove = function(){
                    this.style.background="red";
                }
                aLi[i].onmouseout = function(){
                    this.style.background="";
                }
            }
        }
</script>

但是此时li委托ul帮他完成这些事情，该怎么写那？？

window.onload = function () {
     var oUl = document.getElementById('ulList');
     var aLi = oUl.getElementsByTagName('li');
     oUl.onmousemove = function (ev) {
         var e = ev || window.event; // 获取事件对象
         var target = e.srcElement || e.target;  // 获取事件源
         arget.style.background = "red";
     }
    oUl.onmouseout = function (ev) {
       var e = ev || window.event;
        var target = e.srcElement || e.target;
        target.style.background = "";
    }
}

这里简单说下什么是：“事件对象”和“事件源”

事件对象指：事件发生时，记录一些相关信息的对象；事件对象只有在事件发生时才会产生；

比如上面onmousemove 事件发生时，就产生了事件对象，我们用变量var e来接受了这个事件对象；

事件源指：当前发生事件的那个元素就是事件源

比如ul发生onmousemove 事件，那么当前事件源就是ul，如果是li发生onmousemove 事件，事件源就是li；

上面的代码就因为“事件源”的不同存在一个问题：不光是鼠标移到li上背景变色，移到ul上也会变色

上图为鼠标移到li上的效果

这个是鼠标移到ul上的效果，那么如果防止鼠标移到ul上也触发事件那？？就需要对事件源做一下判断，当事件源是li的时候才让她改变背景颜色，那么怎么判断当前事件源是ul还是li，可以通过nodeName或者tagName来判断

 if(target.nodeName == 'LI'){
     target.style.background = "red";
 }

其中target.nodeName == 'LI' 也可以写成target.tagName == 'LI' ，但需要注意不管哪种LI都必须大写，或者通过toLowerCase()来转换成小写也可以：target.tagName.toLowerCase() == 'li' ；这样就只有鼠标移入li上才会改变背景颜色；

修改后完整js代码如下：

window.onload = function () {
            var oUl = document.getElementById('ulList');
            var aLi = oUl.getElementsByTagName('li');
            oUl.onmousemove = function (ev) {
                var e = ev || window.event;
                var target = e.srcElement || e.target;
                if(target.nodeName.toLowerCase() == 'li'){
                    target.style.background = "red";
                }
            }
            oUl.onmouseout = function (ev) {
                var e = ev || window.event;
                var target = e.srcElement || e.target;
                if(target.tagName.toLowerCase() == 'li')
                target.style.background = "";
            }
 }

事件委托的好处：

1. 提高性能，如果用传统的for循环写的话，如果有100个li就需要循环为这100个li添加事件，而用事件委托明显性能就提高了

2. 新增元素自动拥有之前的事件. 这句话什么意思那？？

看下面的例子：

<ul id="ulList">
    <li>点我</li>
    <li>点我</li>
    <li>点我</li>
    <li>点我</li>
</ul>
<input id="inputBtn" type="button"  value="Click">

在ul下新增一个button按钮，当点击按钮的时候就创建一个li元素；假如用之前for循环的为li添加事件的方式，当我们点击button按钮新创建的li元素是不具有onmousemove和onmouseout事件的，新创建li元素之后，还需要单独在添加事件才可以；

window.onload = function () {
            var oUl = document.getElementById('ulList');
            var aLi = oUl.getElementsByTagName('li');
            var oBtn = document.getElementById('inputBtn');
            for(var i=0;i<aLi.length;i++){
                aLi[i].onmousemove = function(){
                    this.style.background="red";
                }
                aLi[i].onmouseout = function(){
                    this.style.background="";
                }
            }
         oBtn.onclick = function () {
         var oLi = document.createElement('li');
         oLi.innerHTML = "HELLO";
         oUl.appendChild(oLi);
         }
}

如下图所示，当鼠标移到新增的li元素上，背景是不变化的；

如果通过“事件委托的”方式，新增加的li元素也会自动拥有事件

window.onload = function () {
            var oUl = document.getElementById('ulList');
            var aLi = oUl.getElementsByTagName('li');
            var oBtn = document.getElementById('inputBtn');
 
            oUl.onmousemove = function (ev) {
                var e = ev || window.event;
                var target = e.srcElement || e.target;
                if(target.nodeName.toLowerCase() == 'li'){
                    target.style.background = "red";
                }
            }
            oUl.onmouseout = function (ev) {
                var e = ev || window.event;
                var target = e.srcElement || e.target;
                if(target.tagName.toLowerCase() == 'li')
                target.style.background = "";
            }
            oBtn.onclick = function () {
                var oLi = document.createElement('li');
                oLi.innerHTML = "HELLO";
                oUl.appendChild(oLi);
            }
}

如下图所示：

关耳佳

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS事件之事件委托

事件委托：一个事件本来是加到某些元素身上来完成一些事情，但是这些元素却委托其他元素来替它完成;比如 ul下有4个li元素，现在要给这些li添加鼠标移入移出事件完成 “改变背景” 点我点我点我点我常规一般我们会这样写：得到ul然后循环为每个li添加点击事件 window.onload = functi
复制链接

扫一扫

专栏目录