事件

1、事件概述

　　事件：指DHTML对象在状态改变、操作鼠标或键盘时触发的动作

　　　　鼠标事件

　　　　键盘时间

　　　　状态改变事件

　　event对象

　　　　事件触发后将会产生一个event对象

2、事件句柄

　　通过一个事件句柄，可以在某个事件发生时对某个元素进行某种操作

　　　　鼠标事件：onclick、ondblclick、onmousedown、onmouseup、onmouseover、onmouseover、onmouseout

　　　　键盘事件：onkeydown、onkeyup

　　　　状态事件：onload、onunload、onchange、onfocus、onblur、onresize、onsubmit

3、事件定义

　　在html属性定义中直接处理事件

<input type="button" value="按钮" onclick="method();"  />

　　js代码中动态定义

//btnObj为一个按钮对象
btnObj.onclick = method;
//或
btnObj.onclick=function(){
    alert("hello");
}

　　取消事件：onXXX="return false;"

<input type="sumbit" value="删除" onclick="return deleteData();" />

function deleteData(){
    var result=confirm("确定要删除吗？");
    return result;
}

4、事件处理机制

　　事件的冒泡处理机制(如图)

　　可以取消事件的冒泡

　　　　event.cancelBubble=true;

5、event对象

　　任何事件触发后将会产生一个event对象

　　event对象记录事件发生时的鼠标位置，键盘按键状态和触发对象对象等信息

　　　　获得event对象

　　　　使用event对象获得相关信息，如单击位置、触发对象等

　　常用属性：clientX/clientY/cancelBubble等

6、获取event对象

　　需要考虑浏览器的兼容性

　　IE浏览器

　　js或则html代码中直接使用event关键字

　<p onclick="alert(event.clientX);">p text</P>

　　<div onclick="func();">div text</div>

　　//IE浏览器

　　function func(){

　　　　alert(event.clientX+":"+event.clientY);
　　}

　　Firefox浏览器

　　　　html代码中直接使用event

<p onclick="alert(event.clientX);">p text</p>

　　js代码中直接使用event关键字

<div onclick="func();">div text</div>

//firefox浏览器
function func(){
    alert(event.clientX+":"+event.clientY);//会报错
}
//js代码中不能直接使用event关键字

　　将HTML代码中，在事件句柄定义时，使用event将事件对象作为参数传入方法

<div onclick="func(event);">div text</div>

//firefox浏览器
function func(e){
    alert(e.clientX+":"+e.clientY);
}
//可以解决浏览器兼容问题

7、使用event对象

　　对于event对象，经常需要获得事件源

　　　　事件源，即触发事件的元素（事件的目节点）

　　IE浏览器：event.srcElement

　　Firefox浏览器:event.target

<div onclick="func(event);">div text</div>

//IE浏览器
function func(e){
    alert(e.srcElement.nodeName);//DIV
}

//firefox浏览器
function func(e){
    alert(e.target.nodeName); //DIV
}

<div onclick="func(event);">div text</div>

//考虑浏览器兼容问题
function func(e){
    var obj=e.srcElement || e.target;
    alert(obj.nodeName);//DIV
}