JavaScript（34）
1. DOM0用 onclick = function() {}和onclick = null绑定.默认在冒泡阶段被处理相当于元素调用自己的属性
2.DOM2级事件处理程序用addEventListener(eventName, handler, boolean)和removeEventListener(同前).
其中参数分别为: 要处理的事件名字, 处理的函数, 布尔值(为true表在捕获阶段调用处理函数.false在冒泡阶段调用.为了兼容,一般都用false)
3. IE事件处理程序用attachEvent(eventName, handler)和detachEvent(同前)
其中参数分别为: 事件处理程序名称, 事件处理函数(因为默认在冒泡阶段捕获,所以没有boolean)
1. 添加多个事件时,DOM2级是按事件添加的顺序来执行,IE是反顺序
2. DOM2的eventName没有'on',IE有'on'.例如点击时间.DOM2用click, IE用onclick
3. DOM0级被认为是元素的方法,所以其this引用当前的元素; &IE事件处理程序的this等于window
1. 都能为同一个元素添加多个事件处理程序
2. 事件处理函数handler为匿名的时候,无法移除事件
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：12653次
排名：千里之外
原创：55篇
(2)(15)(4)(1)(6)(4)(10)(1)(2)(2)(3)(11)&&国之画&&&& &&
版权所有 京ICP备号-2
迷上了代码！JS—事件对象 - 简书
<div class="fixed-btn note-fixed-download" data-toggle="popover" data-placement="left" data-html="true" data-trigger="hover" data-content=''>
写了106264字，被294人关注，获得了575个喜欢
JS—事件对象
在触发DOM上的某个事件时，会产生一个事件对象event。这个对象中包含着所有与事件有关的信息。包括导致事件的元素，事件的类型以及其他与特定事件相关的信息。
举例鼠标操作导致的事件对象中，会包含鼠标位置的信息，键盘操作导致的事件对象中，会包含按下的键有关的信息，
所有浏览器都支持event对象，event对象会传入DOM0级，DOM2级，HTML指定，的事件处理程序中，但支持的方式不同，所以也会涉及跨浏览器的部分。
兼容DOM的浏览器
function handler(){
alert(event.type);
EventUtil.addHandler(btn,'click',handler);//接上篇笔记
event：在支持至少DOM2级的浏览器内，无论使用html特性指定，dom0级，2级，该对象都是该事件内置对象，可以在事件处理函数内直接使用。this：在支持至少DOM2级的浏览器内，无论使用html特性指定，dom0级，2级，都是指向当前正在处理事件的那个元素。
列举所有事件的事件对象，都会有的成员。
表明事件是否冒泡
stopPropagation()
取消事件的进一步捕获或冒泡，如果bubbels为true，则可以使用这个方法
cancelable
表明是否可以取消事件的默认行为
preventDefault()
取消事件的默认行为，如果cancelable为true，则可以使用这个方法
currentTarget
其事件处理程序当前正在处理事件的那个元素
事件的目标
与事件相关的细节信息
eventPhase
调用事件处理程序的阶段：1表示捕获阶段2表示处于目标3表示冒泡阶段
为true表示事件是浏览器生成的，为false表示事件是由开发人员通过js创建的
被触发的事件的类型
AbstractView
与事件关联的抽象视图。等同于发生事件的window对象
成员中有两个成员比较相似：currentTarget:this对象始终等于他的值，随着事件冒泡或者捕获，他得值等于捕获或冒泡到的上级元素的值。target：只包含事件的实际目标。
type可以利用type属性为一个元素同时添加多类事件处理程序。采用dom0级试试
var btn=document.getElementById('d1');
var handler=function(){
switch(event.type){
case "click":
alert("clicked");
case "mouseover":
event.target.style.background='red';
case "mouseout":
event.target.style.background='yellow';
btn.onclick=
btn.onmouseover=
btn.onmouseout=
cancelable、preventDefault()只有cancelable为true时，才可以使用preventDefault()方法，来取消其默认行为。
&a href="/" id="myherf"&百度&/a&
var Link=document.getElementById("myherf");
Link.onclick=function(){
event.preventDefault();
这样单击百度时，并不会跳转到百度的页面。
stopPropagation()立即停止事件在dom层次中的传播，即取消进一步的事件捕获或冒泡。 function handler(){
alert(event.type);
event.stopPropagation();
eventPahse用来确定事件当前位于事件流的哪个阶段
var btn=document.getElementById('d1');//body内的div
var wrap=document.getElementById('wrap');//body
function handler(){
alert(event.eventPhase)
btn.addEventListener('click',handler,false);//2处于目标对象
wrap.addEventListener('click',handler,false);//3冒泡阶段
wrap.addEventListener('click',handler,true);//1捕获
event对象只有在事件处理程序执行期间，才会存在，执行完毕即销毁。
IE中的事件对象在IE8及其以前版本的浏览器是不兼容DOM2级的，但是还是可以使用dom0级的方法添加事件处理程序。
dom0级方法中：
var div=document.getElementById("test");
div.onclick=function(){
var event=window.//event为window对象
alert(event.type);
使用IE的专属添加事件的方法，event对象作为事件处理程序的内部对象。可以直接使用event.type。
html指定：event对象同样也包含于创建他的事件相关的属性和方法。
dom0级方法中this等于正在处理事件的那个元素。
使用IE的专属this等于全局对象
html指定如果是在标签上直接使用this，那么等于正在处理事件的那个元素。如果是使用标签上指定函数，那么函数内的this指的是window。
看到了分歧，结果是必然要编写一个可以跨浏览器的。
IE的event包含的对象与方法
cancelBubble
默认值为false，但将其设置为true就可以取消事件冒泡，与DOM中stopPropagation()的方法作用相同
returnvalue
默认值为true，但将其设置为fasle，就可以取消事件的默认行为，与DOM中的preventDefault()方法的作用相同
srcElement
事件的目标，与DOM中的target属性相同
被触发的事件类型
returnvalue
var div=document.getElementById("test");
div.onclick=function(){
window.event.returnValue=
但是没有办法判定默认事件能否被取消。
cancelBubble
var div=document.getElementById("test");
div.onclick=function(){
alert('ok')
window.event.cancelBubble=
因为IE8及以前只支持冒泡所以只能取消冒泡。
跨浏览器的事件对象这个面试会问道的，写一个通用的事件侦听函数！就写下面的就可以！bingo！
var EventUtil={
getEvent:function(event){
return event||window.
getTarget:function(event){
return event.target||event.srcE
preventDefault:function(){
if(event.preventDefault){
event.preventDefault();
event.returnValue=
stopPropagation:function(){
if(event.stopPropagation){
event.stopPropagation();
event.cancelBubble=
addHandler:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element["e"+type]=function(){
handler.call(element)
element.attachEvent("on"+type,element["e"+type]);
element["on"+type]=
removeHandler:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,element["e"+type]);
element["e"+type]=
element["on"+type]=
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮
被以下专题收入，发现更多相似内容：
程序员的最佳技术书推荐，技术书书讯，欢迎大家投搞给程序员书屋。联系小编请新浪微博@出版圈郭志敏 。
郭志敏：出版圈里的媒体运营
...
· 9251人关注
前端开发学习、总结
· 3107人关注
你好~\(≧▽≦)/~啦啦啦
· 2194人关注
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
选择支付方式：