事件对象的获取
元素对象绑定事件时,在函数的小括号()里面写 e 或者 event evt,事件对象里面包含了改事件的各种信息:事件类型、触发事件元素、触发事件时鼠标位置等等、、、
eg:
ul.onclick = function(e) {
console.log(e);
}
控制台打印结果:
注意:
- 事件对象是先有事件,然后写e获得事件对象,
- 不用传参,javascript本身定义好了e
- ie9以下不能识别e,需用 window.event 获取事件对象,兼容性可以用:e = e || window.event;
e.target 和 this 的区别
e.target- - -触发事件的元素
this- - -绑定事件的元素
兼容性:
e.target在ie9以下不能识别,ie9以下用e.srcElement;
e.currentTarget 相当于 this,但是ie9以下不能识别currentTarget ,this无兼容性问题
有时,触发事件的元素 和 绑定事件的元素 不一样,例如:父元素绑定了事件,子元素没有绑定事件,点击了子元素,根据时间事件冒泡,执行了父元素绑定的事件,此时,触发事件的元素 和 绑定事件的元素就不一样
事件对象常用属性和方法
阻止默认事件:e.preventDefault();
ie9以下不能识别preventDefault()方法,使用属性- - -e.returnValue;(这个属性ie9以上也不能识别)
还有一种方法:return false;这个没有兼容性,但是后面的代码不执行了,且只限于传统的事件注册方式
例如:点击链接,不跳转;点击按钮不提交、、、
示例:
<!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>阻止默认行为</title>
</head>
<body>
<a href="https://www.baidu.com/">百度一下你就知道</a>
<script>
var a = document.querySelector('a');
a.onclick = function(e) {
e.preventDefault();
}
</script>
</body>
</html>
阻止事件冒泡:e.stopPropagation()
ie9以下不能识别stopPropagation()方法,需使用属性:e.cancelBubble = true;