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

原文地址:https://www.cnblogs.com/-gongxue/p/14166725.html