DOM中事件处理概览与原理的全面解析(2)

1).事件处理程序的返回值只对通过属性注册的处理程序才有意义,通过设置对象属性或HTML属性注册 事件处理程序的返回值为false,就是告诉浏览器不要执行这个事件相关的默认操作。当浏览器要跳转到新页面时触发Window对象的onbeforeunload事件,若它的的返回值为字符串,则它将出现在询问确认对话框中;

2).addEventListener()或attachEvent()注册事件处理程序若要取消浏览器的默认操作必须调用preventDefault()方法或设置事件对象的returnValue属性。
this指向问题:

1).addEventListener方法指定的监听函数,内部的this对象总是指向触发事件的那个节点;
2).IE8及以前的attachEvent方法注册的事件处理函数的this指向全局对象;
以下写法的this对象都指向Element节点。 
                    element.onclick = print;
                    element.addEventListener('click', print, false)
                    element.onclick = function () {console.log(this.id);}
                    <element>
 以下写法的this对象,都指向全局对象。 
                    element.onclick = function (){ doSomething() }; 
                    element.setAttribute('onclick', 'doSomething()'); 
                    <element> 
                    element.attachEvent('onclick',doSomething) //IE8
内存问题:对如下代码,每个循环中都会创建一个新的匿名函数,占用的内存越来越多;由于没有保持到匿名函数的引用,它不可能被调用 removeEventListener;所以应当把第二参数listener保持为对处理事件函数的引用;                  

for(i=0 ; i<els.length ; i++){ els[i].addEventListener("click", function(e){/*do something*/}, false}); }

通用的兼容旧版IE的工具函数:
确保事件处理程序的this指向事件的目标对象的工具函数addEvent

function addEvent(target,type,func){ if(target.addEventListener){ target.addEventListener(type,func,false); }else{ target.attachEvent('on'+type,function(e){ //这里attachEvent注册的处理函数未绑定引用,所以无法用detachEvent删除 return func.call(target,e); }); } }

通用的事件处理程序(因为IE8及以前版本,作为事件目标的on-属性的处理程序需要window.event来获得事件对象,且触发事件的目标节点对象通过event.srcElement属性获得) 

function func(event){ var event = event||window.event; var target = event.target || event.srcElement; //......处理程序代码 }

四、事件传播(event propagation):是浏览器决定哪个对象触发其事件处理程序的过程。
“DOM2级事件”规定的事件流包括三个阶段:事件捕获阶段==>处于目标阶段==>事件冒泡阶段。首先发生的是事件捕获阶段(从外层向内层传播),为事件传播经过的所有节点截获事件提供了机会。然后是实际的目标接收事件(按注册顺序执行)。最后一个阶段是冒泡阶段(从内层向外层冒泡)。

当容器元素及嵌套元素,即在捕获阶段又在冒泡阶段调用事件处理程序时:事件按DOM事件流的顺序执行事件处理程序,且当事件处于目标阶段时,事件调用顺序决定于绑定事件的书写顺序

如果希望事件到某个节点为止,不再传播,有两种方式:

1.使用事件对象的event.stopPropagation()方法来阻止当前监听函数的传播;

2.使用事件对象的event.stopImmediatePropagation()方法来阻止当前事件在其事件对象上的所有监听函数的传播; 

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzxwgs.html