JavaScript事件对象
1、事件对象
1.1、什么是事件对象
1.2、事件对相关的使用语法
1.3、事件对象的兼容性解决方案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div>123</div>
<script>
// 事件对象
var div = document.querySelector('div');
div.onclick = function(e) {
// console.log(e);
// console.log(window.event);
// e = e || window.event;//为了ie678和其他浏览器的兼容问题
console.log(e);
}
// div.addEventListener('click', function(e) {
// console.log(e);
// })
// 1. event 就是一个事件对象 写到我们侦听函数的 小括号里面 当形参来看
// 2. 事件对象只有有了事件才会存在,它是系统给我们自动创建的,不需要我们传递参数
// 3. 事件对象 是 我们事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关
// 信息,鼠标坐标啊,如果是键盘事件里面就包含的键盘事件的信息 比如 判断用户按下了那个键
// 4. 这个事件对象我们可以自己命名 比如 event 、 evt、 e
// 5. 事件对象也有兼容性问题 ie678 通过 window.event 兼容性的写法 e = e || window.event;
</script>
</body>
</html>
1.4、事件对象常见的属性和方法
1.4.1、e.target和e.currrentTarget
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
height: 200px;
width: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div>123</div>
<ul>
<li>123</li>
<li>234</li>
<li>345</li>
</ul>
<script>
// 常见事件对象的属性和方法
// 1、e.target 返回的是触发事件的对象(元素) this返回的是绑定事件的对象(元素)
// 区别:e.target 点击了哪个元素,就返回哪个元素 this 那个元素绑定了这个点击事件,那么就返回谁
var div = document.querySelector('div');
div.addEventListener('click',function(e){
console.log(e.target);
console.log(this);
})
var ul =document.querySelector('ul');
ul.addEventListener('click',function(e){
// 我们给ul绑定了事件 那么this就指向ul
console.log(this);
console.log(e.currentTarget);
//e.target 指向我们点击的那个对象 谁触发了这个事件 我们点击的是li e.target 指向的就是li
console.log(e.target);
})
</script>
</body>
</html>
- 点击div
- 点击li
1.4.2、e.type返回事件类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>123</div>
<a href="http://www.baidu.com">百度</a>
<form action="http://www.baidu.com">
<input type="submit" value="提交" name="sub"></input>
</form>
<script>
// 常见事件对象的属性和方法
// 1、返回事件类型
var div = document.querySelector("div");
div.addEventListener('click',fn);
div.addEventListener('mouseover',fn);
div.addEventListener('mouseout',fn);
function fn(e){
console.log(e.type);//返回事件类型
}
</script>
</body>
</html>
1.4.3、阻止事件的发生
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>123</div>
<a href="http://www.baidu.com">百度</a>
<form action="http://www.baidu.com">
<input type="submit" value="提交" name="sub"></input>
</form>
<script>
// 2、阻止默认行为(事件) 让链接不跳转 或者让提交按钮不提交
var a = document.querySelector('a');
a.addEventListener('click',function(e){
e.preventDefault();//dom标准写法
})
// 3、传统注册方式
a.onclick = function(e){
// 普通浏览器 e.preventDefault();方法
e.preventDefault();
// 低版本浏览器 ie678 returValue 属性
e.returnValue;
// 我们可以利用return false 也能阻止默认行为 没有兼容性问题
// 特点:return 后面的代码不执行了,而且只限于传统的注册方式
return false;
}
</script>
</body>
</html>
1.4.4、阻止冒泡的两种方式 e.stopPropagation();
在下面的案例中,只会阻止son的冒泡。如果想要继续阻止father的冒泡。需要在father中也添加e.stopPropagation();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
overflow: hidden;
width: 300px;
height: 300px;
margin: 100px auto;
background-color: pink;
text-align: center;
}
.son {
width: 200px;
height: 200px;
margin: 50px;
background-color: purple;
line-height: 200px;
color: #fff;
}
</style>
</head>
<body>
<div class="father">
<div class="son">son盒子</div>
</div>
<script>
//阻止冒泡 dom推荐的标准
var son = document.querySelector('.son');
son.addEventListener('click',function(e){
alert('son');
e.stopPropagation();//stop 停止 Propagation 传播
e.canaleBubble = true;//非标准 cancle 取消 bubble 传播
},false);
var father = document.querySelector('.father');
father.addEventListener('click',function(){
alert('father');
},false);
document.addEventListener('click',function(){
alert('document');
})
</script>
</body>
</html>
1.4.5、阻止事件冒泡的兼容性解决方案
1.1.6、事件委派
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>哈哈哈哈哈哈哈哈</li></li></li>
<li>哈哈哈哈哈哈哈哈</li>
<li>哈哈哈哈哈哈哈哈</li>
<li>哈哈哈哈哈哈哈哈</li>
<li>哈哈哈哈哈哈哈哈</li>
</ul>
<script>
// 事件委托的核心原理:给父节点添加侦听器 ,利用事件冒泡影响每一个子节点
var ul = document.querySelector('ul');
ul.addEventListener('click',function(e){
// alert('哈哈哈哈哈哈哈哈');
// e.target这个可以得到我们点击的对象
e.target.style.backgroundColor = 'pink';
})
</script>
</body>
</html>