DOM事件的整理总结

引言

今天上课的时候有点困了,于是打开手机看看前端的零散小文章,突然看到了“事件委托”这个名词,嘤嘤嘤?在这里插入图片描述
于是我决定把找dom事件稍微梳理一下,可能不是很全面,因为有些实在是不怎么常用,我也记不太住,以后需要用的时候就去查一查,然后再补充进来吧嘿嘿嘿!!

主要内容

首先我梳理一下我今天整理的主要内容,主要为事件冒泡事件捕获还有事件委托

正式开始啦

什么是事件流?

流的概念现今的JavaScript中随处可见,比图react中的单向数据流、node中的流、还有我们的dom时间流:用术语说流是对输入输出设备的抽象。以程序的角度来说,流是具有方向的数据。

事件流的事件冒泡和事件捕获

想想一张纸上有一组半径不等的同心圆,如果我把手指放在圆心上,那么手指指向的其实不是一个圆,而是纸上所有的圆,当我们点击其中的一个圆,那我们就同时点击了所有的父元素。
提问:点击按钮时,是最外层的父元素先收到事件并执行,还是具体元素先收到事件并执行?
回答:有两种观点,事件冒泡和事件捕获。

事件冒泡

事件冒泡也就是时间开始的时候有最具体的元素接收(也就是事件发生所在的结点),然后逐级传播到较为不具体的结点。
举个栗子:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Event Bubbling</title>
</head>
<body>
  <button id="clickMe">Click Me</button>
</body>
</html>

给button以及它的父元素加入点击事件。

var button = document.getElementById('clickMe');

button.onclick = function() {
  console.log('1. You click Button');
};
document.body.onclick = function() {
  console.log('2. You click body');
};
document.onclick = function() {
  console.log('3. You click document');
};
window.onclick = function() {
  console.log('4. You click window');
};

效果就是这样:
在这里插入图片描述
我们可以看出当我们点击了button之后整个点击事件的传播顺序是button→body→document→window
click事件首先再button元素上面发生,然后逐级向上传播,这就是事件冒泡。

事件捕获

说完了事件冒泡,应该很简单就是像泡泡一样biubiubiu上去。我们来看看事件捕获
事件捕获,它认为事件发生的时候,父元素应该更早地接收到事件,具体元素则最后接收到事件,如果是我们刚才的demo,那么事件地发生顺序应该是window→document→body→ button。
现在事件冒泡方式更胜一筹

DOM事件流

说了那么多,我们现在来整合一下我们的DOM事件流,主要分为三个阶段:

  • 事件捕获阶段
  • 处理目标阶段
  • 事件冒泡阶段
    在这里插入图片描述
  1. 事件捕获阶段
    当事件发生时,首先发生的是事件捕获,为父元素截获事件提供了机会。
    我们可以把上面的demo,window点击事件改为使用事件捕获模式(addEventListener最后一个参数, 为true则代表使用事件捕获模式 ,false则表示使用事件冒泡模式
window.addEventListener('click', function() {
  console.log('4. You click window');
}, true);

此时我们再点击button就会出现这样的效果
在这里插入图片描述
2. 处理目标与事件冒泡阶段
事件到了具体元素时,在具体元素上发生,并且被看成冒泡阶段的一部分,随后冒泡阶段发生,事件开始冒泡。
3. 阻止事件冒泡
事件冒泡过程其实是可以被组织的,防止冒泡带来一些不必要的错误和困扰,方法就是stopPropagation()
我们对button的click事件加上阻止冒泡

button.addEventListener('click', function(event) {
  // event为事件对象
  console.log('1. You click Button');
  event.stopPropagation();
  console.log('Stop Propagation!');
}, false);

我们可以看到如下效果:
在这里插入图片描述
可以看到冒泡被组织了,但是这个并不会影响父元素的事件捕获哦~~~

JavaScript中的事件委托

定义:

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

  • 现有dom节点的事件
  • 新添加dom节点的事件
原因

访问dom次数越多,引起浏览器重绘与重排的次数也就越多,会延长整个页面的交互就需时间。
所以性能优化的主要思想之一就是减少DOM操作,如果此时我们能够用事件委托,所有的操作都会放到js程序里面,与dom的操作就只需要交互一次,大大减少交互次数,提高性能。

原理

事件委托是利用事件冒泡来实现的,举个例子:我们给最外层的div加上一个点击事件,页面上所有子元素的点击事件都会冒泡到最外层的div上面,所以都会触发,委托它们父级代为执行事件就是事件委托

现有dom节点的事件如何实现?
  1. 一般方法
<ul id="ul1">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>

使用Event对象的一个属性target,可以返回事件的目标节点,也叫做事件源,可以表示为当前时间操作的dom,但不是真正地dom。

window.onload = function(){
		      var oUl = document.getElementById("ul1");
		      oUl.onclick = function(ev){
		    	    var ev = ev || window.event;
		   		    var target = ev.target || ev.srcElement;
		            if(target.nodeName.toLowerCase() == 'li'){
		                	alert(123);
		         alert(target.innerHTML);
				    }
		      }
		}
  1. 不同元素不同方法
<div id="box">
        <input type="button" id="add" value="添加" />
        <input type="button" id="remove" value="删除" />
        <input type="button" id="move" value="移动" />
        <input type="button" id="select" value="选择" />
    </div>
window.onload = function(){
            var oBox = document.getElementById("box");
            oBox.onclick = function (ev) {
                var ev = ev || window.event;
                var target = ev.target || ev.srcElement;
                if(target.nodeName.toLocaleLowerCase() == 'input'){
                    switch(target.id){
                        case 'add' :
                            alert('添加');
                            break;
                        case 'remove' :
                            alert('删除');
                            break;
                        case 'move' :
                            alert('移动');
                            break;
                        case 'select' :
                            alert('选择');
                            break;
                    }
                }
            }
            
        }
新添加dom节点的事件如何实现?
<input type="button" name="" id="btn" value="添加" />
    <ul id="ul1">
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
    </ul>

我们需要移入li,li变红,移出li,li变白,然后点击按钮,我们可以向ul中添加一个子节点li。
如果不按照事件委托的方法,我们要么没办法给新加入的li元素加上事件,要么就会增加一些dom操作,使得性能降低。
使用事件委托的方法:

window.onload = function(){
            var oBtn = document.getElementById("btn");
            var oUl = document.getElementById("ul1");
            var aLi = oUl.getElementsByTagName('li');
            var num = 4;
            
            //事件委托,添加的子元素也有事件
            oUl.onmouseover = function(ev){
                var ev = ev || window.event;
                var target = ev.target || ev.srcElement;
                if(target.nodeName.toLowerCase() == 'li'){
                    target.style.background = "red";
                }
                
            };
            oUl.onmouseout = function(ev){
                var ev = ev || window.event;
                var target = ev.target || ev.srcElement;
                if(target.nodeName.toLowerCase() == 'li'){
                    target.style.background = "#fff";
                }
                
            };
            
            //添加新节点
            oBtn.onclick = function(){
                num++;
                var oLi = document.createElement('li');
                oLi.innerHTML = 111*num;
                oUl.appendChild(oLi);
            };
        }

使用事件委托的办法,只要给父级元素添加时间就好了,其他的都是在js里面执行,大大减少了dom操作。

借用大牛的一道思考题:

现在给一个场景 ul > li > div > p,div占满li,p占满div,还是给ul绑定时间,需要判断点击的是不是li(假设li里面的结构是不固定的),那么e.target就可能是p,也有可能是div,这种情况你会怎么处理呢?

<ul id="test">
        <li>
            <p>11111111111</p>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <span>3333333333</span>
        </li>
        <li>4444444</li>
    </ul>

解决方法:

    var oUl = document.getElementById('test');
    oUl.addEventListener('click',function(ev){
        var target = ev.target;
        while(target !== oUl ){
            if(target.tagName.toLowerCase() == 'li'){
                console.log('li click~');
                break;
            }
            target = target.parentNode;
        }
    })

注意点:需要一个递归、一个终止循环的条件差~~

总结

本文主要讲了我们处理事件经常采用的

  • 页面中接受事件的顺序的两种观点:事件冒泡和事件捕获,其中事件冒泡占主流。(个人认为这只是大家处理时倾向于采用哪种方式而已!)
  • 事件流三个阶段:事件捕获、目标处理、事件冒泡
    其中 :我们可以利用stopPropagation()方法来阻止冒泡,但是不会影响我们的事件捕获,这个应该会有一些实际用处,但是我目前没有用上过。
  • 事件委托:可以性能优化,基本只会和dom交互一次,大大提高性能,但是需要注意下它的使用范围,有些根本不适用的千万不要乱用哦~~(不适用: mouseover、mouseout、mousemove等等)。

参考资料

关于dom 事件冒泡、捕获 dom事件三个阶段
js中的事件委托或是事件代理详解

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值