什么是事件委托:
通俗的讲, 事件就是 onclick,onmouseover,onmouseout, 等就是事件, 委托的呢就是让别人来做, 这个时间本来是加在某些元素上的, 然而你却加到别人身上来做, 完成这个事件.
原理:
利用冒泡的原理, 把事件加到父级上, 触发执行效果.
优点:
1. 提高性能.
例如: 需要触发每个 li 来改变他们的背景颜色.
- <ul id = "ul">
- <li>aaaa</li>
- <li>aaaa</li>
- <li>aaaa</li>
- </ul>
- Windows.onload = function(){
- // 获取到 ul
- var oUl = document.getElementById('ul');
- // 获取到所有的 li
- var aLi = oUl.getElementsByTagName('li');
- // 遍历 li
- for(var i = 0;i < aLi.length;i ++){
- // 给所移入的 li 添加事件
- aLi[i].onmouseover = function(){
- this.style.background = 'red';
- }
- // 添加移出事件
- aLi[i].onmouseout = function(){
- this.style.background = '';
- }
- }
- }
这样就可以做到 li 上面添加鼠标事件.
但是如果说我们可能有很多个 li 用 for 循环的话就比较影响性能
下面我们可以用事件委托的方式来实现这样的效果.(html 不变)
- /*
- 利用事件委托实现
- */
- Windows.onload = function(){
- // 获取到 ul
- var oUl = document.getElementById('ul');
- // 获取到所有的 li
- var aLi = oUl.getElementsByTagName('li');
- /*
- 这里要用到事件源: event 对象, 事件源, 不管在那个事件中, 只要你操作的那个元素就是事件源.
- 兼容:
- IE:Windows.event.srcElement
- 标准下: event.target
- nodeName: 找到元素的标签名
- */
- oUl.onmouseover = function(e){
- var e = e || Windows.event;// 兼容
- var target = e.target || e.srcElement;
- //alert(target.innerHtml);//undefined
- // 将大写改为小写 事件源中英文都是大写
- if(target.nodeName.toLowerCase() == 'li'){
- target.style.background = 'red';
- }
- }
- oUl.onmouseout = function(e){
- var e = e || Windows.event;// 兼容
- var target = e.target || e.srcElement;
- //alert(target.innerHtml);//undefined
- // 将大写改为小写 事件源中英文都是大写
- if(target.nodeName.toLowerCase() == 'li'){
- target.style.background = '';
- }
- }
- }
优点:
2. 新添加的元素还会有之前的事件.
还拿这个例子来看, 但是我们要做动态的添加 li. 点击 button 动态添加 li
例如:
- /*
- 不使用事件委托点击 button 动态添加 li, 新添加的 li 没有鼠标移入事件.
- */
- Windows.onload = function () {
- var oUl = document.getElementById("ul");
- var aLi = oUl.getElementsByTagName("li");
- var oBtn = document.getElementById("btn");
- var iNow = 4;
- for (var i = 0; i < aLi.length; i++) {
- aLi[i].onmouseover = function () {
- this.style.background = "red";
- }
- aLi[i].onmouseout = function () {
- this.style.background = "";
- }
- }
- oBtn.onclick = function () {
- iNow++;
- var oLi = document.createElement("li");
- oLi.innerHTML = 1111 * iNow;
- oUl.appendChild(oLi);
- }
- }
这样做新添加的 li 没有鼠标移入事件.
因为点击添加的时候 for 循环已经执行完毕
那么我们就要用事件委托的方式来做
- Windows.onload = function () {
- var oUl = document.getElementById("ul");
- var aLi = oUl.getElementsByTagName("li");
- var oBtn = document.getElementById("btn");
- var iNow = 4;
- oUl.onmouseover = function (ev) {
- var ev = ev || Windows.event;
- var target = ev.target || ev.srcElement;
- //alert(target.innerHTML);
- if (target.nodeName.toLowerCase() == "li") {
- target.style.background = "red";
- }
- }
- oUl.onmouseout = function (ev) {
- var ev = ev || Windows.event;
- var target = ev.target || ev.srcElement;
- //alert(target.innerHTML);
- if (target.nodeName.toLowerCase() == "li") {
- target.style.background = "";
- }
- }
- oBtn.onclick = function () {
- iNow++;
- var oLi = document.createElement("li");
- oLi.innerHTML = 1111 * iNow;
- oUl.appendChild(oLi);
- }
- }
来源: https://www.cnblogs.com/1512344358qq/p/10388500.html