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("失去焦点了");
}