JavaScript巩固与加强二
目录
答:在JavaScript中,用户的行为(点击、移动)会被Javascript中的事件所捕获,并执行相应的处理程序,我们把这个过程就称之事件驱动式。
例1:点击按钮弹出一个弹出窗口
例2:点击按钮弹出2个弹出窗口
例3:点击按钮,能弹出100个对话框
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:表单提交时
答:为某个对象绑定某些事件处理程序,我们把这个过程就称之为事件绑定
在JavaScript中事件绑定可以分为以下三种:
1)行内绑定
2)动态绑定
3)事件监听
基本语法:
<标签属性列表 事件=“事件的处理程序”></标签>
编写特效或javascript小技巧(三步走)
第一步:找到要作用的对象
第二步:找到触发时所用的事件
第三步:为事件定义事件处理程序
例1:单击层更新其文字颜色为红色
示例代码:
效果:
面试题:你会不会编写结构+样式+行为相分离的代码?
结构:HTML
样式:CSS
行为:Javascript
说明:当我们打开某一个web应用程序时,系统会自动生成BOM模型,该模型最顶端是全局Window对象,我们定义的变量或函数都是向该对象中添加属性。
var i=100;
window.i = 100;
function display() {}
window.display = function display() {};
基本语法:
对象.事件 = 事件的处理程序
document.getElementById('content’).事件=事件的处理程序
探讨:行内绑定与动态绑定的区别?
说明:在Javascript中谁调用了函数,那么函数内部的this指针就指向谁
例1:行内绑定时,this指针指向window对象
以上代码无法正常运行,原因如下:
通过调试工具证明:行内绑定时,函数中的this指向window对象,所以以上案例无法正常运行。
例2:证明动态绑定时this的指向
通过以上代码运行可知,动态绑定时,函数内部的this指向,指向当前dom对象
谁调用函数,函数内部的this就指向谁
在语法上不同:
行内:<标签 属性列表 事件=“事件的处理程序”>
动态:对象.事件 = 事件的处理程序
this指向不同
行内:指向window全局对象
动态:指向当前所调用的dom对象
问题:我们可不可以为某个对象的某个事件绑定多个事件的处理程序
答:事件监听
IE模型下采用:
对象.attachEvent(type,callback);
参数说明:
type:事件类型(onclick,onmouseover)
callback:事件的处理程序(函数)
示例代码:
浏览器分类:
IE模型浏览器
W3C模型浏览器
对象.addEventListener(type,callback,[capture]);
参数说明:
type:事件类型(click,mouseover)
callback:事件的处理程序(函数)
capture:浏览器模型,冒泡模型(默认情况下采用的是冒泡模型),捕捉模型
示例代码:
public.js代码封装
使用案例:
总结:IE模型与W3C模型区别:
在语法上IE模型与W3C模型不同
在触发顺序上不同,在IE模型,先定义后触发,在W3C是先定义先触发
基本语法
attachEvent() 添加事件监听
detachEvent() 移除事件监听
detachEvent(type,callback);
参数说明:
type:要移除的事件类型onclick,onmouseover
callback:要移出的处理程序(函数)
谨记:在Javascript中,如果要移除事件监听,那么我们的事件处理程序必须是有名字的,否则我们是无法移除该事件的。
addEventListener() 添加事件监听
removeEventListener() 移除事件监听
答:Javascript代码封装
示例代码:
public.js
使用:
答:在Javascript中,当事件发生时,系统会将与事件相关的信息存储在一个对象中,我们把这个对象就称之为事件对象。
比如:
当移动鼠标时,Javascript引擎会自动将我们鼠标的横纵坐标等相关信息存储在事件对象中。
当键盘按下时,Javascript引擎会自动将我们键盘的键值keyCode等相关信息存储在事件对象中。
IE模型下采用如下方式进行获取
window.event事件对象
W3C模型下采用如下方式获取
事件的处理程序
function(event) {
event就是我们的事件对象
}
示例代码:
W3C下事件对象演示:
运行效果:
答:在Javascript中,事件的响应会向水泡一样上升至最顶层对象,我们把这个过程就称之事件冒泡。
示例代码:
运行效果:
说明:在有些情况下,事件冒泡并不是我们想要,可能会对我们的事件产生干扰,所以要予以解决。
IE模型下:
window.event.cancelBubble = true;
W3C模型下:
function(event) {
event.stopPropagation(); //阻止事件冒泡
}
示例代码:
如何解决兼容性问题?
答:封装代码(public.js)
调用方式如下:
答:在HTML代码中,有些标签会代码默认行为,我们把这种行为就称之为默认行为。
比如a标签,当我们点击时,系统会自动跳转到指定页面
比如submit按钮,当我们点击时,系统会自动提交表单
比如,有些时候我们并不需要这些默认行为,如,当我们删除某个数据库记录时,如果用户不确认是否删除,我们不可以通过a标签直接提交处理,比如我们在表单提交时,如果用户数据填写不完整,我们也不可应该允许表单提交。
基本语法:
IE模型下:
window.event.returnValue = false;
W3C模型下:
function(event) {
event.preventDefault();
}
示例代码:
public.js(IE9以下版本支持)
html调用代码
在现在Javascript代码中,我们通常可以采用return false;方式来直接阻止元素的默认行为。
在我们打开某一web应用程序,系统会自动生成BOM模型,该模型最顶端对象是Window对象,我们平常所用到的document、screen、location等都属于window对象的属性。
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对象(返回数组)
setTimeout
setInterval
参数说明:
第一个参数函数名称
第二个参数时间(单位毫秒数)
例1:弹出一个hello弹出窗口
例2:三秒后弹出一个hello窗口
例3:每隔3秒弹出一个hello窗口
方法一:通过setTimeout递归
方法二:通过setInterval
作业:编程在线时钟:显示时分秒 17:19:00
联系客服