Jscript常用基本对象和事件监听

Jscript常用基本对象和事件监听

事件

JavaScript响应事件的函数叫作事件处理程序或者事件侦听器。事

件处理程序的名字以“on”开头，如click事件的事件处理程序就 是onclick

document.getElementById("txt")  //通过id获取标签

鼠标事件

事件 介绍

onload 某个页面或图像被完成加载

onclick 鼠标点击某个对象

ondblclick 鼠标双击某个对象

onmousedown 某个鼠标按键被按下

onmousemove 鼠标被移动

onmouseout 鼠标从某元素移开

onmouseover 鼠标被移到某元素之上

onmouseup 某个鼠标按键被松开

键盘事件

事件 介绍

onchange 用户改变域的内容

onkeydown 某个键盘的键被按下

onkeypress 某个键盘的键被按下或按住

onkeyup 某个键盘的键被松开

onreset 重置按钮被点击

onsubmit 提交按钮被点击

onselect 文本被选定

onblur 元素失去焦点

onfocus 元素获得焦点

Event对象常用的属性和方法

属性 描述

srcElement 对于生成事件的 Window 对象、Document 对象或Element 对象的引用

keyCode 针对于键盘事件，返回键盘按下的字符编码值

pageX 事件触发时，鼠标在整个网页中的水平位置

pageY 事件触发时，鼠标在整个网页中的垂直位置

type 事件句柄

cancelable 返回事件是否有默认动作

方法 描述

preventDefault() 停止事件的默认行为

stopPropagation() 阻止事件冒泡

事件方法是值调用改方法触发对于的事件，即通过代码触发事件

方法 描述

click() 相当于鼠标单击

blur() 使对象失去焦点

focus() 实现对象得到焦点

select() 选择表单元素的内容

---

window对象

window常用几个属性

属性	描述
history	对 History 对象的只读引用 表示有关客户访问过的URL信息（历史信息）
location	用于窗口或框架的location对象 表示当前的Url信息
document	对 Document 对象的只读引用

window.location=http://www.baidu.com**   //修改当前url表示跳转到百度

window常用的方法

方法名称	说明
prompt（）	显示可提示用户输入的对话框 返回输入的字符
alert( )	显示带有一个提示信息和一个确定按钮的警示框
confirm( )	显示一个带有提示信息、确定和取消按钮的对话框 返回boolean值
close（）	关闭浏览器窗口
open（‘地址’，‘名字’，‘特征’）	打开一个新的浏览器窗口，加载给定 URL 所指定的
setTimeout(函数，时间 )	在指定的毫秒数后调用函数或计算表达式 //延时函数
setInterval(函数，时间 )	按照指定的周期（以毫秒计）来调用函数或表达式（死循环） 可以用clearInterval（）方法关闭 定时函数

window常用的事件

名称	说明
onload	一个页面一幅图像完成加载面或
onmouseover	鼠标移到某元素之上
onlick	当用户单击某个对象时调用的事件句柄
onkeydown	某个键盘按键被 按下
onchange	域的内容被改变

history对象

表示有关客户访问过的URL信息（历史信息）

常用方法

名称	说明
back（）	加载history对象列表中的前一个URL
forward（）	加载history对象列表中的下一个URL
go()	加载history对象列表中的某个具体的URL

history.back()----------等价-------------history.go(-1) 浏览器中的后退

history.forward()----------等价-------------history.go(1) 浏览器中的前进

location对象

表示当前的Url信息 浏览器当前url

常用属性

名称	说明
host	设置或返回主机名和当前URL的端口号
hostname	设置或返回当前URL的主机名
href	设置或返回完整的URL

常用方法

名称	说明
reload	重新加载当前文档
replace	用新的文档替换当前文档

decment对象

常用方法

名称	说明
getElementById()	返回对拥有指定id的第一 个对象的引用 （对象的唯一）
getElementsByName()	返回带有指定名称的对象 的集合 （相同name属性）
getElementsByTagName()	返回带有指定标签名的对 象的集合 （相同元素）
getElementsByTagName()	向文档写文本、HTML表

标签对象

（1）标签对象.innerHTML：获取双标签结构的，一对标签结构的，一对标签中间的所有内容

​ 给innerHTML赋值就是改变标签里面的内容

(2)标签对象.value:获取对象的value值 一般用于input标签

复选框的属性

checked属性值 选中：true 未选中：false

---

动态创建和添加节点（案例）

docment.createElement（“标签名‘）

--------创建节点

docment.createTextNode(“文本”)

--------创建标签节点中的文本对象（字符串）

标签对象.appendChild（文本对象）;

---------将文本对象添加到标签中

最后将创建好的标签 添加到HTML中指定的位置

	<ul id="ulid">
			<li>烈火燎原</li>
			<li>冰封</li>
			<li>治愈</li>
		</ul>
		<input type="button" name="" id="" value="学习技能" οnclick="addLi()" />
		
		<script type="text/javascript">
			function addLi(){
				
				var str=prompt("请输入学习的技能名称：");
				var li=document.createElement("li")
				var str=document.createTextNode(str)
				li.appendChild(str)
				document.getElementById("ulid").appendChild(li)
				
			}

标签对象.parentNode() ：获取当前对象的父标签

标签对象.removeChild(“子节点对象”) ：删除该对象指定的子节点

标签对象.children :获取该对象所有的子元素节点

docment节点对象（根据层次关系访问节点）

常用的几种节点访问方式

属性名称	描述
children	获取该对象所有的子元素节点 返回一个对象集合
parentNode	获取当前对象的父标签
nextElementSibling	下一个节点
previousElementSibling	上一个节点

创建和插入节点

创建
属性	描述
createElement( tagName)	创建一个标签名为tagName的新元素节点
createTextNode(“文本”)	创建标签节点中的文本对象（字符串）
插入
A.appendChild( B)	把B节点追加至A节点的末尾
insertBefore( A,B )	把A节点插入到B节点之前
cloneNode(deep)	复制某个指定的节点
appendChild（A）	在该标签中的末尾插入A标签

删除和替换

名称	描述
removeChild( node)	删除指定的节点
replaceChild( newNode, oldNode)属性attr	用其他的节点替换指定的节点

总结

window对象实现弹出窗口、关闭当前窗口、弹 出页面消息框等效果

Date对象获得当前系统的日期、时间

定时函数：setTimeout()和setInterval()

history和location对象实现浏览器中后退前进和刷新

document对象的方法 getElementById() 、getElementsByName()、getElementsByTagName()