前端基础-事件对象
第4章 事件对象
4.1 概述
事件的触发，大部分情况下是用户的一种行为，也就是说，我们并不能确定用户什么时间触发；
而且，由于事件的传播机制，我们甚至不能确定事件具体触发在哪个节点；这是一件很不爽的事情；
如何解决呢？
事件发生以后，系统会调用我们写好的事件处理程序
系统会在调用处理程序时，将事件发生时有关事件的一切信息，封装成一个对象，
作为参数传给监听函数(事件处理程序)，我们把这个对象称为 事件对象。 有关事件发生的一切信息，都包含在这个事件对象中；
根据事件类型的不同，事件对象中包含的信息也有所不同； 如点击事件中，包含鼠标点击的横纵坐标位置，键盘事件中，包含键盘的键值等；
<body>
<div id="div">
<p>pppp</p>
</div>
<input type="text" value="" id="i">
</body>
<script>
var d = document.getElementById('div');
//鼠标事件
d.addEventListener('click',function(e){
console.log(e);
});
var i = document.getElementById('i');
//键盘事件
i.addEventListener('keydown',k);
function k(e){
console.log(e);
}
</script>
4.2 事件对象中的常用属性及方法
4.2.1属性
event.bubbles:属性返回一个布尔值，表示当前事件是否会冒泡; event.eventPhase：返回一个整数值，表示事件流在传播阶段的位置
0:事件目前没有发生。 1:事件目前处于捕获阶段。 2:事件到达目标节点。 3:事件处于冒泡阶段。
event.type:返回一个字符串，表示事件类型，大小写敏感; event.timeStamp:返回一个毫秒时间戳，表示事件发生的时间;
clientX、clientY :获取鼠标事件触发的坐标
<body>
<div id="d">
<p id="p">sdf</p>
</div>
</body>
<script>
var p = document.getElementById('p');
p.onclick = function(e){
//当前事件是否会冒泡
console.log(e.bubbles);
//事件目前所处的节点
console.log(e.eventPhase);
//事件类型
console.log(e.type);
//事件发生的时间戳
console.log(e.timeStamp);
}
</script>4.2.2 事件代理/委托
event.target：对事件起源目标的引用，属性返回触发事件的那个节点。 event.currentTarget：属性返回事件当前所在的节点，即正在执行的监听函数所绑定的那个节点。 作为比较，target属性返回事件发生的节点。
var d = document.getElementById('d');
d.onclick = function(e){
//返回事件节点
console.log(e.currentTarget);
//返回触发节点
console.log(e.target);
}由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父 节点上，由父节点的监听函数统一处理多个子元素的事件。 这种方法叫做事件的代理也叫 事件委托 也有人称为 事件代理
<head>
<title></title>
<meta charset="UTF-8">
<style>
div{padding: 40px}
#div3{width: 300px;height: 300px;border: 1px solid red;}
#div2{width: 200px;height: 200px;border: 1px solid red;}
#div1{width: 100px;height: 100px;border: 1px solid red}
</style>
</head>
<body>
<div id="div3">3
<div id="div2">2
<div id="div1">1</div>
</div>
</div>
</body>
<script>
var d = document.getElementById('div3');
d.onclick = function(e){
e.target.style.background = 'red';
}
</script>4.3.3 阻止浏览器默认行为&阻止事件传播
event.preventDefault()： 方法取消浏览器对当前事件的默认行为， 比如点击链接后，浏览器跳转到指定页面，或者按一下空格键，页面向下滚动一段距离。
event.stopPropagation()： 方法阻止事件在DOM中继续传播，防止再触发定义在别的节点上的监听函数
<body>
<div id="div2">2
<div id="div1">1
<a id="a" href="http://qq.com">王者喝农药</a>
</div>
</div>
</body>
<script>
var d2 = document.getElementById('div2');
var d1 = document.getElementById('div1');
var a = document.getElementById('a');
d2.onclick = function(e){
alert('d2');
}
d1.onclick = function(e){
alert('d1');
}
a.onclick = function(e){
//阻止事件传播
// e.stopPropagation();
alert('a');
//阻止浏览器默认行为
e.preventDefault();
}
</script>4.3 案例
阻止超链接默认跳转
<body>
<!--第1种写法-->
<a href="http://www.baidu.com" onclick="alert('哈哈'); return false;">百度</a>
<!--第2种写法-->
<script>
function f1() {
alert("嘎嘎");
return false;
}
</script>
<a href="http://www.baidu.com" onclick="return f1();">百度</a>
<!--第3种写法-->
<a href="http://www.baidu.com" id="ak">百度</a>
<script>
document.getElementById("ak").onclick=function () {
alert("哈哈");
return false;
};
</script>点击小图显示大图
<body>
<a id="ak" href="images/1.jpg"><img src="images/1-small.jpg" alt="" id="im"></a>
<script>
//点击小图片,显示大图---修改了这个图片标签的src的属性值
//根据id获取小图,注册点击事件,添加事件处理函数
document.getElementById("im").onclick=function () {
//根据id获取超链接
var aObj=document.getElementById("ak");
this.src=aObj.href;
//阻止超链接的默认跳转事件
return false;
};
</script>