JavaScript事件03——事件对象
2019-07-25 本文已影响0人
葵自渡_
大纲：
- 事件对象（DOM中的事件对象，IE中的事件对象，跨浏览器）
一、事件对象
- 什么是事件对象？
在触发DOM上的事件都会产生一个event对象
1、DOM中的事件对象：
- 常用的属性
1、type属性：用于获取事件类型
2、target属性：用于获取事件目标
- 例子：
type属性
<body>
<div id="box">
<button id="btn">按钮</button>
</div>
</body>
<script type="text/javascript">
function showName(event){
console.log(event.type); //click
}
var btn = document.getElementById('btn');
btn.addEventListener('click',showName,false)
</script>
target属性
<body>
<div id="box">
<button id="btn">按钮</button>
</div>
</body>
<script type="text/javascript">
function showName(event){
console.log(event.target); //<button id="btn">按钮</button>
}
var btn = document.getElementById('btn');
btn.addEventListener('click',showName,false)
</script>
target.nodeName属性（节点名称）
function showName(event){
console.log(event.target.nodeName); //BUTTON
}
- 常用的方法
1、stopPropagation() 阻止事件冒泡
2、preventDefault() 取消默认行为
- 例子
阻止冒泡
<body>
<div id="box">
<button id="btn">按钮</button>
</div>
</body>
<script type="text/javascript">
var btn = document.getElementById('btn');
var box = document.getElementById('box');
function showName(event){
console.log('btn');
event.stopPropagation() //阻止冒泡
}
function showBox(){
console.log('box');
}
btn.addEventListener('click',showName,false)
box.addEventListener('click',showBox,false)
</script>
阻止默认行为
<body>
<div id="box">
<button id="btn">按钮</button>
<a href="https://www.jianshu.com/" id="book">简书</a>
</div>
</body>
<script type="text/javascript">
var book = document.getElementById('book');
function stopGo(event){
event.preventDefault() //阻止默认行为
}
book.addEventListener('click',stopGo,false)
</script>
2、IE中的事件对象
- 常用属性
1、type属性：用于获取事件类型
2、srcElement属性：用于获取事件目标（同DOM中的target）
3、cancelBubble属性：用于取消事件冒泡。默认值是false，true是阻止冒泡
4、returnValue属性：用于阻止事件的默认行为。默认是true，false是阻止默认行为
type属性(这里都用了DOM0级事件处理程序)
<body>
<div id="box">
<button id="btn">按钮</button>
</div>
</body>
<script type="text/javascript">
var btn = document.getElementById('btn');
btn.onclick = function(event){
var event = window.event; //兼容IE8
alert(event.type) //click
}
</script>
srcElement属性
var btn = document.getElementById('btn');
btn.onclick = function(){
var event = window.event; //兼容IE8
alert(event.srcElement) //button
}
cancelBubble属性
<script type="text/javascript">
var btn = document.getElementById('btn');
var box = document.getElementById('box');
btn.onclick = function(){
alert('btn')
var event = window.event //兼容IE8
event.cancelBubble = true //取消冒泡
}
box.onclick = function(){
alert('box')
}
returnValue属性
<body>
<div id="box">
<button id="btn">按钮</button>
<a href="https://www.jianshu.com/" id="book">简书</a>
</div>
</body>
<script type="text/javascript">
var book = document.getElementById('book');
book.onclick = function(){
window.event.returnValue = false //阻止默认行为
}
</script>
- 注意：
在使用DOM0级事件处理程序时，event对象作为window对象的一个属性存在。IE8之前的必须加上window.event
3、跨浏览器的事件对象
- 思路：
有什么功能就用什么功能。结合之前的跨浏览器事件处理程序
- 例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box">
<input type="button" value="按钮" id="btn">
<a href="https://www.jianshu.com/" id="book">简书</a>
</div>
</body>
<script type="text/javascript">
var EventUtil = {
//添加事件
addHandler:function(ele,type,fn){
//DOM2级事件
if(ele.addEventListener){
ele.addEventListener(type,fn,false);
//IE事件
}else if(ele.attachEvent){
ele.attachEvent("on"+type,fn)
//DOM0级事件
}else{
ele["on"+type] = fn
}
},
//删除事件
removeHandler:function(ele,type,fn){
//DOM2级事件
if(ele.removeEventListener){
ele.removeEventListener(type,fn,false);
//IE事件
}else if(ele.detachEvent){
ele.detachEvent("on"+type,fn)
//DOM0级事件
}else{
ele["on"+type] = null
}
},
//获取event
getEvent:function(event){
return event?event:window.event;
//return event || window.event
},
//获取目标事件
getTarget:function(event){
return event.target || event.srcElement;
},
//阻止默认行为
getPrevent:function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
},
//阻止冒泡
getStop:function(event){
if(event.stopPropagation){
event.stopPropagation()
}else{
event.cancelBubble = true
}
}
}
var btn = document.getElementById('btn');
var box = document.getElementById('box');
var book = document.getElementById('book');
EventUtil.addHandler(btn,"click",function(event){
//获取event
event = EventUtil.getEvent(event);
//获取目标事件
var target = EventUtil.getTarget(event); // alert(target)
alert('btn');
//阻止冒泡
EventUtil.getStop(event);
});
EventUtil.addHandler(book,"click",function(event){
event = EventUtil.getEvent(event);
//阻止冒泡
EventUtil.getStop(event);
//阻止默认行为
EventUtil.getPrevent(event);
});
EventUtil.addHandler(box,"click",function(event){
event = EventUtil.getEvent(event);
alert('box')
});
</script>
</html>
