定义 :当注册一个事件的时候,系统会生成一个对象来记录事件触发时的一些信息,比如鼠标坐标,按键信息
document.querySelector('#box').onclick = function(e) {
//IE8不需要传递参数,直接用window.event获取
//最新的谷歌和火狐也支持window.event
var e = e || window.event;
console.log(event);
}
e.offsetX/e.offsetY:距离当前元素边框的距离
e.clientX/e.clientY:距离浏览器边框的可视距离
e.pageX/e.pageY:距离浏览器边框的距离(加上被滚动条隐藏的距离)
e.screenX/e.screenY:距离屏幕边框的距离
这个元素就是最内层的元素
标准浏览器 e.target
IE8浏览器 e.srcElement (最新的标准浏览器也支持这个)
//兼容写法
document.querySelector('#box').onclick = function(e) {
//IE8不需要传递参数,直接用window.event获取
var e = e || window.event;
var target = e.target || e.srcElement;
}
标准浏览器 e.preventDefault();
IE8浏览器 e.returnValue = false; (最新的谷歌火狐浏览器也支持这个,IE8以上不支持,奇葩)
<body>
<a href="http://www.baidu.com/">百度一下</a>
</body>
<script>
window.onload = function(){
var a = document.querySelector('a');
a.onclick = function(e){
e = e || window.event
if (e.preventDefault) {
//iE8没有这个属性,有这个属性的都是更高级的浏览器
e.preventDefault();//阻止默认
} else {
//IE8
e.returnValue = false;//阻止默认
}
}
}
</script>
标准浏览器 e.stopPropagation()
IE8浏览器 e.cancelBubble=true; (最新的标准浏览器也支持这个)
<body>
<div>
<p>我是p标签</p>
</div>
</body>
<script>
window.onload = function(){
var div = document.querySelector('div')
div.onclick=function(){
console.log('点击了div标签')
}
var p = document.querySelector('p')
p.onclick = function(e){
console.log('点击了p标签')
e = e || window.event
// 通过e.preventDefault来判断是否是高级的浏览器
if (e.preventDefault) {
e.stopPropagation(); //阻止冒泡
} else {
//IE8
e.cancelBubble = true; //阻止冒泡
}
}
}
</script>
return false可以阻止默认事件,但不能阻止冒泡
<body>
<div>
<a href="http://www.baidu.com/">百度一下</a>
</div>
</body>
<script>
window.onload = function(){
var div = document.querySelector('div')
div.onclick=function(){
console.log('点击了div')
}
var a = document.querySelector('a')
a.onclick = function(e){
return false
}
}
</script>
点击 "百度一下" ,页面不会跳转,说明默认行为被终止了。但是控制台还是会打印 "点击了div" 说明不能阻止冒泡
注意:如果是用addEventListener添加事件监听,不能使用return false来阻止默认事件。要用e.preventDefault()
var a = document.querySelector('a')
a.addEventListener('click',function(e){
e = e || window.event
return false // 不能阻止a链接跳转
})
var a = document.querySelector('a')
a.addEventListener('click',function(e){
e = e || window.event
e.preventDefault()
})
html中的事件对象触发的函数包含一个event参数,可通过event直接访问事件对象
<button onclick="func(event)" id="btn">点我</button>
function func(event){
console.log(event.target);
}
原文:https://www.cnblogs.com/OrochiZ-/p/11585851.html