JavaScript学习整理面经.pdf

JavaScript⾯经

●事件对象

○事件⾏为绑定函数，执⾏函数时，浏览器会默认传递事件对象作为参数。

●事件机制

○事件绑定，事件处理函数绑定到⽬标DOM元素上。

■DOM0级事件，只可以绑定1次。

●DOM直接绑定

●JS绑定

■DOM2级事件，可多次绑定

●绑定事件监听函数addEventListener，参数，事件类型+函数+事件发⽣阶段。

○事件监听

○事件委托，冒泡

■将事件处理委托给⽗元素来提⾼性能和简化代码，利⽤冒泡机制，在⽗元素上注册⼀个事

件处理程序，处理多个⼦元素的相同事件（根据触发事件的⼦元素类型执⾏对应操作）。

■优点

●减少内存消耗，不必为每个⼦元素绑定事件。

●动态绑定事件，不⽤单独绑定，统⼀处理。

●事件流，事件执⾏顺序

○⼀个节点产⽣事件，该事件会在该节点和根节点之间按顺序传播，中间节点都会接受该事件。

传播过程称为事件流。

○阶段

■捕获阶段从document到⽬标元素

●事件依次经过每个⽗元素。

●addEventListener可以设置第三个参数true来指定事件处理程序在捕获阶段中执⾏。

■⽬标阶段，在元素上触发事件处于⽬标阶段。

●事件到达⽬标元素后被触发执⾏处理程序。

■冒泡过程，事件反向传播到document

●使⽤addEventListener可以设置第三个参数false或省略来指定事件处理程序在冒泡阶

段执⾏，默认。

●节点

1

○浏览器认为HTML上信息都为节点。

■元素节点，type1

●名称

●值为null

■属性节点，type2

●名称为属性名

●值为属性值

■⽂本节点，type3

●名称为text

●值为⽂本内容

■注释节点，type8

●名称为comment

●值为注释内容

■⽂档节点，type9

●名称为document

●值为null

●JS盒⼦模型

○提供⼀些属性和⽅法来描述盒⼦的样式

○client，只读

■clientwidthcontent+padding

■clientleft，左边框宽度。clienttop上边框宽度。

○offset，只读

■offsetwidth，border+padding+content，⽔平外框宽度。同理offsetheight。

■offsetparent，距离元素最近的具有定位的⽗辈元素

■offsettop，距离⽗级元素的上偏移量，当前元素的外边框到⽗级offsetparent的内边框。

同理offsetLeft。

○scroll，下⾯唯⼆可以修改的

■scrolltop，竖向滚动条向上卷去的⾼度

■scrollleft，横向滚动条向左卷去的宽度

●原型

○每个对象创建开始就和另⼀个对象关联，从其继承属性，其为原型。

■当访问对象属性时，先从对象本身寻找，找不到到原型上找，没有继续到原型的原型找，

2

直到最顶层的原型对象，都没有则返回undefined。

■对象及其原型组