|
JavaScript巩固与加强二 目录 一、事件编程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
使用：
三、事件对象1、什么是事件对象答：在Javascript中，当事件发生时，系统会将与事件相关的信息存储在一个对象中，我们把这个对象就称之为事件对象。 比如： 当移动鼠标时，Javascript引擎会自动将我们鼠标的横纵坐标等相关信息存储在事件对象中。 当键盘按下时，Javascript引擎会自动将我们键盘的键值keyCode等相关信息存储在事件对象中。 2、如何获得事件对象IE模型下采用如下方式进行获取 window.event事件对象 W3C模型下采用如下方式获取 事件的处理程序 function(event) { event就是我们的事件对象 } 3、如何证明事件对象的存在？示例代码：
W3C下事件对象演示：
4、案例：获取键盘上下左右四个键的键值，并进行相应的判断
运行效果：
四、冒泡模型1、什么是冒泡模型答：在Javascript中，事件的响应会向水泡一样上升至最顶层对象，我们把这个过程就称之事件冒泡。 2、证明事件冒泡的存在？示例代码：
运行效果：
3、事件冒泡原理图
4、事件冒泡解决说明：在有些情况下，事件冒泡并不是我们想要，可能会对我们的事件产生干扰，所以要予以解决。 IE模型下： window.event.cancelBubble = true; W3C模型下： function(event) { event.stopPropagation(); //阻止事件冒泡 } 示例代码：
如何解决兼容性问题？ 答：封装代码（public.js）
调用方式如下：
五、默认行为1、什么是默认行为答：在HTML代码中，有些标签会代码默认行为，我们把这种行为就称之为默认行为。 比如a标签，当我们点击时，系统会自动跳转到指定页面 比如submit按钮，当我们点击时，系统会自动提交表单 比如，有些时候我们并不需要这些默认行为，如，当我们删除某个数据库记录时，如果用户不确认是否删除，我们不可以通过a标签直接提交处理，比如我们在表单提交时，如果用户数据填写不完整，我们也不可应该允许表单提交。 2、如何取消HTML标签默认行为基本语法： IE模型下： window.event.returnValue = false; W3C模型下： function(event) { event.preventDefault(); } 示例代码：
3、解决兼容性问题public.js（IE9以下版本支持）
html调用代码
在现在Javascript代码中，我们通常可以采用return false;方式来直接阻止元素的默认行为。 六、BOM模型1、什么是BOM模型在我们打开某一web应用程序，系统会自动生成BOM模型，该模型最顶端对象是Window对象，我们平常所用到的document、screen、location等都属于window对象的属性。 2、BOM模型原理图
3、常用的BOM模型属性与方法window对象常用的四大属性 navigator location document screen 1）window对象下常用的属性与方法 l alert(message) ：弹出窗口 l confirm(message) ：确认框（删除确认） l prompt(message[，defstr]) ：提示输入框 l open(url[，name[，features]])：弹出window窗口 l close() ：关闭当前窗口 l blur() ：失去焦点 l focus() ：获得焦点 l print() ：打印（重要） l moveBy(x，y) ：相对移动 l moveTo(x，y) ：绝对移动 l resizeBy(x，y) ：相对改变大小 l resizeTo(x，y) ：绝对改变大小 l scrollBy(x，y) ：相对滚动 l scrollTo(x，y) ：绝对滚动 l setTimeout(表达式，毫秒) l clearTimeout(定时器对象) 例1：prompt提示输入窗
例2：弹窗window窗口
例3：打印功能实现
例4：返回顶部
2）window对象中open方法参数说明： l menubar ：菜单栏 l toolbar ：工具栏 l scrollbars ：滚动条 l fullscreen ：全屏 l directories ：链接工具 l location ：地址栏 l status ：状态栏 l resizable ：是否可以调整大小 以上参数只有两个值：yes，no l width、height 、left、top 3）navigator（浏览器对象clientInfomation） l appCodeName ：浏览器内核名称 l appName ：浏览器发行版名称 l appVersion ：浏览器内核版本 l platform ：操作系统信息 l online ：是否脱机工作 l cookieEnabled ：Cookie是否可用 示例代码：
运行效果：
userAgent用户代码信息 4）location对象 l host ：主机名称 l port ：端口号 l href ：链接地址（属性） location.herf = '’; l pathname ：文件路径 l protocol ：协议（http: https）； l search ：查询关键词（？号后面的字符串） l assign(url) ：跳转到指定url location.assign(url); 示例代码：
效果：
5）screen对象（描述屏幕信息） l availHeight ：可用高度 l availWidth ：可用宽度 l colorDepth ：色彩深度（0-256） 24 l height ：屏幕的高度 l width ：屏幕的宽度 示例代码：
运行效果：
6）document对象 当我们打开某一个html页面时，系统会自动生成一个DOM模型，该模型最顶端是document对象。 l linkColor ：链接文字颜色 l alinkColor ：正在访问的链接文字颜色 l vlinkColor ：已访问链接颜色 l bgColor ：背景颜色 l fgColor ：字体颜色 l title ：网页标题 案例：标题显示新消息功能实现
效果：
getElementById(“id”) ：通过id获取指定dom对象 getElementsByName(“name”) ：通过name属性获取指定dom对象（返回数组） getElementsByTagName(“tagname”) ：通过标签名获取指定dom对象（返回数组） 4、定时器setTimeout setInterval 参数说明： 第一个参数函数名称 第二个参数时间（单位毫秒数） 例1：弹出一个hello弹出窗口
例2：三秒后弹出一个hello窗口
例3：每隔3秒弹出一个hello窗口 方法一：通过setTimeout递归
方法二：通过setInterval
作业：编程在线时钟：显示时分秒 17:19:00 |
|
|
