JavaScript巩固与加强二
目录
4、案例：获取键盘上下左右四个键的键值，并进行相应的判断... 16
一、事件编程
1、什么是事件驱动式？
答：在JavaScript中，用户的行为（点击、移动）会被Javascript中的事件所捕获，并执行相应的处理程序，我们把这个过程就称之事件驱动式。
2、什么是事件处理程序
例1：点击按钮弹出一个弹出窗口
例2：点击按钮弹出2个弹出窗口
例3：点击按钮，能弹出100个对话框
3、JavaScript中常用的事件
l onLoad ： 页面加载完毕时触发
l onUnload ： 页面卸载时触发
l onBlur ： 失去焦点时触发
l onFocus ： 获得焦点时触发
l onClick ： 单击时触发
l onMouseOver ： 鼠标悬浮时触发
l onMouseOut ： 鼠标离开时触发
l onMouseDown ： 鼠标按下时触发
l onMouseUp ： 鼠标弹起时（释放）时触发
l onMouseMove ： 鼠标移动时触发
l onChange ： 状态改变时触发
l onSelect ： 文本框文本被选择时触发（input、textarea）
l onkeypress ： 键盘按下时触发（无法捕获功能键）
l onkeydown ： 键盘按下时触发（可以捕获功能键）
l onkeyup ： 键盘弹起时触发
l onSubmit ： 表单提交时触发
l onReset ： 表单重置时触发
例1：页面载入与卸载时触发事件
例2：失去焦点与获得焦点
例3：鼠标悬浮与离开
例4：状态改变时触发
例5：文本选中，键盘按下弹起事件
例6：表单提交时
二、事件绑定
1、什么是事件绑定
答：为某个对象绑定某些事件处理程序，我们把这个过程就称之为事件绑定
2、事件绑定分类
在JavaScript中事件绑定可以分为以下三种：
1）行内绑定
2）动态绑定
3）事件监听
3、行内绑定
基本语法：
<标签 属性列表 事件=“事件的处理程序”></标签>
编写特效或javascript小技巧（三步走）
第一步：找到要作用的对象
第二步：找到触发时所用的事件
第三步：为事件定义事件处理程序
例1：单击层更新其文字颜色为红色
示例代码：
效果：
面试题：你会不会编写结构+样式+行为相分离的代码？
结构：HTML
样式：CSS
行为：Javascript
说明：当我们打开某一个web应用程序时，系统会自动生成BOM模型，该模型最顶端是全局Window对象，我们定义的变量或函数都是向该对象中添加属性。
var i=100;
window.i = 100;
function display() {}
window.display = function display() {};
4、动态绑定
基本语法：
对象.事件 = 事件的处理程序
document.getElementById(‘content’).事件=事件的处理程序
探讨：行内绑定与动态绑定的区别？
说明：在Javascript中谁调用了函数，那么函数内部的this指针就指向谁
例1：行内绑定时，this指针指向window对象
以上代码无法正常运行，原因如下：
通过调试工具证明：行内绑定时，函数中的this指向window对象，所以以上案例无法正常运行。
例2：证明动态绑定时this的指向
通过以上代码运行可知，动态绑定时，函数内部的this指向，指向当前dom对象
谁调用函数，函数内部的this就指向谁
5、行内绑定与动态绑定区别
在语法上不同：
行内：<标签 属性列表 事件=“事件的处理程序”>
动态：对象.事件 = 事件的处理程序
this指向不同
行内：指向window全局对象
动态：指向当前所调用的dom对象
6、事件监听
问题：我们可不可以为某个对象的某个事件绑定多个事件的处理程序
答：事件监听
1）IE模型事件监听基本语法
IE模型下采用：
对象.attachEvent(type,callback);
参数说明：
type：事件类型（onclick,onmouseover）
callback：事件的处理程序（函数）
示例代码：
浏览器分类：
IE模型浏览器
W3C模型浏览器
2）W3C模型下事件监听基本语法：
对象.addEventListener(type,callback,[capture]);
参数说明：
type：事件类型（click,mouseover）
callback：事件的处理程序（函数）
capture：浏览器模型，冒泡模型（默认情况下采用的是冒泡模型），捕捉模型
示例代码：
3）如何解决事件监听兼容性问题
public.js代码封装
使用案例：
总结：IE模型与W3C模型区别：
在语法上IE模型与W3C模型不同
在触发顺序上不同，在IE模型，先定义后触发，在W3C是先定义先触发
7、移除事件监听
基本语法
1）IE模型下采用如下方式：
attachEvent() 添加事件监听
detachEvent() 移除事件监听
detachEvent(type,callback);
参数说明：
type：要移除的事件类型 onclick,onmouseover
callback：要移出的处理程序（函数）
谨记：在Javascript中，如果要移除事件监听，那么我们的事件处理程序必须是有名字的，否则我们是无法移除该事件的。
2）W3C模型下采用如下方式：
addEventListener() 添加事件监听
removeEventListener() 移除事件监听
3）如何解决兼容性问题？
答：Javascript代码封装
示例代码：
public.js
使用：
