1221 监听事件

时间概念和时间监听

return false 组织默认行为

例：阻止跳转

<a href="javascript:return false">阻止默认行为</a>

通用性的事件监听方法

1、绑定HTML元素属性（在HTML中元素标签中添加属性）

例：<input id=”btn1” type="button" value="clickMe" onClick="check(this)">

这段代码就是在按钮的元素标签中添加了onclick属性

2、绑定dom对象属性

document.getElementById(“btn1”).onclick=test;test是函数名

（首先获取id名字为btn1的元素属性再添加onclick属性）

例：获取id为test2的元素节点：var btn=document.getElementById("test2");

　　添加点击事件：

　　　　btn.onclick=get2;
　　　　function get2(){
　　　　　　alert(this.innerHTML);
　　　　}

例：匿名函数版本：

document.getElementById("test2").ondblclick=function(){
alert(this.innerHTML);
}

常见的事件类型

onclick 单击鼠标左键触发

ondblclick 双击鼠标左键触发

onmouseout 鼠标指针移出一个元素边界触发

onmouseover 鼠标指针移入一个元素时触发

例：

鼠标放在红色上蓝色显示
document.getElementById("d1").onmouseover=function(){
document.getElementById("d2").style.display="block";
}
鼠标移出红色后蓝色消失
document.getElementById("d1").onmouseout=function(){
document.getElementById("d2").style.display="none";
}

HTML事件

onload 页面加载完成之后在window对象上触发

onselect 选择了文本框的一个或多个字符时触发

onchange 文本框失去焦点时，并且在他获取焦点时内容发生改变时触发

onsubmit 单击提交按钮时在表单form上触发

onfocus 任何元素或窗口获得焦点时触发

onblur任何元素或窗口失去焦点时触发

例：window.onload=function（）{

这里放想要页面加载完成之后的代码

}

例1：选择事件

document.getElementById("dd2").onselect=function(){
alert(this.value);
}

this代表document.getElementById("dd2")他本身

例2：onchange 内容改变事件

document.getElementById("dd3").onchange=function(){
alert("内容改变了");
}

例3：onsubmit 提交事件

document.getElementsByTagName("form")[0].onsubmit=function(){
alert("表单提交了");
}

例4：onfocus 获得焦点事件

document.getElementById("dd4").onfocus=function(){
alert("获得焦点了");

例5：onblur 失去焦点事件

document.getElementById("dd4").onblur=function(){
alert("失去焦点了");
}