JS的常用事件
HTML DOM Event 对象
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会在事件发生前被执行。
回调函数
1、对于当前程序来说，haha函数被称为回调函数(callback函数)。
2、回调函数的特点：
函数本身不负责调用，由其他程序负责调用该函数。要求应用先传给它一个函数，好在合适的时候调用，以完成目标任务。这个被传入的、后又被调用的函数就称为回调函数。
<script>
function haha(){
alert("haha");
}
</script>
<input type="button" value="哈哈" onclick="haha()" />
事件句柄
onblur
onchange
onclick
ondblclick
onfocus
onkeydown
onkeyup
onload
onmousedown
onmousemove
onmouseout
onmouseover
onmouseup
onreset
onselect
onsubmit
任何一个事件都会对应一个事件句柄，事件句柄是在事件前添加on。
onblur元素失去焦点，在对象失去焦点时发生。
<head>
<meta charset="utf-8">
<title></title>
<script>
function upperCase()
{
alert("失去焦点")
}
</script>
</head>
<body>
输入您的姓名：
<input type="text" id="name" onblur="upperCase()" />
</body>
当文本框失去焦点时：
onchange域的内容被改变时发生。
以文本域来举例：
<body>
<script type="text/javascript">
function upperCase(x){
var Str = document.getElementById(x).value;
alert(Str);
}
</script>
输入您的姓名：
<input type="text" id="Str" onchange="upperCase(this.id)" />
</body>
当文本域没有被修改时，无论点击何处都不会触发事件：
一旦文本域被修改，且失去焦点时：
onclick当用户点击某个对象时调用的事件句柄。
第一种注册事件的方式：如上所示。
第二种注册事件的方式：使用纯JS代码完成事件的注册。
<body>
<input type="button" value="hh" id="mybtn" /><br />
<input type="button" value="xx" id="mybtn2" />
<script>
function haha(){
alert("haha");
}
var btn = document.getElementById("mybtn");
//将回调函数haha册到click事件上。
btn.onclick = haha;
//注意不能加()，这里haha()这种语法是错误的。
//使用匿名函数的方式
document.getElementById("mybtn2").onclick = function(){
alert("xixi");
}
</script>
</body>
ondblclick当用户双击某个对象时调用的事件句柄。
<body>
文本框1: <input type="text" id="t1">
<br />
文本框2: <input type="text" id="t2">
<br /><br />
双击下面的按钮<br />
将文本框1的内容拷贝到文本框2中：
<br />
<button ondblclick="document.getElementById('t2').value=
document.getElementById('t1').value">双击复制</button>
</body>
在文本框1中输入：
双击后触发事件，文本框1的内容被拷贝到文本框2中：
onfocus元素获得焦点时发生。
与onblur类似。onkeydown某个键盘按键被按下时发生。
<body>
<script>
/*捕捉回车键*/
window.onload = function(){
var usernameElt = document.getElementById("username");
/*回车键的键值是13；ESC键的键值是27*/
/*e是局部变量，接收事件对象。
键盘按下后键盘对应的值就传给了e*/
usernameElt.onkeydown = function(e){
//用keyCode属性来获取键值
/*alert(e.keyCode);*/
if(e.keyCode === 13){
alert("正在验证...")
}
}
}
</script>
<input type="text" id="username" />
</body>
onkeyup某个键盘按键被松开时发生。
<body>
<script>
function upperCase(x){
var y = document.getElementById(x).value;
document.getElementById(x).value=y.toUpperCase();
}
</script>
输入您的姓名：
<input type="text" id="name" onkeyup="upperCase(this.id)" />
</body>
按下键盘上的q键（英文小写），当松开q键时触发事件，将小写q转换为大写Q：
onload一张页面或一幅图像完成加载时发生。
<!--load事件在页面全部元素加载完毕之后才会发生-->
<body onload="ready()">
<!--
<script>
var btn = document.getElementById("btn");
/*
btn返回null。
因为代码执行到此处的时候
id="btn"的元素还没有加载到内存。
*/
btn.onclick = function(){
alert("xixi")
};
</script>
<input type="button" value="点我" id="btn" />
-->
<script>
/*
上面body里面的onload="ready()"可以换成：
window.onload = ready;
加在这里。
*/
function haha(){
alert("haha");
}
function ready(){
var btn = document.getElementById("btn");
btn.onclick = haha;
}
</script>
<input type="button" value="点我" id="btn" />
</body>
<body>
<script>
/*JS代码设置节点属性*/
window.onload = function(){
document.getElementById("btn").onclick = function(){
var mytext = document.getElementById("mytext");
mytext.type = "checkbox";
}
}
</script>
<input type="text" id="mytext" />
<input type="button" value="将文本修改为复选框" id="btn" />
</body>
点击后：
onmousedown鼠标按钮被按下时发生。
<body>
<script>
function upperCase(x){
var y = document.getElementById(x).value;
document.getElementById(x).value=y.toUpperCase();
}
</script>
请输入：
<input type="text" id="name" onmousedown="upperCase(this.id)" />
</body>
在文本域输入小写a：
在文本域按下鼠标按钮，触发事件，小写a变为大写A：
onmousemove鼠标被移动时发生。
将上面代码中的onmousedown改为onmousemove。
在文本域输入小写a：
鼠标被移动时触发事件，小写a变为大写A：
onmouseout鼠标从某元素移开时发生。
将上面代码中的onmousedown改为onmouseout。
鼠标从文本域移开时触发事件，小写a变为大写A：
onmouseover鼠标移到某元素之上时发生。
将上面代码中的onmousedown改为onmouseover。
鼠标移到文本域元素之上时触发事件，小写a变为大写A：
onmouseup鼠标按键被松开时发生。
将上面代码中的onmousedown改为onmouseup。
在文本域中（其他地方不行）鼠标按键被松开时触发事件，小写a变为大写A：
onreset重置按钮被点击，事件会在表单中的重置按钮被点击时发生。
<body>
<form onreset="alert('表单将被重置')">
Firstname: <input type="text" name="fname" value="John" />
<br />
Lastname: <input type="text" name="lname" />
<br /><br />
<input type="reset" value="重置">
</form>
</body>
在文本框输入信息：
点击重置后表单会恢复默认状态：
onselect文本被选中时发生。
<body>
<form>
文本信息：<input type="text" value="这里是文本信息！"
onselect="alert('你已经选中了文本信息！')" />
</form>
</body>
onsubmit确认按钮被点击时发生。
<body>
<form name="testform" action=""
onsubmit="alert(testform.name.value + ' 你来啦' +'!')">
请输入您的名字：<br />
<input type="text" name="name" />
<input type="submit" value="Submit" />
</form>
</body>
输入之后点击submit弹出：
