Web APIs---7. DOM事件高级(2)
4 事件对象
4.1 什么是事件对象
- 理解：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event,它有很多属性和方法。
- 事件对象是我们事件的一系列相关数据的集合和事件有关，比如：鼠标点击就包含了鼠标的相关信息(鼠标坐标等)；键盘事件就包含键盘事件信息(判断用户按下了哪个键等)
4.2 事件对象的使用语法
- 这个event是一个事件对象，当中形参来看。
- 事件对象只有有了事件才会存在，它是系统帮我们设定为事件对象，不需要传递实参过去。
- 这个事件对象可以自己命名，比如event、e、evt
- 当我们注册事件时，event就会被系统自带创建，并依次传递给事件监听器（事件处理函数）。
传统的绑定事件写法中的事件对象
eventTarget.onclick = function(event){}//event就是事件对象，还喜欢写成e或者evt
事件监听注册事件中的事件对象
eventTarget.addEventListener('click',function(event){})//event就是事件对象，还喜欢写成e或者evt
4.3 事件对象的兼容性方案
事件对象本身的获取存在兼容性问题：
- 标准浏览器中是浏览器给方法传递的参数，只需要定义形参e就可以获取到
- 在ie678中，浏览器不会给方法传递参数，如果需要的话，需要window.event中获取查找
- 解决：
e = e||window.event
举例
- 传统方法
<body>
<div>123</div>
<script>
//事件对象
var div = document.querySelector('div');
div.onclick = function(event) {
console.log(event);//鼠标以点击立马打印：MouseEvent {isTrusted: true, screenX: 54, screenY: 157, clientX: 54, clientY: 86, …}
}
</script>
</body>
- addEventListener方法
<body>
<div>123</div>
<script>
//事件对象
var div = document.querySelector('div');
//传统方法
// div.onclick = function(event) {
// console.log(event);//鼠标以点击立马打印：MouseEvent {isTrusted: true, screenX: 54, screenY: 157, clientX: 54, clientY: 86, …}
// }
//addEventListener方法
div.addEventListener('click', function(event) {
console.log(event);
})
</script>
</body>
- 在ie678浏览器中打开
<body>
<div>123</div>
<script>
//事件对象
var div = document.querySelector('div');
//传统方法
div.onclick = function(event) {
console.log(event); //undefined ie678不认识这种写法
console.log(window.event);////ie678认识这种写法 鼠标以点击立马打印：MouseEvent {isTrusted: true, screenX: 54, screenY: 157, clientX: 54, clientY: 86, …}
}
//addEventListener方法
// div.addEventListener('click', function(e) {
// console.log(e);
// })
</script>
</body>
- 兼容性的写法
<body>
<div>123</div>
<script>
//事件对象
var div = document.querySelector('div');
//传统方法
div.onclick = function(e) {
//兼容性写法
e = e || window.event;
console.logs(e);
}
//addEventListener方法 ie678不识别该方法
// div.addEventListener('click', function(e) {
// console.log(e);
// })s
</script>
</body>
4.4 事件对象的常见属性和方法
e.target返回的是触发事件对象(元素)
<body>
<div>123</div>
<ul>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
<script>
//1. e.target返回的是触发事件对象(元素) 而this返沪是的绑定事件的对象(元素)
//区别：e.target是点击了哪个元素，就返回哪个元素；this是哪个元素绑定了这个点击事件，那么就返回谁
var div = document.querySelector('div');
div.addEventListener('click', function(e) {
console.log(e.target); //<div>123</div>
console.log(this); //<div>123</div>
});
var ul = document.querySelector('ul');
ul.addEventListener('click', function(e) {
//为ul绑定了事件 那么this就指向this
console.log(this); //<ul>...</ul>
//e.target指向的是我们点击的那个对象 谁触发了这个事件
console.log(e.target); //<li>abc</li>
});
</script>
</body>
- 了解1：e.target也存在ie567的兼容性问题
<body>
<div>123</div>
<ul>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
<script>
//ie678的兼容性写法
div.onclick = function(e) {
e = e || window.event;
var target = e.target || e.srcElement;
console.log(target);
}
</script>
</body>
- 了解2：e.currentTarget是一个与this非常相似的属性，但是ie678不认识
<body>
<div>123</div>
<ul>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
<script>
//1. e.target返回的是触发事件对象(元素) 而this返沪是的绑定事件的对象(元素)
//区别：e.target是点击了哪个元素，就返回哪个元素；this是哪个元素绑定了这个点击事件，那么就返回谁
var div = document.querySelector('div');
div.addEventListener('click', function(e) {
console.log(e.target); //<div>123</div>
console.log(this); //<div>123</div>
console.log(e.currentTarget);//<div>123</div>
});
</script>
</body>
e.type返回的是事件类型，比如click、mouseover等，不带on
<body>
<div>123</div>
<a href="http://www.baidu.com">百度</a>
<form action="http://www.baidu.com">
<input type="submit" value="提交" name="sub">
</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);
//点击div后打印：click
//鼠标经过div后打印：mouseover
//鼠标离开div后打印：mouseout
}
</script>
</body>
e.preventDefault()阻止默认行为(事件)
<body>
<div>123</div>
<a href="http://www.baidu.com">百度</a>
<form action="http://www.baidu.com">
<input type="submit" value="提交" name="sub">
</form>
<script>
//2. 阻止默认行为(事件) 让链接不跳转 或者让提交按钮不提交
var a = document.querySelector('a');
a.addEventListener('click', function(e) {
e.preventDefault(); //dom标准写法，ie低版本浏览器不支持
})
//3. 传统注册方式
a.onclick = function(e) {
//普通浏览器e.preventDefault();方法
e.preventDefault();
//低版本浏览器ie678 returnValue 属性
e.returnValue
//可以利用return false也能阻止默认行为 没有兼容性问题
return false;//该方法有一个特点，就是return后面的代码不执行，而且只限于传统的注册方式
}
</script>
</body>
