`
zccst
  • 浏览: 3315905 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

面试题201412——client 事件

阅读更多
作者:zccst






如何在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)没有影响,因为发生在捕获阶段。


如果您觉得本文的内容对您的学习有所帮助,您可以微信:
分享到:
评论

相关推荐

    java面试真题-江苏骏环昇旺科技.jpg

    java面试真题——江苏骏环昇旺科技.jpgjava面试真题——江苏骏环昇旺科技.jpgjava面试真题——江苏骏环昇旺科技.jpgjava面试真题——江苏骏环昇旺科技.jpgjava面试真题——江苏骏环昇旺科技.jpgjava面试真题——江苏...

    领导干部公选面试题总结——组织活动类.doc

    领导干部公选面试题总结——组织活动类.doc

    领导干部公选面试题总结——领导科学方法类.doc

    领导干部公选面试题总结——领导科学方法类.doc

    Java面试题必备——Java基础知识部分汇

    Java面试题必备——Java基础知识部分汇总 本文总结了Java基础知识部分的重要知识点,涵盖了Java面试中常见的问题,包括作用域、String类、int和Integer的区别、String和StringBuffer的区别、运行时异常与一般异常的...

    中兴面试题————真实经历(计算机专业)

    【中兴面试题解析】 中兴通讯作为全球知名的IT企业,其面试题目的设计往往涵盖了计算机领域的多个方面,包括但不限于数据库、操作系统、编程语言(如C++和Java)、网络技术等,旨在考察应聘者的综合能力和专业技能...

    Java全能学习面试手册——互联网企业面试真题.zip

    Java全能学习面试手册——互联网企业面试真题.zip 01 java面试——北京-百度-Java中级.pdf 02 java面试——北京-京东-Java中级.pdf 03 java面试——广州-唯品会-Java大数据开发工程师.pdf 04 java面试——杭州-阿里...

    java程序员面试题——863面试集

    ### Java程序员面试题详解 #### 一、Java基础知识 1. **作用域public, private, protected, 以及不写时的区别** - **public**: 可以被任何类访问。 - **protected**: 可以被同一包内及不同包内的子类访问。 - ...

    最全面的java面试题——选择题部分

    最全面的java面试题——选择题部分

    银行面试真题——客户经理.pdf

    这是因为给出的文件信息中,标题为“银行面试真题——客户经理.pdf”,描述与标题相同,均为“银行面试真题——客户经理.pdf”,而标签部分为空。接着,您提供的部分内容是一串数字和符号,没有实际的文字内容,因此...

    面试题.doc————电子版_doc版

    面试题.doc————电子版_doc版

    Java面试题系列——Spring 示例代码.zip

    【一线互联网大厂Java核心面试题库】Java基础、异常、集合、并发编程、JVM、Spring全家桶、MyBatis、Redis、数据库、中间件MQ、Dubbo、Linux、Tomcat、ZooKeeper、Netty等等..

    115个Java面试题和答案——终极列表

    Java面试题是每个Java开发者在求职过程中必须面对的挑战,涵盖范围广泛,从基础概念到高级特性和设计模式。这份终极列表包含115个Java面试题和答案,旨在帮助求职者全面准备,以期在面试中表现出色。以下是部分核心...

    世界500强面试题——让你在面试时更有自信

    世界500强面试题——让你在面试时更有自信!

    面试题整理——面试官的刁难提问和准备策略

    在IT行业的面试中,面试官可能会提出各种刁钻的问题,以测试候选人的技术能力、问题解决技巧以及在压力下的表现。以下是对标题和描述中提到的知识点的详细说明,以及应对策略。 一、面试官的刁难提问 面试官提问的...

    后端开发经典面试题大全-小白通用.zip

    后端开发经典面试题大全——小白通用.zip 后端开发经典面试题大全——小白通用.zip 后端开发经典面试题大全——小白通用.zip 后端开发经典面试题大全——小白通用.zip 后端开发经典面试题大全——小白通用.zip ...

    HCIE面试题——LAN&WAN 技术.docx

    HCIE 面试题——LAN&WAN 技术 HCIE 面试题——LAN&WAN 技术是一份关于 LAN&WAN 技术的面试题,涵盖了交换机端口类型、VLAN 帧的识别、数据帧的处理方式等多个方面的知识点。 交换机端口类型 交换机端口类型有四种...

    UC经典面试题——linux c

    UC面试题,里面包含uc经典面试题,是准备找uc工作的人的首选。

    程序面试试题汇总——C/C++/Java/软件测试

    一、C语言与C++面试题汇总 1. C语言基础:理解指针、内存管理(动态内存分配与释放)、结构体、共用体、位运算等概念。 2. 函数:函数参数传递(值传递、引用传递),递归,函数指针。 3. 链表、栈、队列、树等数据...

    Java全能学习面试手册——Java面试题库.zip

    Java全能学习面试手册——Java面试题库.zip 01 7道消息队列ActiveMQ面试题!.pdf 02 10道Java高级必备的Netty面试题!.pdf 03 10道Java面试必备的设计模式面试题!.pdf 04 10个Java经典的List面试题!.pdf 05 10个...

Global site tag (gtag.js) - Google Analytics