Javascripts事件基础和事件绑定
javascript事件基础和事件绑定
一、事件驱动
1、事件
javascript侦测到的用户的操作或是页面的一些行为
2、事件源
引发事件的元素(发生在谁身上)
3、事件处理的程序
对事件处理的程序或是函数(发生什么事)
二、事件分类
1、鼠标事件
onclick 鼠标单机时触发此事件;
ondblclick 鼠标双击时触发此事件;
onmousedown 按下鼠标时触发此事件;
onmouseup 鼠标按下后松开鼠标时触发此事件;
onmousemove 鼠标移动时触发此事件;
onmouseout 当鼠标离开某对象范围时触发此事件。
2、键盘事件
onkeyup 当键盘上某个按键被按下后松开时触发此事件;
onkeydown 当键盘上某个按键被按下时触发此事件;
onkeypress 当键盘上某个按键被按下并且释放触发此事件。
3、表单事件
onsubmit 一个表单被递交时触发此事件;
onfoucs 当某个元素获得焦点时触发此事件;
onchange 当前元素失去焦点并且元素的内容发生改变时触发此事件。
4、页面事件
onload 页面加载事件;
onunload 当前页面将被改变时触发此事件;
onbeforeunload 当前页面的内容将要被改变时触发此事件。
三、如何绑定事件
1、在脚本中绑定;
2、直接在HTML元素绑定。
例:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function() {
var btn = document.getElementById("btn");
btn.onclick = fn1;
addEvent(btn, "onclick", fn2);
btn.onclick = null;
};
//obj: 需要添加事件的对象
//types: 事件的类型
//fns: 添加的事件方法
function addEvent(obj, types, fns) {
if(obj[types] == null) {
obj[types] = fns;
} else {
var oldFns = obj[types];
obj[types] = function() {
oldFns();
fns();
}
}
}
function fn1() {
alert('1');
}
function fn2() {
alert('2');
}
</script>
</head>
<body>
<input type="button" id="btn" value="点击"/>
</body>
</html>
四、同一个元素绑定多个事件处理程序
IE:
对象.attachEvent("事件(on)","处理程序") 添加;
对象.detachEvent("事件(on)","处理程序") 删除;
FF:
对象.addEventListener("事件","处理程序",布尔值) 添加;
对象.removeEventListener("事件","处理程序",布尔值) 删除;
例:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function() {
btn.onclick = fn1;
addEvent_1(btn,"click",fn2);
addEvent_2(btn,"click",fn2);
};
function addEvent_1(obj,types,fns){
if(document.all){
obj.attachEvent("on"+ types,fns);
}else{
obj.addEventListener(types,fns,false)
}
}
function addEvent_2(a,b,c){
if(document.all){
a.detachEvent("on" +b,c)
}else{
a.removeEventListener(b,c,false)
}
}
function fn1(){
alert("1");
}
function fn2(){
alert("2");
}
</script>
</head>
<body>
<input type="button" id="btn" value="点击"/>
</body>
</html>