BOM
Browser Object Model
定义了浏览器的接口
BOM对象:Window,History,Navigator,Screen,Location
属性
滚动条滚动距离
pageXOffset / pageYOffset
求滚动条滚动距离,返回 number 类型的数值,单位是像素
- pageXOffset --> 横向
- pageYOffset --> 纵向
兼容性:IE9以下不兼容
- document.body/documentElement.scorllLeft --> 求横向滚动条滚动距离
- document.body/documentElement.scorllTop --> 纵向
有兼容性混乱,不同浏览器可用的方法不同,但只会有一种方法有值,另一个值为0,处理兼容性的话让这两种值相加即可。
document.body.scrollLeft + document.documentElement.scrollLeft;
document.body.scrollTop + document.documentElement.scrollTop;
查看视口的尺寸
innerWidth / innerHeight
获取试图窗口的尺寸
兼容性:IE9以下不兼容
浏览器标准模式下使用:
-
document.documentElement.clientWidth
-
document.documentElement.clientHeight
怪异模式下使用:
- document.body.clientWidth
- document.body.clientHeight
查看元素几何尺寸
获得关于这个元素的 尺寸、位置 信息
getBoundingClientRect();
- 兼容性很好
- 所有元素节点都有此方法
- left 和 top 表示该元素左上角的 X 和 Y 坐标,right 和 bottom 表示该元素右下角的 X 和 Y 坐标
- 返回的结果并不是实时的
- width 和 height 老版本 IE 不兼容
- 使用并不多
offsetWidth / offsetHeight
查看元素的尺寸(视觉尺寸:包含 padding, border)
offsetLeft / offsetTop
查看元素的位置(距离他有定位的父级的距离)
offsetParent
返回最近的有定位的父级,若没有,则返回 body
让滚动条滚动
scroll(),scrollTo() / scrollBy()
scroll(x, y)
& scrollTo(x, y)
没有任何区别:使滚动条滚到指定位置
scrollBy(x, y)
累加滚动距离,有正负,多次调用多次执行
浏览器编译模式
标准模式
html页面顶部添加下面一行开启
<!DOCTYPE html>
怪异模式
兼容之前的几个版本,向后兼容
判断方式
document.compatMode
属性,返回值:
-
CSS1Compat
:标准模式 -
BackCompat
:怪异模式
事件
绑定事件方法
-
ele.onxxx = function (event) {}
- 兼容性很好,但同一个事件上只能绑定一个处理函数
- 基本等同于写在 HTML 行间
-
行间写,不需要写 function
<div onclick="console.log('a');"></div>
-
obj.addEventListener(type, fn, false);
- (事件类型, 事件处理函数, false)
- IE9 以下不兼容
- 可以为一个事件绑定多个处理程序
- 绑定事件时,若在循环中,注意闭包问题
- false:冒泡模型;true:捕获模型
-
obj.attachEvent(onxxx, fn);
- IE 独有
事件对象,在函数的括号中写入 e 或者 event,记载了事件发生时的一些列数据和信息
运行环境
-
前三种方法进行事件绑定后 this 指向的是绑定的元素本身
-
attachEvent 绑定事件后,this 指向的是 window
解决:
var div = document.getElementByTagName('div')[0]; div.attachEvent('onclick', function () { handle.call(div); }); function handle() { // 事件处理程序 this. ... }
兼容性解决
function addEvent(elem, type, handle) {
if (elem.addEventListener) {
elem.addEventListener(type, handle, false);
} else if (elem.attachEvent) {
elem.attachEvent('on' + type, function () {
handle.call(elem);
})
} else {
elem['on' + type] = handle;
}
}
解除事件处理程序
ele.onclick = null;
ele.removeListener(type, fn, false);
-
ele.detachEvent('on' + type, fn)
- 如果绑定的函数是匿名函数,则无法解除
事件处理模型
事件冒泡
结构上(非视觉上)嵌套关系的元素,会存在事件冒泡的功能,即同一事件,自子元素冒泡向父元素。(自底向上)
事件捕获
结构上(非视觉上)嵌套关系的元素,会存在事件捕获的功能,即同一事件,自父元素捕获至子元素。(自顶向下)
- 将 addEventListener() 内第三个参数 false 改为 true,即成了捕获模型
- IE 没有捕获事件
顺序:
- 先捕获,后冒泡
- 事件执行看绑定顺序
focus, blur, change, submit, reset, select 等事件不冒泡
特殊:
setCapture():只能在 ie 中使用,给元素使用
使用后,该元素会捕获页面上发生的所有时间
releaseCapture():取消上述捕获
取消冒泡
-
e.stopPropagation();
W3C标准 --> 但不支持 IE9 以下版本 -
e.cancelBubble = true;
IE 使用
兼容性处理解决
function stopBubble(event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
阻止默认事件
默认事件 – 表单提交,a标签跳转,右键菜单等。
- a 标签跳转
- 右键菜单事件
oncontextmenu
阻止方法:
-
return false;
--> 兼容性特别好,以对象属性的方式注册的事件才生效(onxxx) -
e.preventDefault();
--> W3C标准 -
e.returnValue = false;
--> IE 使用
兼容性处理解决
function cancelHandler(event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
}
事件对象
兼容
var event = event || window.event
事件源对象
-
event.target
--> 火狐 -
event.srcElement
--> IE
以上两个 chorme 都有
兼容
var target = event.target || event.srcElement
事件委托
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script type="text/javascript">
var ul = document.getElementsBytagName('ul')[0];
ul.onclick = function (e) {
var event = e || window.event;
var target = event.target || event.srcElement;
console.log(target.innerText);
}
</script>
- 效率高:不需要循环所有的元素一个个绑定
- 可扩展:当有新的子元素时不需要重新绑定事件
事件分类
鼠标事件
事件名 | 作用 | 说明 |
---|---|---|
click | 鼠标点击 | mousedown + mouseup |
mousedown | 鼠标点下 | |
mousemove | 鼠标移动 | |
mouseup | 鼠标抬起 | |
contextmenu | 右键菜单事件 | 仅用于取消右键菜单 |
mouseover | 鼠标进入 | |
mouseout | 鼠标离开 | |
mouseenter | 鼠标进入 | HTML5 新规范,同 mouseover |
mouseleave | 鼠标离开 | HTML5 新规范,同 mouseout |
区分鼠标左右键
event.button
属性
- 0:左键
- 1:点击滚轮
- 2:右键
仅在 mousedown 和 mouseup 事件上可用,click 事件不可用
区分拖拽和点击
长时间按是长按,短时间按才触发 click 事件
var firstTime = 0;
var lastTime = 0;
var key = false;
document.onmousedown = function () {
firstTime = new Date().getTime();
}
document.onmouseup = function () {
lastTime = new Date().getTime();
if (lastTime - firstTime < 300) {
key = true;
}
}
document.onclick = function () {
if (key) {
console.log('click');
key = false;
}
}
移动端事件
事件名 | 作用 |
---|---|
touchstart | 触摸开始 |
touchmove | 触摸移动 |
touchend | 触摸结束 |
键盘事件
事件名 | 作用 |
---|---|
keydown | 按键按下 |
keypress | 按键按下 |
keyup | 按键抬起 |
执行顺序
keydown > keypress > keyup
keydown & keypress
- keydown:能够监测到所有按键,除 Fn 辅助键外
- 大小写没有区别
- 没有
e.charCode
属性
- keypress:只能检测到 ASCII表 中有的值(字符类按键)
- 可以区分大小写
转换字符方法
String.fromCahrCode(e.charCode)
文本操作事件
事件名 | 作用 |
---|---|
input | 只要文本框值发生改变触发 |
change | 获取焦点和失去焦点的值发生改变触发 |
focus | 获取焦点 |
blur | 失去焦点 |
其他事件
事件名 | 作用 |
---|---|
scroll | 页面发生滚动 |
load | 页面所有加载项均完成后触发 |
<script>
window.onload = function () {
var div = document.getElementByTagName('div')[0];
} // 绑定 onl oad 后会等页面渲染、下载完后才会执行,就可以获取到之后的元素
</script>
<div></div> <!-- 正常上方 js 无法获取到这个div -->
缺点:
- 效率低
- 没必要
JSON
前后端之间联系一种数据纽带,通常叫做接口,一种就是叫做 json 类型的数据
数据格式
{
"name": "deng",
"age": 123
}
类型转换方法 *
JSON.stringify(obj)
--> 将对象类型转换为 json 格式的字符串
JSON.parse(obj)
--> 将字符串转换为对象类型