码迷,mamicode.com
首页 > 其他好文 > 详细

Dom笔记(五)

时间:2017-05-24 15:55:38      阅读:233      评论:0      收藏:0      [点我收藏+]

标签:hash   elb   开发   退出   判断   版本号   ret   eval   zhang   

 

1. history:
什么是: 保存当前窗口打开后,成功访问过的url的历史记录栈。
特点: 内容不对开发人员开放,更无法修改
如何使用: 前进,后退,刷新
前进: history.go(1)
后退: history.go(-1)
刷新: history.go(0)

2. location:
什么是: 保存当前窗口正在打开的url的对象
何时使用:
1. 跳转: 只能实现在当前窗口打开
location.href="url";
location.assign("url");
location="url"
2. 重新加载当前页面:
location.reload(false/true);
参数: force 表示是否强制从服务器硬盘获取最新文档。
3. 在当前页面打开,禁止后退:
location.replace("url");
打开新url,并用新url替换history中当前旧url,实现禁止后退

属性: http://tmooc.cn:8080/orders/orderDetails/index.html?username=zhangdong&kw=大鱼
#top
location.protocol: 协议
.host: 主机名+端口号
.hostname: 主机名
.port: 端口
.pathname: 相对路径
.search: ?及其之后的查询字符串
.hash: #锚点名

3. navigator:
包含了所有浏览器的配置信息: 没有标准
1. 判断cookie是否启用:
navigator.cookieEnabled
2. 判断是否安装了指定插件(plugin)
navigator.plugins集合
3. 判断浏览器名称和版本号(只支持5大浏览器)
navigator.userAgent

 

event:

什么是:浏览器自动触发或用户手动触发的页面元素状态的改变。
比如: change click focus blur
事件处理函数:当事件发生时,自动触发执行的函数。
事件处理函数其实就是元素的一个特殊属性
属性的值是一个函数对象
比如: onchange onclick onfocus
elem.onclick=function(){...}
当事件发生时,自动执行: elem.onclick();

如何绑定事件处理函数: 3种:
1. 在html中绑定:
<elem onXXX="js语句"
<button onclick="fun(this)"
fun(obj){obj->btn this->window }
button.onclick=function(){
//this->btn
eval("fun(this)"); //obj->btn
}
问题: 1. 不符合内容和行为分离的原则
2. 其实不是真正的绑定,只是传入一条js语句而已。
2. 在js中动态绑定:
1. elem.onxxx=function(){
this->elem
}
问题: 1. 一个事件处理函数只能绑定一个函数对象。
2. 无法改变事件触发的顺序
2. DOM:
elem.addEventListener(
"事件名",fun,false/true
);
为elem元素的指定"事件",绑定fun
第三个参数: 设置是否在捕获阶段触发
优: 1. 为一个事件处理函数,绑定多个函数对象。当事件发生时,可同时执行多个任务。
2. 可以改变事件触发的顺序
vs IE8: elem.attachEvent(
"on事件名",fn
);//没有第三个参数

 

DOM事件模型:
3个阶段:
1. 捕获:由外向内,依次记录各级元素绑定的事件处理函数
捕获阶段只到目标元素截止
2. 目标触发: 默认实际触发事件的元素上的处理函数先执行。
目标元素: 实际触发事件的元素
3. 冒泡: 按照捕获阶段反向的顺序,依次执行各级父元素上的事件处理函数

vs IE8: 事件模型:2个阶段:目标触发,冒泡

event:事件对象:
当事件发生时,自动创建的,封装事件信息的对象。
如何获得: 发生事件时,自动调用事件处理函数。此时js会将事件对象默认作为事件处理函数的第一个参数,放入函数。——DOM
elem.addEventListener(
"事件名",function(e){
//e->event
});
vs IE8: 事件对象保存在全局变量event中
不作为第一个参数传入
兼容DOM和IE8:
e=e||window.event
如果e有效,就用e,否则用event

取消冒泡: 执行完当前元素的事件处理函数后,阻止冒泡向上执行。
e.stopPropagation();
vs IE8:
e.cancelBubble=true;

利用冒泡:
优化: 尽量减少事件监听的个数
办法: 如果多个子元素绑定相同的事件处理函数,则只需要将事件处理函数绑定在父元素一次即可!
问题: 如何获得目标元素:
this->会随冒泡而改变
解决:e.target 始终保持目标元素
vs IE8: target=e.target||e.srcElement
DOM IE8

取消事件:在事件执行过程中,如果出现问题,可阻止事件继续执行。
更多是取消默认行为!
如何取消:
e.preventDefault();
vs return :
preventDefault阻止后续默认行为
不是停止当前函数执行
放前放后,对当前函数无影响
return: 退出当前函数执行
但不阻止默认行为的执行

事件坐标:
1. 相对于屏幕左上角:
e.screenX/Y
2. 相对于文档显示区左上角:
e.clientX/Y
兼容性问题: e.x/y
3. 相对于所在的父元素左上角:
e.offsetX/Y

 

Dom笔记(五)

标签:hash   elb   开发   退出   判断   版本号   ret   eval   zhang   

原文地址:http://www.cnblogs.com/zhangqian1/p/6898953.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!