JavaScript 学习笔记（四）-- BOM_Agoni Lay的博客-程序员秘密

技术标签：程序员 bom 前端 js json javascript

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];
    } // 绑定 onload 后会等页面渲染、下载完后才会执行，就可以获取到之后的元素
</script>
<div></div> <!-- 正常上方 js 无法获取到这个div -->

缺点：

效率低
没必要

JSON

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

数据格式

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

类型转换方法 *

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

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

本文链接：https://blog.csdn.net/qq_58163927/article/details/119077901

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

维基百科中文语料库训练word2vec模型和使用总结_word2vec中文语料库_乐七_的博客-程序员秘密

首先列明参考博文地址：使用中文维基百科语料库训练一个word2vec模型并使用说明windows使用opencc中文简体和繁体互转使用中文维基百科训练word2vec模型一、下载维基百科中文语料库下载地址：https://dumps.wikimedia.org/zhwiki/这里我选择的是20200801，下载第一个即可二、语料库处理1、使用WikiExtractor提取语料库文章WikiExtractor项目git地址直接根据说明安装，这里我直接pipWikiExtractor是

说明窗体设置_赛男丨木子丿小喵的博客-程序员秘密

今天被说明窗体给难住了，这个窗体是怎么做的呢。为自己不扎实的基础深感惭愧，年底了也是还债的时候了。先说两个属性。locked：控件中的文本是否可被编辑。True:不能编辑，但程序可以通过改变Text属性值来改变文本内容False:可以编辑控件中的文本。 ScrollBars：滚动条的设置。属性设置为 0 时，没有滚动条，为1，2，3时分别设置的水平和垂直滚动条。另外一个问题，说明的文字怎么设置的，知道是设置的text属性，但是怎么排的版呢，复制粘贴过去之后没有换行，全部文字在一行..

OpenGL曲面纹理贴图技术－－波浪的模拟_Y___Y的博客-程序员秘密

OpenGL曲面纹理贴图技术－－波浪的模拟学过OpenGL的人都很容易的把图片贴到四边形和三角行上，但将纹理贴到一般的曲面上认为很困难，其实通过本文的简单分析，其实很简单。本文以波浪模拟为例，来介绍一般纹理贴图技术，大家很容易举一反三来模拟其他的现象。代码的蓝本主要来自NeHe。1.简单的数学知识介绍向量的乘积（这里指叉乘）。用程序写出来如下。//三维点定义struct

WIN10解决不能在Sublime Text3中使用input函数输入内容的问题_一一风浪的博客-程序员秘密

要解决该问题，需要使用插件：SublimeREPL。1.安装插件：ctrl+shift+p.在弹出窗口中输入REPL,输入Install Package或者直接点击上图鼠标所在的位置安装过程。然后出现Loading repositories，然后输入sublimeREPL，稍候一阵底部就会告诉你安装好了在Tools---sublimeREPL可以看到，即安装成功2.使用插件：Tools->SublimeREPL->Python ->Python-RUN ...

Unity Shader -- 实现透明效果_李三思9259的博客-程序员秘密

@[TOC](Unity Shader 之实现透明效果(总结自Unity Shader 入门精要))概述Unity实现透明效果主要有两种方式：1.透明度测试2.透明度混合透明度测试启用透明度测试，Alpha低于限制条件的物体全部不渲染。此种操作没法显示半透明的物体。方法：//渲染队列设为半透明物体，不受投影器影响，指明该shader是一个使用了透明度测试的shaderTags{...

Vue列表点击跳转外部链接_米柆的博客-程序员秘密

页面效果是酱紫的：给了一套酱紫的数据，需要点击观看回放的时候跳转到不同的连接地址（reback字段）[ { "id": 1, "name": "只楚街道", "reback":"https://xxxxx.com/live/tvchat-1430991900?v=1615941114578#/", "state": 2, "time":"17:00" },{ "id": 2,