前端 —— JavaScript 基础篇 15 --- event 事件对象
在上一篇的文章中提到过 event 对象 。
Event 对象代表事件的状态。与事件相关的一系列数据 ，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
什么时候会产生Event 对象呢?
event对象只在事件发生的过程中才有效
例如: 当用户单击某个元素的时候，该元素的事件就会触发，该事件的本质就是一个函数，而该函数的形参接收一个even，事件通常与函数结合使用，函数不会在事件发生前被执行！
获得event对象兼容性写法
event || (event = window.event);
event对象 常用的属性和方法
属性和方法 描述
target 返回触发此事件的元素（事件的目标节点）。
preventDefault() 通知浏览器不要执行与事件关联的默认动作
stopPropagation() 不再派发事件。
clientX clientY 可视区域的x和y坐标 浏览器可视窗口
pageX pageY 页面文档的x和y坐标，它们用于CSS动态定位的元素
screenX screenY 电脑屏幕的x和y坐标
- 太平洋
- 大西洋
- 印度洋
var oOl = document.querySelector('ol');
oOl.addEventListener('click',function(e){
var e = e || event; //兼容写法
var target = e.target||e.srcElement //兼容写法
console.log(e.target);//点击哪个li 就返回哪个li
})我们来个例子。给每个现有的 li 元素都增加一个点击事件，有个button按钮，每次点击按钮就动态生成一个 li 元素，那么按照之前的写法是这样的：
- 太平洋
- 大西洋
- 印度洋
var oOl = document.querySelector('ol');
var oli = document.querySelectorAll('li');
var btn = document.querySelector('button');
btn.onclick = function(){
oOl.innerHTML +='我是动态的li ';
}
for (var i = 0; i < oli.length; i++) {
oli[i].onclick = function(e){
console.log(e.target);
}
}效果图如下：
这样写存在一个大大问题，那就是新动态生成的元素 没有添加点击事件。要怎样才能解决这个问题呢。我们可以利用上面说的 target属性来解决。看代码：（动态添加的事件就不重复了）
给 li 的父级元素 ol 添加点击事件
oOl.addEventListener('click',function(e){
console.log(e.target);//点击哪个返回哪个li
});
//或者下面这样子
oOl.onclick = function(e){
console.log(e.target);
}原因： target 返回触发此事件的元素（事件的目标节点）。
preventDefault() 和 stopPropagation() 这两个方法在前面的 DOM事件流中提到过啦。这里就不重复啦。
clientX clientY 可视区域的x和y坐标 浏览器可视窗口 。
pageX pageY 页面文档的x和y坐标 它们用于CSS动态定位的元素
screenX screenY 电脑屏幕的x和y坐标
document.addEventListener('mouseover',function(e){
console.log('可视区域的坐标'+e.clientX + ',' + e.clientY)
});//可视区域：浏览器的显示内容的区域
document.addEventListener('mouseover',function(e){
console.log('页面文档的x和y坐标'+e.pageX + ',' + e.pageY)
});
document.addEventListener('mouseover',function(e){
console.log('电脑屏幕的x和y坐标'+e.screenX + ',' + e.screenY)
});
实例：
好啦！这一章就先写到这里啦，欢迎大家多多提意见。如有错误请留言，我会及时改正的哦。