java 绑定事件_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元素绑定。

例：

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');

}

四、同一个元素绑定多个事件处理程序

IE：

对象.attachEvent("事件(on)","处理程序") 添加；

对象.detachEvent("事件(on)","处理程序") 删除；

FF：

对象.addEventListener("事件","处理程序"，布尔值) 添加；

对象.removeEventListener("事件","处理程序"，布尔值) 删除；

例：

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");

}