事件绑定和深度
事件绑定分为两种类型：一种是传统的事件绑定（内联模型/脚本模型）；最后一章；
一个是现代事件绑定（DOM2级模型）；现代的事件会在传统的事件绑定的基础上提供更为强大的功能。
传统事件绑定的一个问题
该模型将为事件处理程序分配一个脚本函数；
VaR箱= document.getelementbyid（'box '）； / /获取元素；
（box.onclick =功能）{ / /元素点击触发事件；
警报（'lee）；
}
/一个问题：事件处理程序触发两个事件；
（在window.onload =功能）{ / /第一套方案；
警报（'lee）；
}
（在window.onload =功能）{ / /第二组程序；
警报（'mr.lee）；
}
当两组程序同时执行时，后面的一个将在一个完全覆盖的前面；
在总的在window.onload /失效前；
/解决方案：
（在window.onload =功能）{ / /第一组事件处理程序将被覆盖；
警报（'lee）；
}
如果（typeof在window.onload = = 'function）{ / /判断之前是否有在window.onload；
var保存= NULL；创建存储设备；
保存=在window.onload； / /放在window.onload店之前；
}
（在window.onload =功能）{ / /下一个要执行的事件；
（=在window.onload = / /保存功能）
如果（保存）（保存）；在判断事件是否发生之前，是否有先前保存事件的第一个实现；
警报（'mr.lee '）； / /执行的事件代码；
}
问题二：事件切换器
box.onclick = boblue； / /蓝色首次实现了（）；
功能单元（）{
this.classname ='；
this.onclick =蓝色； / / roblue），第三执行（然后来回切换；
}
功能为蓝（）{
this.classname = '蓝色'；
this.onclick = / /二撕；撕下（）；
}
这个开关在延长的时间内会出现一些问题：
1。如果执行了一个执行函数，它将被覆盖。
box.onclick =警告； / /功能增加；
box.onclick =蓝色； / /警告被覆盖；
2。如果覆盖问题得到解决，就必须包括同时执行；
（box.onclick =功能）{ / /包括，但降低可读性；
（警告）； / /第一时间将不会被覆盖，但第二已覆盖；
toblue.call（本）； / /必须把这个开关；
}
这三个问题；
我们创建自定义事件处理程序；
函数AddEvent（obj，类型，FN）{ / /代替传统的事件处理函数；
保存所有触发器事件处理程序；
如果（typeof obj {在} = =+型'function）{ / /判断不存在的事件；
保存为obj {开+型}； / /如果有保存；
}
（obj {在} =功能+型）{ / /执行；
如果（保存）（已保存）；
fn.call（本）； / /执行功能，通过在这；
}
}
AddEvent（窗口、负荷、功能（））{
警报（'lee '）； / /可执行；
}）；
AddEvent（窗口。负荷功能（）{（）{
警报（'mr.lee '）； / /可执行；
}）
使用自定义事件注册函数来查看切换器上的效果：
AddEvent（窗口、负荷、功能（））{
VaR箱= document.getelementbyid（'box）；
AddEvent（盒，听到咔哒声，蓝色）；
}）；
功能单元（）{
this.classname ='；
（这一AddEvent，蓝色）；
}
功能为蓝（）{
this.classname = '蓝色'；
（这一AddEvent，撕下）；
两个W3C事件处理函数
/ / DOM2事件定义处理程序添加和删除事件的两种方法：事件（addEventListener和removeEventListener（））；
此方法包含所有DOM节点，它们都接收到3个参数：事件名称函数/布尔值（或气泡捕获真捕获，假气泡）；
Window.addEventListener（载荷、函数（）{（）{
警报（'lee）；
}，假）；
Window.addEventListener（载荷、函数（）{（）{
警报（'mr.lee）；
}，假）；
：W3C事件绑定好处：1。不需要定制；2。能屏蔽同一功能；3。可以设置和捕获气泡；
Window.addEventListener（载荷，init，false）； / /的第一个实现；
Window.addEventListener（载荷，init，false）； / /二屏蔽；
函数init（）{
警报（'lee）；
}
开关事件
Window.addEventListener（载荷、函数（）{（）{
VaR箱= document.getelementbyid（'box）；
Box.addEventListener（听到咔哒声，功能）{ / / /（不会被删除；
警报（'lee）；
}，假）；
Box.addEventListener（听到咔哒声，为蓝，false）； / /开关；
}，假）；
功能单元（）{
this.classname ='；
This.removeEventListener（听到咔哒声，撕，false）； / /移除事件处理程序；
This.addEventListener（听到咔哒声，为蓝，false）； / /添加需要转换的事件处理程序；
}
功能为蓝（）{
this.classname = '蓝色'；
This.removeEventListener（听到咔哒声，蓝色，假）；
This.addEventListener（听到咔哒声，撕，假）；
}
设置/冒泡和捕获过程。
Document.addEventListener（听到咔哒声，函数（）{（）{
警报（'document）；
}，TRUE）；
Document.addEventListener（听到咔哒声，函数（）{（）{
警报（'lee）；
}，false）；设置为气泡；
三IE事件处理功能
/ /即实现了两个类似的方法：（attachevent DOM）和detachevent（）；
这两种方法接收相同的参数：事件名和函数；
当使用这两个函数时：
/ / 1.ie不支持捕获，只支持泡沫；
2.ie / /添加功能不能屏蔽重复事件；
在这 / / 3.ie窗口而不是DOM对象；
4。或在传统的事件，即是不可接受的事件对象；但使用attachevent（可以）；
window.attachevent（'onload，函数（）{（）{
VaR箱= document.getelementbyid（'box）；
Box.attachEvent（'onclick，蓝色）；
}）；
功能单元（）{
var = window.event.srcelement；
that.classname ='；
that.detachevent（'onclick，撕下）；
that.attachevent（'onclick，蓝色）；
}
功能为蓝（）{
var = window.event.srcelement；
that.classname = '蓝色'；
that.detachevent（'onclick，蓝色）；
that.attachevent（'onclick，撕下）；
}
：IE不支持捕获；
不能屏蔽；
不能转移此，可以调用过去；
/ /在传统的结合，即不是W3C的参数通过一个事件对象；但如果您使用的是attachevent（可以）；
box.onclick =功能（EVT）{
警报（EVT）； / /未定义；
}
Box.attachEvent（'onclick功能（EVT）{
警报（EVT）； / /对象；
Alert (evt.type); / / click;
}）；
兼容IE和W3C事件切换功能；
函数AddEvent（obj，类型，FN）{ / /添加事件处理程序的兼容性；
如果（obj。addEventListener）{
Obj.addEventListener（类型，FN）；
} else if（obj。attachevent）{
obj.attachevent（开+型，FN）；
}
}
功能removeevent（obj，类型，FN）{ / /删除事件处理程序的兼容性；
如果（obj。removeEventListener）{
Obj.removeEventListener（类型，FN）；
}说如果（obj。detachevent）{
obj.detachevent（开+型，FN）；
}
}
功能gettarget（EVT）{ / /得到目标事件；
如果（EVT。目标）{
返回evt.target；
} else if（窗口。事件。srceleemnt）{
返回window.event.srcelement；
}
}
四事件对象补充
1.relatedtarget
这个属性可以从哪里到哪里/从DOM对象在mouseover和mouseout事件；
box.onmouseover =功能（EVT）{ / /鼠标盒；
警报（EVT。relatedtarget）； / /进入元素前箱；
}
box.onmouseout =功能（EVT）{ / /鼠标开箱；
Alert (evt.relatedTarget); / / get out to the box element;
}
IE / /属性提供了相对应的两组：fromelement和toelement；
兼容函数
功能getearget（EVT）{
var = EVT window.event | |； / /获得事件对象；
如果（e.srcelement）{ / /如果srcelement支持，IE说；
如果（e.type = = 'mouseover）{ / /如果结束了；
返回e.fromeelement； / /使用；
} else if（e.type = = 'mouseout）{ / /如果它是；
返回e.toelement； / /使用；
}
} else if（e.relatedtarget）{ / /如果relatedtarget支持W3C说；
返回e.relatedtarget；
}
}
2。违约事件
超级链接单击默认行为，然后跳转到指定页面；
因此，您可以停止此操作的默认行为——屏蔽跳转，并实现自定义操作；
取消事件有默认行为是不规范的，是返回false；
link.onclick =函数（）{
警报（'lee）；
返回false；直接返回false，不要跳转；
}
虽然返回：假：可以实现这个功能，但是有漏洞；
第一：必须在代码结束时，这导致中间代码的执行，有可能执行小于返回false；
第二：在大多数自定义操作失败之前都写了返回错误；
解决方案：停止前面、后面的默认行为，并执行代码；
函数用来存储（EVT）{ / /跨浏览器兼容的防止违约行为；
var = EVT window.event | |；
如果（e.preventDefault）{
（e.preventDefault）； / / W3C，以防止违约行为；
其他{ }
e.returnvalue = false； / / IE，以防止违约行为；
}
}
三.上下文菜单事件中
当我们右键单击页面时，会自动显示窗口菜单；
所以我们可以使用ContextMenu事件修改我们指定的菜单；但前提是右键单击取消默认行为；
AddEvent（窗口、负荷、功能（））{
var text = docuemnt.getelementbyid（中的）；
AddEvent（文本，'contextmenu功能（EVT）{ / /菜单添加事件处理程序；
var = EVT window.event | |；
PreDef（E）； / /防止违约行为的功能；
菜单= document.getelementbyid（菜单'）； / /找到自定义菜单对象；
menu.style.left = e.clientx + 'px '； / /定义屏幕上的自定义菜单位置；
menu.style.top = e.clientx + 'px；
menu.style.visibility = 'visible '； / /菜单的自定义属性集是可见的；
AddEvent（文件，听到咔哒声，功能（文件）{ / /添加一个事件处理程序；
docuemnt.getelementbyid（'mymenu）。style.visibility =隐藏'； / /自定义菜单；
}）；
}）；
}）；
4。前beforeunload卸载事件
当您离开此页时，此事件可以帮助提供相应的提示；左或返回操作；
AddEvent（窗口。'beforeunload功能（EVT）{
VaR EVT =事件window.event | |；
var消息是否离开此页；
evt.returnvalue =消息；
返回消息；
}）；
5。鼠标滚轮（滚轮）和dommousescroll
用于获取鼠标上的距离；
AddEvent（资料，'mousewheel功能（EVT）{ / /火狐；
警报（getwd（EVT））；
}）；
AddEvent（资料，'dommousescroll功能（EVT）{ / /火狐；
警报（getwd（EVT））；
}）；
功能getwd（EVT）{
var = EVT window.event | |；
如果（e.wheeldelta）{ / /鼠标滚轮事件滚动值存储在wheeldelta；
返回e.wheeldelta；
} else if（e.detail）{ / / dommousescroll事件滚动值存储在细节；
返回EVT。细节* 30； / /保持统一计算；
}
}