BOM 常用对象

回复

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

获取事件对象：

什么是事件对象：事件触发时自动创建，封装了事件发生的元素和属性信息。

1. html中绑定的事件处理函数：

html中：<elem on事件名="fun(event)"

js中：function fun(e){//e-->event对象

}

优点：没有浏览器兼容性问题

2. js中动态绑定事件时：

DOM标准：事件对象会自动作为处理函数的第一个参数默认传入

js中：elem.onclick=function(){//arguments[0]-->event

}

事件触发时：elem.onclick()

IE8：event属性保存在window全局下

事件触发时：全局window下的event属性自动获得事件对象

兼容写法：var e=window.event||arguments[0];

//IE8 DOM

强调：不支持以html绑定的事件处理函数。

何时获得：只要希望获取事件的属性和触发事件的元素时，都要先获得事件对象，再从事件对象中读取需要的属性

this的问题：随冒泡不断变化！事件在哪个对象上触发，this就指代哪个对象。

获取目标对象:始终指代最初触发事件的目标对象。

不随冒泡而改变

如何获得目标对象：

DOM标准：e.target

IE8: e.srcElement

兼容：var target=e.srcElement||e.target;

例如:

<!DOCTYPE HTML>
<html>
<head>
<title>事件处理</title>
<meta charset="utf-8"/>
<style>
.d1 .d2 .d3{cursor:pointer}
.d1 {
background-color: green;
position: relative;
width: 150px;
height: 150px;
text-align: center;
cursor: pointer;
}
.d2 {
background-color: blue;
position: absolute;
top: 25px;
left: 25px;
width: 100px;
height: 100px;
}
.d3 {
background-color: red;
position: absolute;
top: 25px;
left: 25px;
width: 50px;
height: 50px;
line-height: 50px;
}
</style>
<script>
/*1. 体验事件冒泡*/
function highLight(){//将当前div设置为高亮
//获得事件对象
var e=window.event||arguments[0];
var target=e.srcElement||e.target;
//this-->当前div
this.style.backgroundColor="yellow";
alert("target is "+target.className);
this.style.backgroundColor="";
}
window.onload=function(){
//找到所有div,保存在变量divs中
var divs=
document.getElementsByTagName("div");
divs[0].addEventListener("click",highLight,false);
divs[1].addEventListener("click",highLight,false);
divs[2].addEventListener("click",highLight,false);
}
</script>
</head>
<body>
<div class="d1">
<div class="d2">
<div class="d3">
</div>
</div>
</div>
</body>
</html>

复制代码

点击红色格,虽然会依次触发蓝格和绿格,但是目标元素没有改变:

利用冒泡：

优化：如果多个子元素定义了相同的事件处理函数

建议仅在父元素定义一次事件处理函数，所有子元素共用！

为什么这样：每个事件绑定，在底层都是一个事件的链接对象

绑定事件越多，链接对象消耗资源越大

所以，尽量减少事件绑定的次数

核心：获取目标对象

取消和利用冒泡：

取消冒泡：

DOM标准：e.stopPropagation();

IE8: e.cancelBubble=true;

兼容：if(e.stopPropagation){//DOM

e.stopPropagation();

}else{//IE8

e.cancelBubble=true;

}

例如:取消冒泡

<!DOCTYPE HTML>
<html>
<head>
<title>事件处理</title>
<meta charset="utf-8"/>
<style>
.d1 .d2 .d3{cursor:pointer}
.d1 {
background-color: green;
position: relative;
width: 150px;
height: 150px;
text-align: center;
cursor: pointer;
}
.d2 {
background-color: blue;
position: absolute;
top: 25px;
left: 25px;
width: 100px;
height: 100px;
}
.d3 {
background-color: red;
position: absolute;
top: 25px;
left: 25px;
width: 50px;
height: 50px;
line-height: 50px;
}
</style>
<script>
/*1. 体验事件冒泡*/
function highLight(){//将当前div设置为高亮
//或去事件对象
var e=window.event||argunments[0];
//this-->当前div
this.style.backgroundColor="yellow";
alert("this is "+this.className);
this.style.backgroundColor="";
//取消冒泡
if(e.stopPropagation){//DOM
e.stopPropagation();
}else{//IE8
e.cancelBubble=true;
}
}
window.onload=function(){
//找到所有div,保存在变量divs中
var divs=
document.getElementsByTagName("div");
divs[0].addEventListener("click",highLight,false);
divs[1].addEventListener("click",highLight,false);
divs[2].addEventListener("click",highLight,false);
}
</script>
</head>
<body>
<div class="d1">
<div class="d2">
<div class="d3">
</div>
</div>
</div>
</body>
</html>页面效果与上一样,只是点击中间红格后,不再继续触发事件。取消事件：2种情况： 1. 在html中绑定事件处理函数：2个return 2. js中动态绑定事件处理函数： DOM标准：e.preventDefault() IE8: e.returnValue=false 兼容：if(e.preventDefault){ e.preventDefault() }else{ e.returnValue=false } 建议：尽量使用js动态绑定事件处理函数事件发生时的鼠标位置： 1. 相对于屏幕左上角：e.screenX/screenY 2. 相对于文档显示区左上角：e.clientX||e.x e.clientY||e.y 3. 相对于父元素左上角：e.offsetX/e.offsetY 事件nscroll:当浏览器滚动条发生移动时自动触发如何获得页面滚动的总距离: var scrollTop=document.documentElement.scrollTop ||document.body.scrollTop 如何让获得任意元素距窗口顶部的距离: 获得任意元素距网页顶部的距离:
function getElementTop(element){
//获得当前元素距父元素顶部的距离
var top=element.offsetTop;
//将当前元素的相对定位父元素对象保存在变量curr中
var curr=element.offsetParent;
//循环,只要curr不等于null,就继续获得父元素的父元素
while(curr!=null){
// 再次获得curr距它父元素顶部的距离,累加到top中
top+=curr.offsetTop;
// 将curr再设置为curr的相对定位的父元素
curr=curr.offsetParent;
}
return top;
}