2022.3.7——事件的委派

2022-03-07 16:02:56 阅读：177 来源： 互联网

标签：委派 target 元素事件 table td ev 2022.3

理解：

顾名思义就是把某个元素的事件委托给另一个元素，但是又不能随便委派，js里我们是根据事件冒泡的原理，用法是将事件统一绑定给元素共同的祖先元素，这样当后代元素上的事件被触发时，会一直冒泡到祖先元素，从而通过祖先元素的相应函数来处理事件

举个例子：

这有一个表格，我们想实现通过设置一个点击函数就能做到表格每个元素的点击函数的实现

HTML代码：

<table>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </table>

稍微设置一下样式让他好看点：

td{
            width: 50px;
            height: 50px;
            background-color: antiquewhite;
            text-align: center;
        }

如果不使用事件委派的话，我们会这样操作：

 window.onload = function(){
            var tds = document.getElementsByTagName("td");
            for(var i=0;i<tds.length;i++){
                tds[i].onclick = function(){
                    alert("ok");
                }
            }
        }

这样操作有什么缺点呢？

我们添加到dom上的事件数量越多，与dom节点交互的次数越多，浏览器重排的次数越多，通俗的说就是影响到性能了（每个函数也都会占据空间，click多了就会占很多内存，所以性能差了），所以我们要减少dom节点的访问，此时我们就可以用事件委派，只click一次，如下：

 window.onload = function(){
            var table = document.getElementsByTagName("table")[0];
            table.onclick = function(ev){
                var ev = ev || window.event;
                var target = ev.target || ev.srcElement;
                if(target.nodeName.toLocaleLowerCase()=='td'){
                    alert("ok!")
                }
            }
            
        }

上面代码的重点：

先获取table，然后设置table的点击函数，此时我们点击table范围内的区域都会执行onclick事件，

而我们只想要点击td时会触发，这时就需要event的一个target属性了，这个属性会返回事件的目标节点，通俗的说就是我们点一个td会返回这个td节点（注意这里返回的是最小的子代）。

target属性存在兼容性问题，在ie浏览器是event.srcElement，在其他浏览器是ev.target，同时我们的event也是需要处理兼容性问题（如代码），其实我们不需要处理了以后，因为今年的6月份IE就跟我们说byebye了

然后我们就判断一下我们点击的元素是否是td就好了，因为nodeName返回的大写字母，感觉不舒服就使用toLocaleLowerCase()换成了小写，ok了。（当然我们实际情况可以使用其他的判断方法比如className等等，这样也能对我们要处理的事件分类了）

事件委派的好处：

通过委派可以减少重复代码，提高性能
随时可以添加子元素，添加的子元素会自动有相应的处理事件（因为都会在我们的父元素上触发事件）

缺点：

适合使用的只有点击，鼠标的按下和放开，键盘的按下和放开等，但是其他像mouseover和mouseout就不适合了，因为要计算他们的位置，不好处理

标签：委派,target,元素,事件,table,td,ev,2022.3
来源： https://www.cnblogs.com/mlhiter/p/15976312.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

2022.3.7——事件的委派

理解：

举个例子：

事件委派的好处：

缺点：