事件委托,冒泡,捕获,深度克隆

原创 2018年04月16日 18:24:06

1. 事件冒泡 事件捕获 

监听者模式->事件流->addEventLisnter/removeEventLisenter->attachEvent/detachEvent->冒泡和捕获的区别->事件委托

早起的事件是用来缓解服务器压力的一种手段,当发生特定交互的一瞬间,如click, mousemove, onkeydown等事件时,我们可以通过侦听器来监听事件,并作出反应,这种模式叫做监听者模式。

在dom文件生成的过程中,会产生一个dom树,当子元素的事件被触发之后,父元素和祖宗元素也会默认被触发。这时候就要依据冒泡或者捕获来判定触发顺序。

IE浏览器中,是由内向外依次传播,名为事件冒泡,网景提出的是从外向内触发,名为事件捕捉。现在的正常浏览器一般是支持捕获和冒泡,由addEventListener的第三个变量来判定。true为事件捕捉,false为事件冒泡。但如果第二个参数是匿名函数的话是无法用removeEventListner来取消事件监听的。此外,Jquery中的e.stopPropagation可以阻止冒泡。

利用冒泡/监听者模式的好处在于,例如一个ul里面有很多li,如果给每一个li绑定事件的话,如果动态生成新的li时必须再为其绑定事件,但是如果利用监听者模式,动态添加的li也会在冒泡后自动触发事件,因为事件被绑定在了监听者(父元素身上)。这个也用到了另外一种基于事件冒泡原理的思想叫做事件委托。由于安全方面的考虑,操作系统怕黑客通过浏览器恶意的做大量的运算或者小号内存,只会给浏览器分配少量内存。这时候过多的对象还有绑定事件会大大的影响浏览器的工作效率。这是我们可以通过前面提到的方法尽量再级别高的dom元素上绑定监听事件,以此来减少内存使用并提升性能。


2.深度克隆 

深克隆浅克隆区别 ->原始值和引用值->堆和栈的区别-> $.extend -> 递归实现深克隆 

深克隆浅克隆区别主要在于,如果说被克隆的对象中不包含引用值而全是原始值的话,深浅克隆无区别,而如果被克隆对象中包含引用值的话,浅克隆后的对象的引用值如果发生改变,被克隆的对象也会发生改变。而深克隆不会发生该问题,因为深克隆后被克隆对象的引用址和克隆着的引用值被存放在不同的内存地址里面。

JS中有五个原始值,分别是boolean, string, number, null, undefined。 引用值包括function和object,array和objct都包含在object里面。这里还有一个历史遗留的bug。null是一个原始值,并不是一个空对象,但是typeof null的结果是object。

这里我们要说一下堆和栈的区别,堆和栈的表层区别在于,栈(stack)先进后出,堆(heap)先进先出。栈由系统自动释放,是一块连续的内存区域,空间较小,但是响应速度较快,主要用于存放原始值,因为一般原始值有一个固定的大小,比较不容易overflow。而堆是用链表储存的一些列不相连的的地址,因为可存放空间较大,主要用来储存引用址,但是由于要在链表中查找所以速度稍微慢一些。

jquery中提供了一种方法,叫$.extend,第一个变量可以控制深克隆还是浅克隆,如果是深克隆为true,浅克隆为false,默认值为false。

function shallowCopy(obj){
 var newObj = {};
 for(var i in obj){
  newObj[i] = obj[i];
 } 
 return newObj
}
funciton deepCopy(obj, newObj){
    newObj = {};
    for(var i in obj){
        if(typeof obj[i]== 'object'){
            if(obj[i].constructor == {}){
                newObj[i] = {};
            }else{
                newObj[i] = [];
            }
            deepCopy(obj[i],newObj[i]);
        }else{
            newObj[i] = obj[i];
        }
    }
}

上面使用递归来实现的是克隆,在判定为引用值后用constructor来判定该对象是否为array,并向内递归直到找到没有引用值为止。


人工智能工程师直通车第一期

为满足市场需求,培养更多人工智能人才,CSDN学院特别邀请到有十余年教学经验的中科院教授卿来云老师及有丰富工业级实战经验的智亮老师,为大家带来本次课程。 通往人工智能工程师的直通车,已经准备出发了!这波人工智能的热潮,你真的要错过吗?
  • 2017年10月24日 15:37

javascript事件详解和事件冒泡, 捕获介绍, 事件委托经典例子

事件 ele.onxxx = function(event) { } 兼容性好, 但是一个元素的同一个事件上只能绑定一个处理程序 基本等同于写在HTML行间 obj.addEventListener...
  • c_kite
  • c_kite
  • 2016-12-07 20:21:31
  • 1771

事件冒泡、事件捕获、事件委托

什么叫事件冒泡? 以onclick事件为例: 我要通过给元素绑定点击事件改变某个元素的属性。 我在这个元素上点击一下。可是,这个元素节点外面被其它节点元素包裹,自身也包裹着其它节点元素,浏览器并...
  • liuxuan12417
  • liuxuan12417
  • 2016-11-24 06:21:40
  • 815

JavaScript事件冒泡,事件捕获,事件处理,事件委托

早期的事件,是作为分担服务器运算负载的一种手段,实文档或者浏览器窗口中发生的一些特定的交互瞬间,如点击按钮,拖放文件等。我们可以使用侦听器来预定事件,当事件发布时候就可作出相应的响应,这种模式称为观察...
  • zhangwx6
  • zhangwx6
  • 2017-03-16 19:22:33
  • 1063

事件委托/事件冒泡/事件捕获&&阻止事件冒泡/阻止事件默认行为

要了解事件委托,首先要了解事件流的概念和事件执行流程: DOM同时支持两种事件模型:捕获型事件和冒泡型事件 ,并且每当某一事件发生时,都会经过捕获阶段->处理阶段->冒泡阶段(有些浏览器不支持捕获) ...
  • qq_22855325
  • qq_22855325
  • 2017-05-19 17:46:43
  • 1530

面试题-冒泡与捕获、事件委托、ie事件和dom模型事件、鼠标事件

很好的博文http://younglab.blog.51cto.com/416652/274132!
  • zd10101501
  • zd10101501
  • 2014-04-17 21:38:18
  • 1596

事件冒泡、事件捕捉、事件委托

一:概念 事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件。 事件冒泡刚好相反,是从触发事件的那个节点一直到document,是自下而上的去触发事件。 事件委托:利用了事件...
  • juzipidemimi
  • juzipidemimi
  • 2017-06-17 22:20:50
  • 104

浅谈事件冒泡和事件捕获的应用场景——事件代理/事件委托

采用事件代理,为页面中的所有a标签绑定click事件。 document.addEventListener("click", function(e) { if (e.target.nodeName ...
  • zhouziyu2011
  • zhouziyu2011
  • 2017-04-16 22:45:07
  • 1836

事件冒泡与捕获&事件委托

设想这样一种情况    一个div里面有个span元素  ,当鼠标单击span时,这个事件算是谁的? div还是span? 准确的说两个都触发了,这种认可大家都同意,事实就是这样的, 第二个问题...
  • jieCooner
  • jieCooner
  • 2014-05-08 14:22:35
  • 1565

关于JS事件冒泡与JS事件代理(事件委托)

事件作为DOM操作重要的一环,需要大家好好理解和运用,今天特意看了一下事件冒泡和事件代理的相关资料,感触颇深,也深感自己的无知不知道多浪费了多少内存,废话不多说进入正题: 1.事件冒泡:   ...
  • SuperCoooooder
  • SuperCoooooder
  • 2016-08-12 16:26:41
  • 3783
收藏助手
不良信息举报
您举报文章:事件委托,冒泡,捕获,深度克隆
举报原因:
原因补充:

(最多只允许输入30个字)