javascript周考试题
1.谈谈你对DOM事件流的认识。
DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素节点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为DOM事件流。
事件流包括三个阶段：事件捕获阶段、处于目标阶段和冒泡阶段。首先发生的是事件捕获，为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件作出响应。
2.请列出所有给元素绑定事件的方式以及对象解除绑定方式。
绑定事件的方式：
a.元素属性绑定，结构跟行为没有分离，不推荐使用，注意：该事件处理函数只能是全局函数
b.通过on +事件类型给元素对象方式绑定，事件处理程序只能绑定一次，后面的会覆盖前面的
c. ele.addEventListener(type, fn, boolean)
type事件类型
fn事件处理函数this指向ele，绑定该方法的元素
boolean将事件添加到 冒泡[false]/捕获[true]阶段
可以给元素绑定多个事件处理程序，先绑定先执行，低版本IE8不支持
低版本IE8及以下
ele.attachEvent("on" + type, fn)后绑定先执行
fn事件处理函数this指向全局对象window
解除绑定方式：
a.元素属性绑定，按钮
使用show = function(){}; element.onclick = null;
b.通过on这种方式绑定的，element.onclick = null;
c.ele.removeEventListener(type, fn, boolean)
里边的三个参数要跟绑定时的参数完全一致
fn事件处理程序，保证是同一个函数，该函数定义在外部，引用函数名
IE8及以下attachEvent移除事件
detachEvent移除事件
detachEvent("on" + type, fn);参数跟绑定的时候一致
3.请写出所有阻止默认事件的方式。
a.属性绑定，on这种方式绑定的事件return false;
b. addEventListener绑定的就使用e.preventDefault()
IE8及以下attachEvent e.returnValue = false;
4.请写出所有取消事件冒泡的方式。
a.属性绑定，on这种方式绑定的事件e.cancelBubble = true;
b. addEventListener绑定的就使用e.stopPropagation();
5.事件委托是什么，谈谈你的理解。
事件委托，将本来要添加到共同子元素的事件添加到它们存在页面上的共同的父元素，只需给父元素添加一次事件，利用的是冒泡的原理
优点：1.减少元素事件绑定，节省内存
2.减少子元素查找获取，减少DOM操作，提高效率
3.后新增（动态添加）的子元素也包含跟原来子元素一样的事件
6.代码说明call和apply方法的区别。
这两个都是函数的方法，可以改变this的指向，代码如下，obj为调用call,apply方法的函数的this指向
fn.call(obj,param1,param2,...)
call传入单个参数
fn.apply(obj,[param1,param2,...])
apply传入一个数组
7.事件类型有哪些？写出你所知道的鼠标键盘事件（不少于12个）。
事件类型有鼠标事件、键盘事件、表单事件、触屏事件等
click单击mousedown/mouseup
mousedown鼠标点下去
mousemove鼠标移动
mouseup鼠标松开
mouseover鼠标移入，冒泡
mouseout鼠标移出，冒泡
mouseenter鼠标移入,不冒泡
mouseleave鼠标移出,不冒泡
dblclick双击 由两次单击组成
contextmenu右键菜单
mousewheel滚轮事件，非标准事件IE/Chrome/Safari支持
DOMMouseScroll火狐私有滚轮事件，只能使用ele.addEventListener("DOMMouseScroll", fn, false)
keydown键按下 检测到键盘上所有的键，实体键/辅助键
keyup键松开
keypress键按下 检测实体键，所有的字符，数字，空格，enter键
8.写出你所熟知的处理JS兼容性的代码，不少于5个。
a. e || window.event事件对象兼容
b. document.documentElement.scrollTop || document.body.scrollTop页面滚动条scrollTop兼容
c. element.onmousewheel = fn; element.addEventListener(“DOMMouseScroll”, fn, false);滚轮事件
d. window.addEventListener && window.addEventListener(type, handle, false);
window.attachEvent && window.attachEvent(“on”+type,handle)事件绑定
e. window.getComputedStyle && window.getComputedStyle(ele, null)
ele.currentStyle获取非行间样式
9.解释图片预加载，并写出相关代码。
将需要使用到的图片资源预先加载出来，防止用户等待时间过长。
优点：图片已缓存到浏览器，等待时间少，体验流畅。
缺点：用户首次进入等待加载时间长
网友评论