BOM基础
来源:互联网 发布:linux c gcc安装 编辑:程序博客网 时间:2024/06/07 02:52
BOM:Browser Object Model 浏览器对象模型
方法:大部分方法都是window下的
open(页面的地址URL,打开的方式)方法,打开一个新的窗口(页面)
--如果url为空,则默认打开一个空白页面
--如果打开方式为空,默认为新的窗口方式打开
返回值:返回新打开的窗口的window对象
close()方法:关闭窗口
1.ff:默认无法关闭
2.chrome:默认直接关闭
3.ie:询问用户
//ps:可以关闭在本窗口中通过js方法打开的新窗口
常用属性:
浏览器属性:window.navingator.userAgent
地址信息:window.location
窗口尺寸与大小:
可视区尺寸:document.doxumentElement.clientWidth宽 可视区+文档+宽
( 普通元素的宽:oDiv.clientWidth)
document.documentElement,clientHeight高
滚动距离:document.body.scrollTop//document.body.scrollLeft(chrome) --可视区顶部到页面顶部的距离
document.documentElement.scrollTop//document.documentElement.scrollLeft(其他浏览器)
-->使用技巧:var scrollTop=document.body.scrollTop||document.documentElement.scrollTop
内容高度:document.body.socrllHegiht
文档高度:document.documentElement.offsetHeight || document.body.offsetHeight --推荐使用
事件:
onscroll:当滚动条滚动的时候触发
onresize:当窗口大小发生变化的时候触发
--ps:window.onresize=functuon(){}
事件详解:
焦点:使浏览器能够区分用户输入的对象,当一个元素有焦点的时候,那么他就可以接收用户的输入;设置方式:1.点击;2.tab;3.js --能够响应用户的元素才有焦点(input a 表单)
焦点事件:获取焦点事件onfocus /失去焦点事件 onblur
案例:获取焦点,里面文字清空
oText.focus():给指定元素设置焦点
obj.blur:取消指定元素的焦点
obj.select():选择指定元素里面的文本内容
事件:Event对象:用来获取事件的详细信息,鼠标文字,键盘按键
Event对象兼容:ev=ev||window.event
Event对象下的获取鼠标位置:ev.clientX // ev.clientY
案例:方块跟着鼠标移动
--onmousemove:当鼠标在一个元素上移动时触发
触发频率不是像素,而是间隔时间,在一个指定时间内,如果鼠标的位置和上一次位置发生了变化,那么就会触发一次
event:事假对象,当一个事件发生的时候,和当前这个对象发生的这个事件有关的一些详细信息都会被临时保存到一个指定地方--event对象,供我们在需要的时候调用
--事件对象必须在一个事件调用的函数里面使用才有内容
事件函数:事件调用的函数,一个函数是不是事件函数,不在定义的时候决定,而是取决于事件调用的时候;
兼容性:
ie/chrome:event是一个内置全局对象
ff标准下:事件对象是通过事件函数的第一个参数传入
-->事件对象?如果一个函数是被事件调用的,那么,这个函数定义的第一个参数就是事件对象,clientX:当一个事件发生的时候,鼠标到页面可视区的距离
事件流:
事件冒泡:当一个元素接收到事件以后,会把他接收到的所有传播给他的父级
冒泡机制:从下往上进行事件触发
取消冒泡:ev.cancelBubble=true
事件捕获:事件绑定的第二种形式 --建议使用
ie:obj.attachEvent(事件名称,事件函数);
1.没有捕获 2.事件名称有on 3.事件函数执行顺序:标准ie ->正序 非标准ie->倒叙
4.this指向window --> 使用call()进行重定向 fn1()=fni.call()
ps:document.attachEvent("onclick",function(){
fn1.call(document);
})
标准:obj.addEventListenter(事件名称,事件函数,是否捕获);
1.有捕获 2.事件名称中没有on 3.事件函数执行顺序为正序
4.this指向obj,触发事件的对象
ps:document.addEventListenter('click',fn1,false);
是否捕获:默认false false:冒泡 true:捕获
call()-->call方法第一个参数可以改变函数执行过程中的内部this的指向,
call方法的第二个参数开始就是原来函数的参数列表
ps:fn1();//window fn1.call();//调用函数 fn1()==fn1.call()
事件封装:
事件捕获:
false:从下往上
true:从上往下
第二种事件绑定形式的取消:
ie:obj.detachEvent(事件名称,事件函数)
标准:obj.removeEventListenter(事件名称,事件函数,是否捕获)
封装函数:
键盘事件:onkeydown:当键盘按下的事件触发
onkeyup:当键盘抬起的时候触发
其他:altKry,ctrlKey,shitfKey 布尔值 -->当一个事件发生的时候,如果ctrl || shitf || alt 是按下状态,返回true,否则返回false
案例:
阻止默认事件:return false;
右键菜单事件:oncontextmenu -->环境菜单
阻止:document.oncontextmenu=function(){return false;}
案例:自定义右击菜单:
onmousedown:选择元素
onmousemove:移动元素
onmouseup:释放元素
拖拽时的问题:拖拽的时候,如果有文字被选择,会产生问题;
原因:当鼠标按下的时候,如果页面中有文字被选中,那么会触发浏览器默认拖拽文字的效果
标准下:阻止默认事件
-->在obj.onmousedown=function(){return false;}
-->在非标准ie时:
if(obj.setCpture){
oDiv.setCapture();
}
-设置全局捕获:obj.setCapture(); //释放全局捕获replaceCapture();
-->当我们给一个元素设置全局捕获以后,那么这个元素就会监听后续发生的所有事件,当有事件发生的时候,就会被当前设置了全局捕获的元素所触发
ie:有,并且有效果
ff:有,丹是没有效果
chrome:没有效果
拖拽事件,案例:现在范围以及磁性吸附:
碰撞检测:
分析:九宫格式:
案例:自定义滚动条:
鼠标滚轮事件:onmousewheel
标准chrome/ie:obj.onmousewheel=fn1;
上下滚动判断:event.wheelDelta 上:120;下:-120
ff:DOMMouseScrol:必须用addEventListener
上下滚动:event.detail 上:-3;下:3
使用之前先进行判断:
obj.onmousewheel=fn;
if(obj.addEventListener){
obj.addEventListener('DOMMouseScrol',fn1,false)
}
阻止默认事件:return false 阻止的是 obj.on事件名称=fn所触发的默认行为
addEventListener绑定事件所触发的默认事件需要用event下的preventDefault();
案例:滚轮事件
小数据存储 cookie:当用户访问了某个网站(网页)的时候,我们就可以通过cookie来向访问者电脑上存储数据:
封装:
设置:
移除:
- BOM基础
- bom基础
- BOM基础
- BOM基础
- javascript中BOM基础
- js基础 及BOM
- JavaScript基础--BOM
- BOM&DOM基础
- JavaScript基础-BOM&DOM
- javascript基础之BOM
- 【JavaScript】BOM基础总结
- BOM模型基础
- BOM模型基础
- BOM基础一
- BOM基础二
- BOM基础三
- js基础-BOM
- 02 js基础 BOM
- 校验码:奇偶校验,汉明码,CRC循环冗余校验码
- 关于创建maven webapp项目无法修改web版本问题
- nginx https配置后无法访问,解决方法。
- 页面加载中效果实现
- 自定义view (二) view自己绘制
- BOM基础
- linx学习路线
- 前端面试一
- iOS 8.0 以下坐标系统
- 鼠标滑过显示图片
- 第一个erlang程序
- Erlang中的fun函数使用详解
- VSFTP配置参数详解
- (二)centos 常用命令和安装