js的事件驱动+事件监听+BOM模型定时器.docxVIP

JavaScript巩固与加强二

目录

TOC\o1-3\h\z\uJavaScript巩固与加强二 1

一、事件编程 3

1、什么是事件驱动式？ 3

2、什么是事件处理程序 3

3、JavaScript中常用的事件 3

二、事件绑定 6

1、什么是事件绑定 6

2、事件绑定分类 6

3、行内绑定 6

4、动态绑定 8

5、行内绑定与动态绑定区别 9

6、事件监听 9

1）IE模型事件监听基本语法 9

2）W3C模型下事件监听基本语法： 10

3）如何解决事件监听兼容性问题 10

7、移除事件监听 11

1）IE模型下采用如下方式： 11

2）W3C模型下采用如下方式： 12

3）如何解决兼容性问题？ 12

三、事件对象 13

1、什么是事件对象 13

2、如何获得事件对象 14

3、如何证明事件对象的存在？ 14

4、案例：获取键盘上下左右四个键的键值，并进行相应的判断 15

四、冒泡模型 16

1、什么是冒泡模型 16

2、证明事件冒泡的存在？ 16

3、事件冒泡原理图 17

4、事件冒泡解决 17

五、默认行为 19

1、什么是默认行为 19

2、如何取消HTML标签默认行为 19

3、解决兼容性问题 19

六、BOM模型 20

1、什么是BOM模型 20

2、BOM模型原理图 21

3、常用的BOM模型属性与方法 21

4、定时器 25

一、事件编程

1、什么是事件驱动式？

答：在JavaScript中，用户的行为（点击、移动）会被Javascript中的事件所捕获，并执行相应的处理程序，我们把这个过程就称之事件驱动式。

2、什么是事件处理程序

例1：点击按钮弹出一个弹出窗口

例2：点击按钮弹出2个弹出窗口

例3：点击按钮，能弹出100个对话框

3、JavaScript中常用的事件

onLoad ： 页面加载完毕时触发

onUnload ： 页面卸载时触发

onBlur ： 失去焦点时触发

onFocus ：获得焦点时触发

onClick ：单击时触发

onMouseOver：鼠标悬浮时触发

onMouseOut：鼠标离开时触发

onMouseDown： 鼠标按下时触发

onMouseUp ：鼠标弹起时（释放）时触发

onMouseMove：鼠标移动时触发

onChange ：状态改变时触发

onSelect ：文本框文本被选择时触发（input、textarea）

onkeypress ：键盘按下时触发（无法捕获功能键）

onkeydown：键盘按下时触发（可以捕获功能键）

onkeyup ：键盘弹起时触发

onSubmit ：表单提交时触发

onReset ：表单重置时触发

例1：页面载入与卸载时触发事件

例2：失去焦点与获得焦点

例3：鼠标悬浮与离开

例4：状态改变时触发

例5：文本选中，键盘按下弹起事件

例6：表单提交时

二、事件绑定

1、什么是事件绑定

答：为某个对象绑定某些事件处理程序，我们把这个过程就称之为事件绑定

2、事件绑定分类

在JavaScript中事件绑定可以分为以下三种：

1）行内绑定

2）动态绑定

3）事件监听

3、行内绑定

基本语法：

标签属性列表事件=“事件的处理程序”/标签

编写特效或javascript小技巧（三步走）

第一步：找到要作用的对象

第二步：找到触发时所用的事件

第三步：为事件定义事件处理程序

例1：单击层更新其文字颜色为红色

示例代码：

效果：

面试题：你会不会编写结构+样式+行为相分离的代码？

结构：HTML

样式：CSS

行为：Javascript

说明：当我们打开某一个web应用程序时，系统会自动生成BOM模型，该模型最顶端是全局Window对象，我们定义的变量或函数都是向该对象中添加属性。

vari=100;

window.i=100;

functiondisplay(){}

window.display=functiondisplay(){};

4、动态绑定

基本语法：

对象.事件=事件的处理程序

document.getElementById(‘content’).事件=事件的处理程序

探讨：行内绑定与动态绑定的区别？

说明：在Javascript中谁调用了函数，那么函数内部的this指针就指向谁

例1：行内绑定时，this指针指向window对象

以上代码无法正常运行，