JavaScript 学习笔记（四）-- BOM

本文主要是介绍JavaScript 学习笔记（四）-- BOM，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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) --> 将字符串转换为对象类型

这篇关于JavaScript 学习笔记（四）-- BOM的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！