深入理解DOM事件机制系列第三篇——事件对象

×

目录

[1]获取 [2]事件类型 [3]事件目标[4]事件代理[5]事件冒泡[6]事件流[7]默认行为

前面的话

  在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息。所有浏览器都支持event对象,但支持方式不同。本文将详细介绍事件对象

获取事件对象

  【1】一般地,event对象是事件程序的第一个参数

  [注意]IE8-浏览器不支持

//IE8-浏览器输出undefined,其他浏览器则输出事件对象[object MouseEvent]
<div id="box" style="height:30px;width:200px;background:pink;"></div>
<script>
var oBox = document.getElementById(‘box‘);
oBox.onclick = function(a){
    box.innerHTML = a;
}
</script>

  【2】另一种方法是直接使用event变量

  [注意]firefox浏览器不支持

//firefox浏览器输出undefined,其他浏览器则输出事件对象[object MouseEvent]
<div id="box" style="height:30px;width:200px;background:pink;"></div>
<script>
var oBox = document.getElementById(‘box‘);
oBox.onclick = function(){
    box.innerHTML = event;
}
</script>

兼容

  于是,对于获取事件对象的常见兼容写法如下

<div id="box" style="height:30px;width:200px;background:pink;"></div>
<script>
var oBox = document.getElementById(‘box‘);
oBox.onclick = function(e){
    e = e || event;
    box.innerHTML = e;
}
</script>

属性和方法

  事件对象包含与创建它的特定事件有关的属性和方法。触发的事件类型不一样,可用的属性和方法也不一样。不过,所有事件都有些共有的属性和方法

事件类型

  事件有很多类型,事件对象中的type属性表示被触发的事件的类型

<div id="box" style="height:30px;width:200px;background:pink;"></div>
<script>
//鼠标移入时,显示mouseover;移出时,显示mouseout;点击时,显示click
var oBox = document.getElementById(‘box‘);
oBox.onclick = oBox.onmouseout =oBox.onmouseover =function(e){
    e = e || event;
    box.innerHTML = e.type;
}
</script>

  通过点击或按tab键将焦点切换到button按钮上可以触发focus事件

<button id="box" style="height:30px;width:200px;background:pink;"></button>
<script>
var oBox = document.getElementById(‘box‘);
oBox.onfocus = function(e){
    e = e || event;
    box.innerHTML = e.type;
}
</script>

事件目标

  关于事件目标,共有currentTarget、target和srcElement这三个属性

currentTarget

  currentTarget属性返回事件当前所在的节点,即正在执行的监听函数所绑定的那个节点

  [注意]IE8-浏览器不支持

  一般地,currentTarget与事件中的this指向相同。但在attachEvent()事件处理程序中,this指向window,详细信息移步至此

<style>
.in{height: 30px;background-color: lightblue;margin:0 10px;}
</style>
<ul id="box">
    <li class="in">1</li>
    <li class="in">2</li>
</ul>
<script>
box.onclick = function(e){
    e = e || event;
    var tags =  box.getElementsByTagName(‘li‘);
    tags[0].innerHTML = e.currentTarget;
    tags[1].innerHTML = (e.currentTarget === this);
}
</script>

target

  currentTarget属性返回事正在执行的监听函数所绑定的节点,而target属性返回事件的实际目标节点

  [注意]IE8-浏览器不支持

  以下代码中,点击该实际目标节点时,颜色变品红;移出时,颜色变浅蓝

<style>
#box{background-color: lightblue;}
.in{height: 30px;}
</style>
<ul id="box">
    <li class="in">1</li>
    <li class="in">2</li>
</ul>
<script>
box.onclick = function(e){
    e = e || event;
    e.target.style.backgroundColor = ‘pink‘;
}
box.onmouseout = function(e){
    e = e || event;
    e.target.style.backgroundColor = ‘lightblue‘;
}
</script>

srcElement

  srcElement属性与target属性功能一致

  [注意]firefox浏览器不支持

<style>
#box{background-color: lightblue;}
.in{height: 30px;}
</style>
<ul id="box">
    <li class="in">1</li>
    <li class="in">2</li>
</ul>
<script>
box.onclick = function(e){
    e = e || event;
    e.srcElement.style.backgroundColor = ‘pink‘;
}
box.onmouseout = function(e){
    e = e || event;
    e.srcElement.style.backgroundColor = ‘lightblue‘;
}
</script>

兼容 

var handler = function(e){
    e = e || event;
    var target = e.target || e.srcElement;
}

事件代理

  由于事件会在冒泡阶段向上传播到父节点,因此可以把子节点的监听函数定义在父节点上,由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理(delegation)

  事件代理应用事件目标的target和srcElement属性完成。利用事件代理,可以提高性能及降低代码复杂度

  有一个需求,一个<ul>中有5个<li>,移入时变浅蓝,移出时变品红

  下面分别用常规方法和事件代理方法来实现

<style>
#box{background-color: pink;}
.in{height: 30px;}
</style>
<ul id="box">
    <li class="in">1</li>
    <li class="in">2</li>
    <li class="in">3</li>
    <li class="in">4</li>
    <li class="in">5</li>
</ul>
<script>
//常规方法
var tags = box.getElementsByTagName(‘li‘);
for(var i = 0; i < tags.length; i++){
    tags[i].onmouseover = function(e){
        this.style.backgroundColor = ‘lightblue‘;
    }
    tags[i].onmouseout = function(e){
        this.style.backgroundColor = ‘pink‘;
    }
}
</script>

<script>
//事件代理方法
box.onmouseover = function(e){
    e = e || event;
    var target = e.target || e.srcElement;
    target.style.backgroundColor = ‘lightblue‘;
}
box.onmouseout = function(e){
    e = e || event;
    var target = e.target || e.srcElement;
    target.style.backgroundColor = ‘pink‘;
}
</script>

事件冒泡

  事件冒泡是事件流的第三个阶段,通过事件冒泡可以在这个阶段对事件做出响应

  关于冒泡,事件对象中包含bubbles、cancelBubble、stopPropagation()和stopImmediatePropagation()这四个相关的属性和方法

bubbles

  bubbles属性返回一个布尔值,表示当前事件是否会冒泡。该属性为只读属性

  发生在文档元素上的大部分事件都会冒泡,但focus、blur和scroll事件不会冒泡。所以,除了这三个事件bubbles属性返回false外,其他事件该属性都为true

<button id="test" style="height: 30px;width: 200px;"></button>
<script>
//点击按钮时,按钮内容为true,说明click事件默认可冒泡
test.onclick = function(e){
    test.innerHTML =e.bubbles;//true
}
</script>
<div id="test" style="height: 50px;width: 200px;overflow:scroll;background:pink;line-height:60px;">内容</div>
<script>
//滚动时,div内容变成false,说明scroll事件默认不可冒泡
test.onscroll = function(e){
    test.innerHTML =e.bubbles;//false
}
</script>

stopPropagation()

  stopPropagation()方法表示取消事件的进一步捕获或冒泡,无返回值

  [注意]IE8-浏览器不支持

<button id="test" style="height: 30px;width: 200px;"></button>
<script>
//点击按钮时,按钮内容为‘button‘,因为阻止了<button>向<body>的冒泡
test.onclick = function(e){
    e = e || event;
    e.stopPropagation();
    test.innerHTML +=‘button\n‘;
}
document.body.onclick = function(e){
    test.innerHTML += ‘body\n‘
}
</script>

stopImmediatePropagation()

  stopImmediatePropagation()方法不仅可以取消事件的进一步捕获或冒泡,而且可以阻止同一个事件的其他监听函数被调用,无返回值

  [注意]IE8-浏览器不支持

  使用stopIPropagation()方法,可以阻止冒泡,但无法阻止同一事件的其他监听函数被调用

<button id="test" style="height: 30px;width: 200px;"></button>
<script>
//使用stopIPropagation()方法,<button>内部变为‘button‘,且背景颜色变成浅蓝
test.addEventListener(‘click‘,function(e){
    e = e || event;
    e.stopPropagation();
    test.innerHTML +=‘button\n‘;
})
test.addEventListener(‘click‘,function(e){
    e = e || event;
    test.style.background = ‘lightblue‘;
})
document.body.onclick = function(e){
    test.innerHTML += ‘body\n‘
}
</script>

  使用stopImmediatePropagation()方法,即可以阻止冒泡,也可以阻止同一事件的其他监听函数被调用

<button id="test" style="height: 30px;width: 200px;"></button>
<script>
//使用stopImmediatePropagation()方法,<button>内部变为‘button‘,且背景颜色不变
test.addEventListener(‘click‘,function(e){
    e = e || event;
    e.stopImmediatePropagation();
    test.innerHTML +=‘button\n‘;
})
test.addEventListener(‘click‘,function(e){
    e = e || event;
    test.style.background = ‘lightblue‘;
})
document.body.onclick = function(e){
    test.innerHTML += ‘body\n‘
}
</script>

cancelBubble

  cancelBubble属性只能用于阻止冒泡,无法阻止捕获阶段。该值可读写,默认值是false。当设置为true时,cancelBubble可以取消事件冒泡

  [注意]该属性全浏览器支持,但并不是标准写法

<button id="test" style="height: 30px;width: 200px;"></button>
<script>
test.onclick = function(e){
    e = e || event;
    e.cancelBubble = true;
    test.innerHTML +=‘button\n‘;
}
document.body.onclick = function(e){
    test.innerHTML += ‘body\n‘
}
</script>

  当使用stopIPropagation()方法或stopImmediatePropagation()方法时,关于cancelBubble值的变化,各浏览器表现不同

//chrome/safari/opera中,cancelBubble的值为false
//IE9+/firefox中,cancelBubble的值为true
<button id="test" style="height: 30px;width: 200px;"></button>
<script>
test.onclick = function(e){
    e = e || event;
    e.stopPropagation();
    test.innerHTML = e.cancelBubble;
}
</script>    

兼容

var handler = function(e){
    e = e || event;
    if(e.stopPropagation){
        e.stopPropagation();
    }else{
        e.cancelBubble = true;
    }
}

事件流

eventPhase

  eventPhase属性返回一个整数值,表示事件目前所处的事件流阶段

  0表示事件没有发生,1表示捕获阶段,2表示目标阶段,3表示冒泡阶段

  [注意]IE8-浏览器不支持

【1】以下代码返回2,表示处于目标阶段

<button id="test" style="height: 30px;width: 200px;"></button>
<script>
test.onclick = function(e){
    e = e || event;
    test.innerHTML = e.eventPhase;
}
</script>

【2】以下代码返回1,表示处于捕获阶段

<button id="test" style="height: 30px;width: 200px;"></button>
<script>
document.addEventListener(‘click‘,function(e){
    e = e || event;
    test.innerHTML = e.eventPhase;
},true);
</script>

【3】以下代码返回3,表示处于冒泡阶段

<button id="test" style="height: 30px;width: 200px;"></button>
<script>
document.addEventListener(‘click‘,function(e){
    e = e || event;
    test.innerHTML = e.eventPhase;
},false);
</script>

取消默认行为

  常见的默认行为有点击链接后,浏览器跳转到指定页面;或者按一下空格键,页面向下滚动一段距离

  关于取消默认行为的属性包括cancelable、defaultPrevented、preventDefault()和returnValue

  点击下列锚点时,会自动打开博客园首页

<a id="test" href="http://www.cnblogs.com" target="_blank">链接</a>

cancelable

  cancelable属性返回一个布尔值,表示事件是否可以取消。该属性为只读属性。返回true时,表示可以取消。否则,表示不可取消

  [注意]IE8-浏览器不支持

<a id="test" href="#">链接</a>
<script>
test.onclick= function(e){
    e = e || event;
    test.innerHTML = e.cancelable;
}
</script>

preventDefault()

  preventDefault()方法取消浏览器对当前事件的默认行为,无返回值

  [注意]IE8-浏览器不支持

<a id="test" href="http://www.cnblogs.com">链接</a>
<script>
test.onclick= function(e){
    e = e || event;
    e.preventDefault();
}
</script>

returnValue

  returnValue属性可读写,默认值是true,但将其设置为false就可以取消事件的默认行为,与preventDefault()方法的作用相同

  [注意]firefox和IE9+浏览器不支持

<a id="test" href="http://www.cnblogs.com">链接</a>
<script>
test.onclick= function(e){
    e = e || event;
    e.returnValue = false;
}
</script>

兼容

var handler = function(e){
    e = e || event;
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
}

return false

  除了以上方法外,取消默认事件还可以使用return false

<a id="test" href="http://www.cnblogs.com">链接</a>
<script>
test.onclick= function(e){
    return false;
}
</script>

defaultPrevented

  defaultPrevented属性表示默认行为是否被阻止,返回true时表示被阻止,返回false时,表示未被阻止

  [注意]IE8-浏览器不支持

<a id="test" href="http://www.cnblogs.com">链接</a>
<script>
test.onclick= function(e){
    e = e || event;
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
    test.innerHTML = e.defaultPrevented;
}
</script>
时间: 2024-10-20 17:39:02

深入理解DOM事件机制系列第三篇——事件对象的相关文章

深入理解DOM事件类型系列第三篇——变动事件

× 目录 [1]删除节点 [2]插入节点 [3]特性节点[4]文本节点 前面的话 变动(mutation)事件能在DOM中的某一部分发生变化时给出提示,这类事件非常有用,但都只能使用DOM2级事件处理程序,且由于浏览器兼容性不好,所以用的不广泛 删除节点 删除节点时,涉及到DOMNodeRemoved事件.DOMNodeRemovedFromDocument事件和DOMSubtreeModified事件这三个事件,下面将详细介绍 DOMNodeRemoved 在使用removeChild()或r

深入理解this机制系列第三篇——箭头函数

× 目录 [1]痛点 [2]解决 [3]基本用法[4]回调函数[5]注意事项 前面的话 this机制与函数调用有关,而作用域则与函数定义有关.有没有什么是可以将this机制和作用域联系起来的呢?本文将介绍ES6新增的内容——箭头函数 痛点 对于闭包的痛点在于,闭包的this默认绑定到window对象,但又常常需要访问嵌套函数的this,所以常常在嵌套函数中使用var that = this,然后在闭包中使用that替代this,使用作用域查找的方法来找到嵌套函数的this值 var a = 0;

深入理解表单脚本系列第三篇——选择文本

× 目录 [1]select() [2]select事件 [3]setSelectionRange() 前面的话 表单是最早用来与用户交互的工具,具有丰富的控件和属性.基本上,它们通过各种控件和属性就可以解决大部分问题.但还有一些问题还是需要表单脚本来实现的,比如本文将要说到的选择文本 select() select()方法用于选择文本框(指type为text的input元素和textarea元素)中的所有文本,该方法不接受参数,且无返回值 <input id="text" va

深入理解脚本化CSS系列第三篇——脚本化CSS类

前面的话 在实际工作中,我们使用javascript操作CSS样式时,如果要改变大量样式,会使用脚本化CSS类的技术,本文将详细介绍脚本化CSS类 style 我们在改变元素的少部分样式时,一般会直接改变其行间样式 <div id="test" style="height:100px;width:100px;background-color:blue;"></div> <script> test.onclick = functio

深入理解javascript函数系列第三篇

前面的话 函数是javascript中特殊的对象,可以拥有属性和方法,就像普通的对象拥有属性和方法一样.甚至可以用Function()构造函数来创建新的函数对象.本文是深入理解javascript函数系列第三篇--属性和方法 属性 [length属性] 函数系列第二篇中介绍过,arguments对象的length属性表示实参个数,而函数的length属性则表示形参个数 function add(x,y){ console.log(arguments.length)//3 console.log(

深入理解javascript作用域系列第三篇

前面的话 一般认为,javascript代码在执行时是由上到下一行一行执行的.但实际上这并不完全正确,主要是因为声明提升的存在.本文是深入理解javascript作用域系列第三篇--声明提升(hoisting) 变量声明提升 a = 2 ; var a; console.log( a ); 直觉上,会认为是undefined,因为var a声明在a = 2;之后,可能变量被重新赋值了,因为会被赋予默认值undefined.但是,真正的输出结果是2 console.log( a ) ; var a

深入理解javascript作用域系列第三篇——声明提升(hoisting)

× 目录 [1]变量 [2]函数 [3]优先 前面的话 一般认为,javascript代码在执行时是由上到下一行一行执行的.但实际上这并不完全正确,主要是因为声明提升的存在.本文是深入理解javascript作用域系列第三篇——声明提升(hoisting) 变量声明提升 a = 2 ; var a; console.log( a ); 直觉上,会认为是undefined,因为var a声明在a = 2;之后,可能变量被重新赋值了,因为会被赋予默认值undefined.但是,真正的输出结果是2 c

javascript面向对象系列第三篇——实现继承的3种形式

前面的话 学习如何创建对象是理解面向对象编程的第一步,第二步是理解继承.开宗明义,继承是指在原有对象的基础上,略作修改,得到一个新的对象.javascript主要包括类式继承.原型继承和拷贝继承这三种继承方式.本文是javascript面向对象系列第三篇——实现继承的3种形式 类式继承 大多数面向对象的编程语言都支持类和类继承的特性,而JS却不支持这些特性,只能通过其他方法定义并关联多个相似的对象,如new和instanceof.不过在后来的ES6中新增了一些元素,比如class关键字,但这并不

EnjoyingSoft之Mule ESB基础系列第三篇:Mule message structure - Mule message结构

目录 1. 探索Mule Message结构 2. Mule Message的Payload 3. Mule Message的Property 4. Mule Message的Attachment 5. Mule的Variable 6. 使用Java操作Mule Message Mule ESB是一个使用Java语言编写的开源企业服务总线,企业服务总线英文Enterprise Service Bus,简称ESB.其相关源代码也托管在GitHub上,可以在https://github.com/mu