week11---11月20日 JS基础(八)
2015-11-16 14:37
459 查看
一、复习
1、事件的介绍(种类)
2、单击双击事件分析
举例:h12
二、新课
(一)全局变量
通过h12例子,介绍全局变量
(二)事件介绍
1、不同标记响应鼠标事件-
h3、span、文本框、文本区响应各种鼠标事件,单击h3标题变为红色,双击恢复为黑色。
鼠标单击事件还将同时分解为鼠标按下、鼠标释放,释放事件的显示会被单击覆盖。另外鼠标进入的同时会伴随着移动,观察进入时必须小心缓慢进入,否则其显示会被移动覆盖。
文本框、按钮等空标记(单标记)以及文本区双标记等表单标记用value属性获取或写入文本内容,而<div>、<p>、<span>等非空双标记的文本内容是该标记对象的firstChild子对象,老方式可用innerHTML属性获取或写入文本内容,而新标准则使用firstChild子对象的nodeValue属性获取或写入文本内容。
使用firstChild.nodeValue属性时必须保证标记的初始状态不能没有内容,如果该标记中没有初始内容则应输入保留一个空格或书写 否则会产生firstChild对象不存在错误。
注意:对文本区表单元素最好使用value属性获取或写入文本内容,如果使用firstChild.nodeValue属性很容易发生问题,例如运行时人为将文本区清空就会出现问题。
例子:h12-13
h12-14
2、焦点,表单事件
鼠标点击某个元素时该元素获得焦点,其他元素获得焦点时该元素随即失去焦点,获得焦点的元素还可以响应按键事件。
常用的焦点、按键及表单事件有onfocus获得焦点、onblur失去焦点、onchange内容被改变(失去焦点时触发)、onsubmit提交表单、onreset重置表单、onkeydown键按下、onkeyup键释放、onkeypress敲击按键(包括键按下、键释放,响应顺序为按下、敲击、释放)。
表单元素还可响应onselect选中文本、oncopy复制、oncut剪切、onpaste粘贴等页面编辑事件。
注意:onsubmit提交表单、onreset重置表单事件必须由<form>标记响应,返回false可终止提交或重置表单,而submit提交按钮、reset重置按钮只能响应单击事件,返回false同样可终止提交或重置表单。
焦点、按键及表单事件应用技巧:
(1)表单元素内容不允许修改可设置其只读属性,对不支持只读的浏览器可对该元素附加onfocus获得焦点事件强迫离开。
(2)利用onblur失去焦点事件可在用户离开时对数据进行验证,不符合要求可显示错误提示信息并自动重新获得焦点。
(3)window浏览器窗口对象响应onfocus获得焦点事件可以迫使一个窗口总在其他窗口背后,必须等其他窗口都最小化或关闭后该窗口才可以浏览。
window.onfocus=moveBack; //window事件无需在函数中
functionmoveBack() { self.blur();} //获得焦点时重新失去焦点
(4)window对象响应onblur失去焦点事件可以使一个窗口总在其他窗口前面。
window.onblur=moveUp;
function moveUp() { self.focus();} //失去焦点时重新获得焦点
IE浏览器实际运行时如果打开的其他窗口在前面,则该窗口在屏幕状态栏中的图标先闪动然后显示为突出颜色以提醒用户。
例子:h12-15
(二)错误提示
0nerror事件与页面错误提示
用try...catch捕获错误
用throw抛出错误对象
1、事件的介绍(种类)
2、单击双击事件分析
举例:h12
二、新课
(一)全局变量
通过h12例子,介绍全局变量
(二)事件介绍
1、不同标记响应鼠标事件-
h3、span、文本框、文本区响应各种鼠标事件,单击h3标题变为红色,双击恢复为黑色。
鼠标单击事件还将同时分解为鼠标按下、鼠标释放,释放事件的显示会被单击覆盖。另外鼠标进入的同时会伴随着移动,观察进入时必须小心缓慢进入,否则其显示会被移动覆盖。
文本框、按钮等空标记(单标记)以及文本区双标记等表单标记用value属性获取或写入文本内容,而<div>、<p>、<span>等非空双标记的文本内容是该标记对象的firstChild子对象,老方式可用innerHTML属性获取或写入文本内容,而新标准则使用firstChild子对象的nodeValue属性获取或写入文本内容。
使用firstChild.nodeValue属性时必须保证标记的初始状态不能没有内容,如果该标记中没有初始内容则应输入保留一个空格或书写 否则会产生firstChild对象不存在错误。
注意:对文本区表单元素最好使用value属性获取或写入文本内容,如果使用firstChild.nodeValue属性很容易发生问题,例如运行时人为将文本区清空就会出现问题。
例子:h12-13
h12-14
2、焦点,表单事件
鼠标点击某个元素时该元素获得焦点,其他元素获得焦点时该元素随即失去焦点,获得焦点的元素还可以响应按键事件。
常用的焦点、按键及表单事件有onfocus获得焦点、onblur失去焦点、onchange内容被改变(失去焦点时触发)、onsubmit提交表单、onreset重置表单、onkeydown键按下、onkeyup键释放、onkeypress敲击按键(包括键按下、键释放,响应顺序为按下、敲击、释放)。
表单元素还可响应onselect选中文本、oncopy复制、oncut剪切、onpaste粘贴等页面编辑事件。
注意:onsubmit提交表单、onreset重置表单事件必须由<form>标记响应,返回false可终止提交或重置表单,而submit提交按钮、reset重置按钮只能响应单击事件,返回false同样可终止提交或重置表单。
焦点、按键及表单事件应用技巧:
(1)表单元素内容不允许修改可设置其只读属性,对不支持只读的浏览器可对该元素附加onfocus获得焦点事件强迫离开。
(2)利用onblur失去焦点事件可在用户离开时对数据进行验证,不符合要求可显示错误提示信息并自动重新获得焦点。
(3)window浏览器窗口对象响应onfocus获得焦点事件可以迫使一个窗口总在其他窗口背后,必须等其他窗口都最小化或关闭后该窗口才可以浏览。
window.onfocus=moveBack; //window事件无需在函数中
functionmoveBack() { self.blur();} //获得焦点时重新失去焦点
(4)window对象响应onblur失去焦点事件可以使一个窗口总在其他窗口前面。
window.onblur=moveUp;
function moveUp() { self.focus();} //失去焦点时重新获得焦点
IE浏览器实际运行时如果打开的其他窗口在前面,则该窗口在屏幕状态栏中的图标先闪动然后显示为突出颜色以提醒用户。
例子:h12-15
(二)错误提示
0nerror事件与页面错误提示
用try...catch捕获错误
用throw抛出错误对象
相关文章推荐
- Javascript AMD模块化规范-备用
- Sublime Text插件:HTML+CSS+JAVASCRIPT+JSON快速格式化[转]
- JavaScript中对DOM节点的访问、创建、修改、删除
- 常用javascript表单验证汇总
- char.js
- javascript/js 原生动态引入外部css文件及动态插入css代码片段
- js判断鼠标滑轮滚动方向并根据滚动的方向触发不同的事件
- 用Javascript编写Chrome浏览器插件--(一)
- js 将json字符串转换为json对象的方法解析
- 使用Gson进行json数据转换(list to json 和json to list)
- JavaScript声明全局变量三种方式的异同
- js验证手机号输入是否符合规则
- JavaScript获取cookie
- JavaScript设置cookie
- CreateJs系列教程之 EaselJs_6_绘制动画走秀(spriteSheet)
- Javascript设计模式理论与实战:组合模式
- jsp+Servlet编程实现验证码的方法
- js中的时间与毫秒互相转换
- js漂浮窗口广告
- jsp编程获取当前目录下的文件和目录及windows盘符的方法