DOM Unit05- BOM对象：Navigatior、History以及事件处理函数
2015-12-27 19:51
239 查看
回顾：
1. 定时器：
何时使用周期性：动画是连续的，且不会频繁停止
何时使用一次性：动画需要频繁停止
正课：
1. BOM常用对象：navigator history location
*事件：
cookie：
BOM常用对象：window history navigator location screen event
navigator：保存浏览器软件属性和配置的对象
判断cookie：cookieEnabled 启用了，返回true；否则返回false
cookie：在客户端硬盘持久存储某个网站当前用户个人信息的文件
访问网站时，由网站或客户端浏览器创建，都保存在客户端硬盘
请求该网站时，随request一起自动发到服务器
服务器接到cookie，取出其中的值进行验证
一个网站创建的cookie，只能访问自己网站时使用
优点：持久存储个人数据，提高用户体验。
缺点：泄露个人信息。
例如：document.write(navigator.userAgent); 在Chrome浏览器输出：
Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.80 Safari/537.36
正课：
1. BOM常用对象：history location
2. *事件
3. cookie
BOM常用对象：
history: 当前窗口的历史记录栈
保存了当前窗口本次打开后的url记录
一个方法：history.go(n)
history.go(-1): 后退
history.go(1):前进
history.go(0):刷新
history.go(-2): 后退两步
location：当前窗口正在访问的url地址对象
修改当前窗口的url地址：只要修改，立刻跳转
location=”url”
location.href=”url”;
location.assign(“url”);
true：无论页面请求后是否被更改都重新向服务器请求新页面
false：只有页面请求后被修改过，才重新请求服务器。
如果未改变，就直接从缓存中获取。
*事件：浏览器自动触发的或用户手动出发的元素状态的改变
DOM Level2 Event标准：
IE8自成体系
事件处理函数：当事件发生时，自动调用的函数
事件处理函数其实是对象的一个特殊属性，只能引用函数对象
其实: on事件名
如何绑定事件处理函数：3种：
1. 在html元素开始标签中绑定：
扩展：所有回调函数：事件处理函数和定时器都可以传入字符串的js语句作为参数。
但是强烈建议：自己使用匿名函数封装要执行的js语句
**2. js中动态绑定事件处理函数：**2种做法：
1. 一个事件处理函数只能绑定一个函数对象：
elem.on事件名=function(){
this–>elem
}
事件触发时：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事件名”,函数对象)
2. js中动态绑定事件时：
DOM标准：事件对象会自动作为处理函数的第一个参数默认传入
js中：elem.onclick=function(){
arguments[0]–>event
}
事件触发时：elem.onclick()
IE8：event属性保存在window全局下
事件触发时：全局window下的event属性自动获得事件对象
取消和利用冒泡：
取消冒泡：
DOM标准：e.stopPropagation();
IE8: e.cancelBubble=true;
兼容：if(e.stopPropagation){//DOM
e.stopPropagation();
}else{//IE8
e.cancelBubble=true;
}
this的问题：随冒泡不断变化！事件在哪个对象上触发，this就指代哪个对象。
解决：获取目标对象，始终指代最初触发事件的目标对象。
不随冒泡而改变
如何获得目标对象：
DOM标准：e.target
IE8: e.srcElement
兼容：var target=e.srcElement||e.target;
1. 定时器：
何时使用周期性：动画是连续的，且不会频繁停止
何时使用一次性：动画需要频繁停止
注意： call apply：调用时临时修改原函数的this，不创建新函数，且调用后this恢复为window。 bind：基于现有函数，复制一个新函数副本，提前为新函数永久绑定this引用的对象。
正课：
1. BOM常用对象：navigator history location
*事件：
cookie：
BOM常用对象：window history navigator location screen event
navigator：保存浏览器软件属性和配置的对象
判断cookie：cookieEnabled 启用了，返回true；否则返回false
cookie：在客户端硬盘持久存储某个网站当前用户个人信息的文件
访问网站时，由网站或客户端浏览器创建，都保存在客户端硬盘
请求该网站时，随request一起自动发到服务器
服务器接到cookie，取出其中的值进行验证
一个网站创建的cookie，只能访问自己网站时使用
优点：持久存储个人数据，提高用户体验。
缺点：泄露个人信息。
判断/查找插件：plugins，返回所有插件对象的集合 判断是否包含：遍历插件集合，判断每个插件的name属性 userAgent：获得浏览器基本信息(名称，版本)的字符串
例如：document.write(navigator.userAgent); 在Chrome浏览器输出：
Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.80 Safari/537.36
判断浏览器类型和版本：
<!DOCTYPE HTML>
<html>
<head>
<title>navigator对象常用属性</title>
<meta charset="utf-8" />
<script>
if(navigator.cookieEnabled){
document.write("cookie已启用，请妥善保存个人信息");
}else{
document.write("已禁用cookie，保存密码功能无法使用");
}
document.write("<br>");
//判断是否包含QQMusic插件
var has=false;
for(var i=0;i<navigator.plugins.length;i++){
if(navigator.plugins[i].name=="QQMusic"){
has=true;
}
}
document.write(has?"支持QQMusic":"未安装QQMusic插件");
document.write("<br>");
document.write(navigator.userAgent);
document.write("<br>");
var agent=navigator.userAgent;
var browser="unknown";
if(agent.indexOf("MSIE")!=-1){
browser="IE";
}else if(agent.indexOf("Firefox")!=-1){
browser="Firefox";
}else if(agent.indexOf("OPR")!=-1){
browser="Opera";
}else if(agent.indexOf("Chrome")!=-1){
browser="Chrome";
}else if(agent.indexOf("Safari")!=-1){
browser="Safari";
}else if(agent.indexOf("Trident")!=-1){
browser="IE10+";
}
document.write("你正在使用："+browser+" 浏览器");
if(browser=="Opera"){
var i=agent.indexOf("OPR")+3+1;
}else if(browser=="IE10+"){
var i=agent.indexOf("rv")+2+1;
}else{
var i=agent.indexOf(browser)+browser.length+1;
}
var version=parseFloat(agent.slice(i,i+3));
document.write("版本："+version);
</script>
</head>
<body>
</body>
</html>正课：
1. BOM常用对象：history location
2. *事件
3. cookie
BOM常用对象：
history: 当前窗口的历史记录栈
保存了当前窗口本次打开后的url记录
一个方法：history.go(n)
history.go(-1): 后退
history.go(1):前进
history.go(0):刷新
history.go(-2): 后退两步
location：当前窗口正在访问的url地址对象
修改当前窗口的url地址：只要修改，立刻跳转
location=”url”
location.href=”url”;
location.assign(“url”);
location.reload(true/false): 重新加载页面：
true：无论页面请求后是否被更改都重新向服务器请求新页面
false：只有页面请求后被修改过，才重新请求服务器。
如果未改变，就直接从缓存中获取。
*事件：浏览器自动触发的或用户手动出发的元素状态的改变
DOM Level2 Event标准：
IE8自成体系
事件处理函数：当事件发生时，自动调用的函数
事件处理函数其实是对象的一个特殊属性，只能引用函数对象
其实: on事件名
如何绑定事件处理函数：3种：
1. 在html元素开始标签中绑定：
<elem on事件名="js语句"......
比如:html: <button onclick="fun(this)"......
其实：button.onclick=function(){this-->button
eval("fun(this)"); ==>fun(button)
}
js: fun(btn){ this-->window btn-->button }
当事件发生时：button.onclick()扩展：所有回调函数：事件处理函数和定时器都可以传入字符串的js语句作为参数。
但是强烈建议：自己使用匿名函数封装要执行的js语句
**2. js中动态绑定事件处理函数：**2种做法：
1. 一个事件处理函数只能绑定一个函数对象：
elem.on事件名=function(){
this–>elem
}
事件触发时：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事件名”,函数对象)
获取事件对象：
什么是事件对象：事件触发时自动创建，封装了事件发生的元素和属性信息。
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绑定的事件处理函数。 何时获得：只要希望获取事件的属性和触发事件的元素时，都要先获得事件对象，再从事件对象中读取需要的属性
取消和利用冒泡：
取消冒泡：
DOM标准：e.stopPropagation();
IE8: e.cancelBubble=true;
兼容：if(e.stopPropagation){//DOM
e.stopPropagation();
}else{//IE8
e.cancelBubble=true;
}
利用冒泡： ***优化：如果多个子元素定义了相同的事件处理函数 建议仅在父元素定义一次事件处理函数，所有子元素共用！ 为什么：每个事件绑定，在底层都是一个事件的链接对象，绑定事件越多，链接对象消耗资源越大。所以，尽量减少事件绑定的次数 如何利用冒泡：核心：获取目标对象
this的问题：随冒泡不断变化！事件在哪个对象上触发，this就指代哪个对象。
解决：获取目标对象，始终指代最初触发事件的目标对象。
不随冒泡而改变
如何获得目标对象：
DOM标准：e.target
IE8: e.srcElement
兼容：var target=e.srcElement||e.target;
取消事件：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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 3dsmax2010 快捷键
- Linux常用的文件管理命令
- 什么是VoLTE？什么是4G+？
- 单片机: 简易计算器的实现（键盘）
- 王垠：《程序员的心理疾病》
- ORACLE——日期时间格式化参数详解
- vim visual block
- C#中字符串的处理
- C#委托
- 第一个AngularJS表达式实例
- class_create(),device_create自动创建设备文件结点
- 架构师于小波：魅族实时消息推送架构
- OpenStack-RPC-server的构建(四)
- C语言中assert的使用
- python3.4 Windows 安装配置pip
- LDAP-轻量目录访问协议
- 01.cocos2d-x制作弹出层（Layer）
- squid代理
- F5 LTM iControl REST APi Url 自动化，查看，增加，启停，Pool&Member&irule
- apache storm集群配置记录