参考教育就业javascript bom.pptxVIP

北京传智播客教育JavaScriptBOM讲师：蒋坤

BOM简介

常用事件-在DOM中有很多事件(演示事件)-onload 页面加载完毕时触发-onunload 页面卸载后触发-onbeforeunload 页面卸载前触发-其他事件onclick,ondblclick,onkeydown,onkeyup,onkeypress,onmousedown,onmouseup,onmousemove,onmouseover,onmouseout

window对象(DOM的第一个对象)-window相当于当前浏览器窗口-使用window对象属性、方法时可以省略window(节约字节数)-例如alert、document等

window对象-confirm方法boolconfirm(提示字符串);-window.location属性winodw.location.href=url;window.location.reload();-screen对象获得屏幕分辨率：width与height-history对象back方法与forward方法go(-1)与go(1)

事件对象-什么是事件对象-使用事件对象的一般语法对象=function(e){/*方法*/};-常用成员-鼠标坐标screenX与screenYclientX与clientYlayerX与layerY-鼠标按键button-功能键altKey、ctrlKey、shiftKey

计时器与延时器-计时器IdsetInterval(回调函数,时间);clearInterval(计时器Id);案例走马灯自动增长电子时钟-延时器IdsetTimeout(回调函数,时间);clearTimeout(延时器Id);案例延迟加载

window对象_剪贴板(IE)-剪贴板(clipboardData对象)clipboardData.setData(text,value);clipboardData.getData(text);clipboardData.clearData(text);oncopy事件、onpaste事件、oncut事件-禁止复制、禁止粘贴、复制添加版权案例

事件冒泡-写一个层-层里面一个p-里面一个按钮-分别添加onclick事件取消事件冒泡：window.event.cancelBubble=true;

案例-点击按钮变“呜呜”，其余变“哈哈”-十秒后允许点击-美女时钟-动态改变层的大小-鼠标放到超链接上显示一个图片或文字

练习练习1：点击按钮，表格隔行变色：偶数行为黄色背景，奇数行为默认颜色。练习2：放若干文本框，获得焦点的文本框黄色背景，其他控件背景颜色是白色练习3：点击表格行，被点击的行高亮显示（背景是黄色），其他行白色背景。

事件范围-所有元素均可以添加事件-点击事件可以针对body也可以是document-但是每个事件是有作用范围的案例：跟着鼠标移动的图片

练习点击登录界面点击按钮弹出一个层，显示用户输入列表高亮显示一个列表，鼠标移上会高亮显示电子时钟一个电子表的案例搜索文本框没有获得焦点的时候，有灰色的文字，获得焦点后文字消失，等待用户输入，如果没有文字，失去焦点后出现灰色的提示文字

form对象-调用事件方法click()、focus()、blur()-提交表单-使用submit标签-用button标签，调用submit标签的click方法-form的onsubmit事件与onreset事件

String正则表达式-匹配test声明正则表达式对象(双斜线之间)reg.test方法-提取execreg.exec方法-String提供的方法-替换replace-全局模式

模拟trim方法String.prototype.trim=function(){ returnthis.replace(/^\s+/,).replace(/\s+$/,);};

案例：密码强度评估-密码的安全级别：-弱密码：只由数字、字母或其他符号中的一种组成。-中度密码：由数字、字母或其他字符中的两种组成。-强密码：由数字、字母或其他字符3种以上组成。-密码少于6位安全级别降1级