一、事件流
1.冒泡事件：从特定的事件到不特定事件依次触发；（由DOM层次的底层依次向上冒泡）
（1）示例：
<html onclick="add('html<br>')">
<body onclick="add('body<br>');">
<div onclick="add('div<br>');">
<p onclick="add('p<br>');">Click Me</p>
</div>
<div id="display"></div>
</body>
</html>
function add(sText){
var oDiv = document.getElementById("display");
oDiv.innerHTML += sText; //输出点击标签名
}
结果如下：
（2）取消冒泡：冒泡事件有时会带来不必要是的事件发生，可通过以下方式取消冒泡
oEvent.cancelBubble=ture; //取消冒泡事件
2、捕获事件：
（1）从最不精确到最精确（ie不支持）
（2）ie中捕获事件：所有事件集中到该对象
obj.setCapture(); //捕获事件
obj.relaseCapture(); //释放捕获事件
二、事件监听方法
从事件角度看，函数响应事件发生--处理函数；从函数角度看，函数监听事件是否发生--监听函数；
1、通用监听方法
（1）在html标签中添加处理函数 例如<p onclick="function(){}"></p>
（2）通过DOM加载对象，直接设置监听函数
2、ie监听方法
obj.attachEvent(event_handle,fnHandler); //添加监听函数
obj.detachEvent(event_handle,fnHandler); //释放监听函数
3.标准DOM监听方法
obj.addEventListener(event_name,fnHandler,bCapture); //添加监听函数
obj.removeEventListener(event_name,fnHandler,bCapture); //释放监听函数
bCapture表示事件类型（ture：捕获/false:冒泡）
4.ie和标准DOM兼容处理方法
function addEvent(obj,event,fun)
{
if(obj.attachEvent)
{
obj.attachEvent('on'+event,fun);
}
else
{
obj.addEventListener(event,fun,false);
}
}
三、事件对象
（1）IE中的事件对象对以window的属性存在：window.event;
标准DOM中事件对象作为唯一参数传递给事件监听函数;
（2）两种兼容处理方法：
function（ev）
{
var oEvent=ev||window.event;
}
function(oEvent)
{
if(window.event) oEvent=window.event;
}
1、事件对象类型及其常用属性方法
(1)鼠标位置
clienX/clientY:相对可视区域坐标（不包括滚动的距离）
screenX/screenY:相对屏幕坐标
获取包括滚动位置坐标
function getPosition(ev)
{
oEvent=ev||event;
var ollTop=document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
return{x:oEvent.clientX+scrollLeft,y:ev.clientY+scrollTop}
}
（2）鼠标事件
click:单击 dbclick：双击
mousedown：按下任意键触发 mouseup：松开任意键触发
mouseover:在某个元素上时候触发 mouseout:移出某一元素
mousemove：在某个元素上移动时候触发
button属性：按键键值：【标准dom：0左键、1中键（滑轮）、2右键、不支持组合键】
（3）键盘事件：
事件：
keydown：按下某个键触发
keypress：按下某个按键产生字符时触发
keyup：释放摸个按键时触发
属性：
event.keycode属性：按键值
event.crtlkey crtl键是否按下
event.shiftkey shift键是否按下
event.alt alt键是否按下
四、默认事件
1、非用户设置，浏览器自身所带的行为；
2、右键菜单事件：
（1）document.oncontxetmenu=function(){}；
（2）
document.onmousedown=function(ev)
{
var oEvent=ev||window.event;
if(oEvent==2){};
}
3、取消默认事件： return false
4、只能输入数字
obj.onkeydown=function(ev)
{
var oEvent=ev||window.event;
if(oEvent.Code==8 &&(oEvent.CodekeyCode<48 || oEvent.keyCode>57) ) return false;
}
五、html事件
事件名称 触发条件
load 加载完成
unload 卸载完成
error 脚本错误
select 选择文本框多个字
change 文本框失去焦点并且有内容变换
submit 提交
focus 获取焦点
blur 失去焦点
六、自定义事件
// 创建事件
var event = document.createEvent('Event'); // 定义事件名为'build'.
event.initEvent('build', true, true); // 监听事件
elem.addEventListener('build', function (e) {
// e.target matches elem
}, false); // 触发对象可以是任何元素或其他事件目标
elem.dispatchEvent(event);
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
七、事件模型
1、EventTarget 接口
-
addEventListener：绑定事件的监听函数 -
removeEventListener：移除事件的监听函数 -
dispatchEvent：触发事件
(1)target.addEventListener(type, listener[, useCapture]);
-
type：事件名称，大小写敏感。 -
listener：监听函数。事件发生时，会调用该监听函数。 -
useCapture：布尔值，表示监听函数是否在捕获阶段（capture）触发,该参数可选。