BOM 常用对象（二）

回复

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

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

x

1. BOM常用对象：

1.history: 当前窗口的历史记录栈

保存了当前窗口本次打开后的url记录

一个方法：history.go(n)

history.go(-1): 后退

history.go(1):前进

history.go(0):刷新

history.go(-2): 后退两步

2. location：当前窗口正在访问的url地址对象

修改当前窗口的url地址：只要修改，立刻跳转

location="url"

location.href="url";

location.assign("url");

location.reload(true/false): 重新加载页面：

true：无论页面请求后是否被更改都重新向服务器请求新页面

false：只有页面请求后被修改过，才重新请求服务器。

如果未改变，就直接从缓存中获取。

3. event事件：浏览器自动触发的或用户手动触发的元素状态的改变

事件处理函数：当事件发生时，自动调用的函数

事件处理函数其实是对象的一个特殊属性，只能引用函数对象

写法: on事件名

如何绑定事件处理函数：

1. 在html元素开始标签中绑定：

比如:html: <button>

其实：button.onclick=function(){//this-->button

eval("fun(this)");

}

js: fun(btn){ //this-->window btn-->button }

当事件发生时：button.onclick()

扩展：所有回调函数：事件处理函数和定时器都可以传入字符串的js语句作为参数。

但是强烈建议：自己使用匿名函数封装要执行的js语句

2. js中动态绑定事件处理函数：2种做法：

1. 一个事件处理函数只能绑定一个函数对象：

elem.on事件名=function(){}

事件触发时：elem.on事件名()

问题：2个：

1. 一个事件处理函数，只能绑定一个函数对象

2. 无法修改事件的触发顺序

事件周期：从事件触发到各级事件执行完的全过程

DOM标准：3个阶段

1. 事件捕获：从window开始，由外向内，到目标元素结束

记录每层元素的事件处理函数

2. 目标触发：触发目标元素的事件处理函数

3. 冒泡触发：由内向外，从目标元素的上级开始，到window结束

IE8：2个阶段

1. 目标触发：

2. 冒泡触发：

其中：目标元素：最初实际触发事件的元素

2. js中动态绑定，可为一个事件处理函数绑定多个函数对象

还可控制事件触发的顺序

DOM标准：

elem.addEventListener("事件名",函数对象,true/false);

其中：1. 事件名不带on

2. 可反复为统一事件绑定多个函数对象

3. 最后一个参数表示：是否在捕获阶段就提前触发

默认为false，不会提前触发

改为true，在捕获阶段提前触发

IE8：elem.attachEvent("on事件名",函数对象)

例如:冒泡触发

<!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设置为高亮
//this-->当前div
this.style.backgroundColor="yellow";
alert("this is "+this.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>

复制代码

点击中间红色格后，以此触发蓝格和绿格:

[代码片段] BOM 常用对象（二）

[代码片段] BOM 常用对象（二）

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

阅读推荐

用微信扫一扫