面试题201412——client 事件


如何在ie下模拟DOMContentLoad 事件

(看过的, 又忘了, 看来没掌握好)  不知道………………. 应该用 创建一个指向空的 src=http://void(0);  defer,   ie支持这个用defer, 浏览器再DOM加载完才触发, 所以在 script 的 readstate == “complete” 的时候说明DOM已经加载完成了

另一种方法看了一下是用定时器, 当 try{ (document.documentElemnt || document.body).doscroll(“left”) } 也说明加载完了

参考:[Event]事件(高程版)(一)事件类型http://zccst.iteye.com/blog/2081868

————————-基础知识分界线—————–

client有关的所有东西,可参考:

http://zccst.iteye.com/admin/categories/204843

事件代理

优点:

1,document对象很快就可以访问,可以在任何时间点为它添加事件处理程序,无需等待DOMContentLoaded或load事件。

2,用时更少,因为所需DOM引用更少

3,占用内存空间更少,能提升整体性能

适合:click, mousedown, mouseup, keydown, keyup和keypress。

但不适合mouseover和mouseout。

【浏览器差异】

target -> srcElement

preventDefault()  cancelable   -> returnValue 布尔,默认false

stopPropagation()  bubbles     -> cancelBubble 布尔,默认true

blur, focus不冒泡(但focusin, focusout冒泡)

mouseenter, mouseleave不冒泡

IE中attachEvent()与DOM0级方法主要区别是作用域不同,

DOM0,作用域是所属元素

attachEvent(),作用域是全局作用域window

btn1.attachEvent("onclick",function(){
    alert(this === window);//true
});

兼容写法

var EventUtil = {
    addEvent:function(element, type, handler){
        if(element.addEventListener){
            element.addEventListener(type, handler, false);
        }else if(element.attachEvent){
            element.attachEvent("on"+type, handler);
        }else{
            element["on"+type] = handler;
        }
    }
	addHandler:function(element,type,handler){
		//...
	},
	getEvent:function(event){
        return event ? event : window.event;
	},
	getTarget:function(event){
        return event.target || event.srcElement;
	},
    //阻止默认事件
	preventDefault:function(event){
        if( event.preventDefault){
            event.preventDefault();
        }else{
            event.returnValue = false;
        }
	},
    //阻止冒泡
	stopPropagation::function(event){
        if(event.stopPropagation){
            event.stopPropagation();
        }else{
            event.cancelBubble = true;
        }
	},
	removeHandler::function(element,type,handler){
	}
};

多次绑定

1,对于IE浏览器

btn1.attachEvent("onclick",function(){
    alert("clicked");
});
btn1.attachEvent("onclick",function(){
    alert("hello");
});

在IE9下,按顺序弹出clicked, hello,但是在IE8顺序是相反的先hello,再clicked。

2,对于标准浏览器

addEventListener都在(,,false)情况:

 btn1.addEventListener("click",function(e){
        alert(this.id);
	},false);
    btn1.addEventListener("click",function(e){
        alert('hello');
	},false);

addEventListener一个是(,,false),另一个是(,,true)情况:

 btn1.addEventListener("click",function(e){
        alert(this.id);
	},false);
    btn1.addEventListener("click",function(e){
        alert('hello');
	},true);

 //运行效果,跟false和true没关系。原因是时间绑定他们自己身上,无法体现捕获和冒泡的过程。如果在body上添加addEventListener,差别就体现出来了。


 //如果换成document.body,则先hello,然后空白
 document.body.addEventListener("click",function(e){
        alert(this.id);
	},false);
    document.body.addEventListener("click",function(e){
        alert('hello');
	},true);

涉及到知识点:

事件冒泡  我们给一个dom同时绑定两个点击事件,一个用捕获,一个用冒泡,你来说下会执行几次事件,然后会先执行冒泡还是捕获!!!

addEventListener一个demo的oncick进行多次绑定,只会执行一次,貌似犀牛书讲得很清楚,而attachEvent才会执行多次吧。

【标准事件】冒泡的过程

给父元素添加onclick事件,给父元素添加addEventListener(,,true),给子元素添加onclick事件

    btn1.onclick = function(e){
        alert('2'+e.eventPhase);
        //e.stopPropagation();//如果添加该行,则不再冒泡到父元素,父元素onclick不再被触发
    }
    document.body.addEventListener("click",function(e){
        alert('1'+e.eventPhase);
        console.log(e.target === e.currentTarget, e.currentTarget === this);//false, true
    },true);
    document.body.onclick = function(e){alert('3'+e.eventPhase);}

    //对于addEventListener(,,false)与onclick,按绑定顺序触发

点击btn1时,父元素先在捕获阶段捕获,然后目标元素触发,再次冒泡到父元素(父元素onclick被触发)

涉及到知识点:

1,事件的三个阶段  eventPhase 1捕获  2目标  3冒泡

addEventListener(,,true)与addEventListener(,,false)区别?捕获阶段,冒泡阶段

attachEvent只在冒泡阶段

2,addEventListener时,this,target与currentTarget区别?

如果是当前对象addEventListener(),则三者一样

如果是当前对象的父元素addEventListener(),则this === currentTarget,target与他们不同。

3,同时绑定onclick与addEventListener(,,false),执行顺序是什么?

执行顺序与书写先后顺序有关

测试

    btn1.onclick = function(e){
        console.log("onclick");
    }
    btn1.addEventListener("click",function(e){
        console.log("addEventListener");
    },false);

批注:onclick虽然eventPhase等于2,但是仍发生在冒泡阶段(摘自《高级程序设计》)。

4,e.stopPropagation()是阻止冒泡

如果先onclick,再addEventListener(,,false),并且在onclick总阻止了冒泡

则,addEventListener(,,false)不再被触发

且,事件不再冒泡到父元素,父元素onclick不再被触发

批注:对addEventListener(,,true)没有影响,因为发生在捕获阶段。


发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>