Java教程

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();
  1. 兼容性很好
  2. 所有元素节点都有此方法
  3. left 和 top 表示该元素左上角的 X 和 Y 坐标,right 和 bottom 表示该元素右下角的 X 和 Y 坐标
  4. 返回的结果并不是实时的
  5. width 和 height 老版本 IE 不兼容
  6. 使用并不多
    在这里插入图片描述
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 :怪异模式

事件

绑定事件方法

  1. ele.onxxx = function (event) {}

    • 兼容性很好,但同一个事件上只能绑定一个处理函数
    • 基本等同于写在 HTML 行间
  2. 行间写,不需要写 function

    <div onclick="console.log('a');"></div>
    
  3. obj.addEventListener(type, fn, false);

    • (事件类型, 事件处理函数, false)
    • IE9 以下不兼容
    • 可以为一个事件绑定多个处理程序
    • 绑定事件时,若在循环中,注意闭包问题
    • false:冒泡模型;true:捕获模型
  4. 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

阻止方法:

  1. return false; --> 兼容性特别好,以对象属性的方式注册的事件才生效(onxxx)
  2. e.preventDefault(); --> W3C标准
  3. 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>
  1. 效率高:不需要循环所有的元素一个个绑定
  2. 可扩展:当有新的子元素时不需要重新绑定事件

事件分类

鼠标事件
事件名作用说明
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 -->

缺点:

  1. 效率低
  2. 没必要

JSON

前后端之间联系一种数据纽带,通常叫做接口,一种就是叫做 json 类型的数据

数据格式

{
    "name": "deng",
    "age": 123
}

类型转换方法 *

JSON.stringify(obj) --> 将对象类型转换为 json 格式的字符串

JSON.parse(obj) --> 将字符串转换为对象类型

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