前端面试题之手写事件模型及事件代理/委托
2017-10-09 00:00
127 查看
在前端面试,js是重头戏,也是体现面试者的重要方面。jq库类在前端影响深远,以至于很多入门者直接用jq代替原生js来开发项目,效率是提升了,但是往往面试官为了考察面试者的基础,几乎不可能问你jq里面的某个功能怎么用,而是问你怎么用原生js去实现某个方法或者考察你是否读个jq的源码,是否懂得里面真正的原理。
本文来整理一下关于事件的常被考察的知识点
Q:描述下js里面的事件流
A:DOM2级事件模型中规定了事件流的三个阶段:捕获阶段、目标阶段、冒泡阶段,低版本IE(IE8及以下版本)不支持捕获阶段
捕获事件流:Netscape提出的事件流,即事件由页面元素接收,逐级向下,传播到最具体的元素。
冒泡事件流:IE提出的事件流,即事件由最具体的元素接收,逐级向上,传播到页面。
Q:IE和W3C不同绑定事件解绑事件的方法有什么区别,参数分别是什么,以及事件对象e有什么区别
A:
绑定事件:
W3C:target.addEventListener(event, listener, useCapture);
event —— 事件类型;listener —— 事件触发时执行的函数;useCapture —— 指定事件是否在捕获或冒泡阶段执行,为true时事件句柄在捕获阶段执行,为false(默认false)时,事件句柄在冒泡阶段执行。
IE:target.attachEvent(type, listener);
type - 字符串,事件名称,含“on”,比如“onclick”、“onmouseover”、“onkeydown”等。 listener —— 实现了 EventListener 接口或者是 JavaScript 中的函数。
Q:事件的委托(代理 Delegated Events)的原理以及优缺点
A:委托(代理)事件是那些被绑定到父级元素的事件,但是只有当满足一定匹配条件时才会被挪。这是靠事件的冒泡机制来实现的,
优点是:
(1)可以大量节省内存占用,减少事件注册,比如在table上代理所有td的click事件就非常棒
(2)可以实现当新增子对象时无需再次对其绑定事件,对于动态内容部分尤为合适
缺点是:
事件代理的应用常用应该仅限于上述需求下,如果把所有事件都用代理就可能会出现事件误判,即本不应用触发事件的被绑上了事件。
A:其实就是考核对事件对象e的了解程度,以及在IE下对应的属性名。单击button元素会冒泡到UL.toolbar元素,使用了e.target来定位到当前点击的button。
Q:手写原生js实现事件代理,并要求兼容浏览器
A:大致实现思路就是创建一个类或是匿名函数,在bind和trigger函数外层作用域创建一个字典对象,用于存储注册的事件及响应函数列表,bind时,如果字典没有则创建一个,key是事件名称,value是数组,里面放着当前注册的响应函数,如果字段中有,那么就直接push到数组即可。trigger时调出来依次触发事件响应函数即可。Q:实现事件模型
Q:事件如何派发也就是事件广播(dispatchEvent)
A:一般我们在元素上绑定事件后,是靠用户在这些元素上的鼠标行为来捕获或者触发事件的,或者自带的浏览器行为事件,比如click,mouseover,load等等,有些时候我们需要自定义事件或者在特定的情况下需要触发这些事件。这个时候我们可以使用IE下fireEvent方法,高级浏览器(chrome,firefox等)有dispatchEvent方法。
本文来整理一下关于事件的常被考察的知识点
Q:描述下js里面的事件流
A:DOM2级事件模型中规定了事件流的三个阶段:捕获阶段、目标阶段、冒泡阶段,低版本IE(IE8及以下版本)不支持捕获阶段
捕获事件流:Netscape提出的事件流,即事件由页面元素接收,逐级向下,传播到最具体的元素。
冒泡事件流:IE提出的事件流,即事件由最具体的元素接收,逐级向上,传播到页面。
Q:IE和W3C不同绑定事件解绑事件的方法有什么区别,参数分别是什么,以及事件对象e有什么区别
A:
绑定事件:
W3C:target.addEventListener(event, listener, useCapture);
event —— 事件类型;listener —— 事件触发时执行的函数;useCapture —— 指定事件是否在捕获或冒泡阶段执行,为true时事件句柄在捕获阶段执行,为false(默认false)时,事件句柄在冒泡阶段执行。
IE:target.attachEvent(type, listener);
type - 字符串,事件名称,含“on”,比如“onclick”、“onmouseover”、“onkeydown”等。 listener —— 实现了 EventListener 接口或者是 JavaScript 中的函数。
Q:事件的委托(代理 Delegated Events)的原理以及优缺点
A:委托(代理)事件是那些被绑定到父级元素的事件,但是只有当满足一定匹配条件时才会被挪。这是靠事件的冒泡机制来实现的,
优点是:
(1)可以大量节省内存占用,减少事件注册,比如在table上代理所有td的click事件就非常棒
(2)可以实现当新增子对象时无需再次对其绑定事件,对于动态内容部分尤为合适
缺点是:
事件代理的应用常用应该仅限于上述需求下,如果把所有事件都用代理就可能会出现事件误判,即本不应用触发事件的被绑上了事件。
A:其实就是考核对事件对象e的了解程度,以及在IE下对应的属性名。单击button元素会冒泡到UL.toolbar元素,使用了e.target来定位到当前点击的button。
Q:手写原生js实现事件代理,并要求兼容浏览器
A:大致实现思路就是创建一个类或是匿名函数,在bind和trigger函数外层作用域创建一个字典对象,用于存储注册的事件及响应函数列表,bind时,如果字典没有则创建一个,key是事件名称,value是数组,里面放着当前注册的响应函数,如果字段中有,那么就直接push到数组即可。trigger时调出来依次触发事件响应函数即可。Q:实现事件模型
Q:事件如何派发也就是事件广播(dispatchEvent)
A:一般我们在元素上绑定事件后,是靠用户在这些元素上的鼠标行为来捕获或者触发事件的,或者自带的浏览器行为事件,比如click,mouseover,load等等,有些时候我们需要自定义事件或者在特定的情况下需要触发这些事件。这个时候我们可以使用IE下fireEvent方法,高级浏览器(chrome,firefox等)有dispatchEvent方法。
相关文章推荐
- 手写事件模型及事件代理/委托
- 【web前端】关于javaScript事件代理,委托
- 事件模型及事件代理/委托
- 1.事件委托的原理以及优缺点 2. 手写原生js实现事件代理,并要求兼容浏览器
- 面试题-冒泡与捕获、事件委托、ie事件和dom模型事件、鼠标事件
- JS中事件代理与委托
- 浅谈委托和事件之C#的事件模型
- 在C#中使用代理的方式触发事件 (委托和事件 )
- js中的事件委托或是事件代理详解
- JavaScript 事件委托/事件代理
- js中的事件委托或是事件代理详解
- js事件代理(委托)
- JavaScript事件代理和委托(Delegation)
- c#的委托(代理)和事件
- DOM的默认事件、事件模型、事件委托、阻止默认事件、冒泡事件的方式等。
- 前端性能优化:使用事件委托
- JavaScript事件代理和委托(Delegation)
- 前端开发——jquery之事件委托和绑定
- Unity3d C# 广播消息 事件代理与委托
- js中的事件委托或是事件代理详解