BOM、DOM与JS中的事件

大家讲道理

发布时间：2018-05-17 15:58:24

3242人浏览过

来源于php中文网

原创

上回书说道，js中变量、运算符、分支结构、循环和嵌套循环等内容。本回就由本k给大伙唠唠js中的bom、dom和事件。

一、“花心大萝卜”——BOM

1、震惊，FFF团为何对BOM举起了火把——BOM简介

BOM(Browser Object Model) 是指浏览器对象变量0，在JS中BOM是个不折不扣的花心大萝卜，因为它有很多个对象，其中代表浏览器窗口的变量1是BOM的“正室”、也就是最重要的，其他对象都是正室的下手、或者叫侧室也不足为过。

2、细数BOM的那些风流——BOM对象详解

2.1 BOM的正室——window对象。

window对象代表浏览器窗口，是JS的BOM中最常用到的对象，下面就跟大家介绍一下领悟window对象的常用方法。

① prompt：弹窗接受用户输入；
② alert：弹窗警告；
③ confirm：带有确认/取消变量2的提示框；
④ close：关闭浏览器窗口；
⑤ open：重新打开新窗口，传入参数URL/窗口名称/窗口特征；
⑥ 变量3变量4out：设置延时执行，只会执行一次（两个参数：需要执行的function/毫秒数）；
⑦ setInterval：设置变量5，循环每隔N毫秒执行一次（传入参数：调用setInterval时返回一个ID，通过变量接受ID，传入变量6Interval）；
⑧ clearTimeout：清除延迟；
⑨ clearInterval：清除定时器；

在这九种方法中，最常用到也是这里面最麻烦的四种是setTimeout/clearTimeout和setInterval/clearInterval，它们两两对应，常放在一起搭配使用。下面就给大伙举一个这方面的栗子~

（栗子：setTimeout/clearTimeout）



    
        
        首先是setTimeout与clearTimeout

（栗子：setInterval/clearInterval）



    
        
        然后是setInterval与clearInterval

2.2 BOM的侧室们——其他对象简述。

因为除window对象外的其他BOM对象在实际的JS撰写中很少出现，所以本K就以代码的形式给大家简单提一下。



    
        
        BOM的侧室们

二、“N世同堂”——DOM

1、朝阳群众又立功，代码中竟出现如此神秘的“庞大组织”——DOM简介

DOM（变量7 Object Model），是指文档对象模型，是变量8组织推荐的处理可扩展标志语言的标准变量9运算符0。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型，而DOM中的每一条分支都被称作一个“节点”，所有节点及节点属性构成的结构图会呈现出很强的层次性（栗子如下图，源于万能的度娘）。

运算符1分为三大类：元素节点，文本节点，属性节点。文本节点、属性节点为元素节点的两个子节点，通过gelElement系列方法，可以取到元素节点。

2、如此组织，其真相竟然是...——运算符2详解

DOM操作是JS中应用性非常强的一部分，所以本K就以代码的形式来给大家叙述。

2.1 获取节点与样式修改

DOM代码详述（一）

这里是测试区

@@##@@

2.2 层次节点常用操作

2.3 运算符3操作

书名	价格
看得见风景的房间	30.00元
幸福从天而降	18.50元
60个瞬间	32.00元
合计

三、鼠标和键盘、那些不得不说的事——JS中的事件

1、三足鼎立——JS中的事件分类

1.1 鼠标事件

click 单击

dblclick 双击

mouseover 鼠标移入

mouseout 鼠标移出

mousemove 鼠标划过

mousedown 鼠标按下

mouseup 鼠标抬起

艺帆网络工作室网站源码1.7.5

艺帆网络工作室网站源码,是国庆后新一批新概念的网站源码,采用流行的Html5和JS组合流畅顺滑，界面清晰明朗，适合科技类企业和公司建站使用。如果你是想成为一家独特的设计公司，拥有独特的文化，追求品质，而非数量与规模。这种坚持一直贯穿于项目运作之中，从品牌建立、形象推广设计到品牌形象管理。那可以考虑使用这款艺帆网络工作室网站源码。这款源码中服务项目和团队程序需要在_template文件夹下的in

下载

1.2 键盘事件

运算符4down：键盘按下时触发

keypress：键盘按下并松开的瞬间触发

keyup：键盘抬起时触发

【运算符5】
①执行顺序：keydown keypress keyup
②长按时，会循环不断的执行keydown keypress
③有keydown事件，不一定有keyup事件（事件触发过程中，鼠标移走，可能就没有keyup）
④keypress事件只能捕获字母、数字、符号（包括回车和空格），不能捕获功能键；keydown keyup基本可以捕获所有功能键，特殊例外
⑤keypress区分大小写，keydown keyup不区分；
⑥keypress不区分主键盘和小键盘，keydown keyup区分；
【如何确定键盘触发按键】
⑴ 在触发运算符6中触发参数e代表按键事件；
⑵ 通过e.keyCode 确认案件Ascii码值，进而确定按键；
⑶ 兼容所有浏览器的写法（一般不必要）：
var evn = e||event; //取到按键
var code = evn.keyCode||evn.which||evn.charCode; //取到按键编码

1.3 HTML事件

2、此岸与彼岸——JS中的事件模型

2.1 DOM0事件模型

2.1.1 内联模型：直接将函数名作为运算符7的某个事件属性的属性值；
栗子
缺点：违反了W3C关于HTML与JS分离的运算符8！

2.1.2 脚本模型：在JS脚本中通过事件属性进行绑定；
栗子 window.onload = function(){}
局限性：同一节点只能绑定一个同类型事件；

2.2 DOM2事件模型（后面有栗子！）

优点：同一节点，可以添加多个同类型事件的监听器；

①添加事件绑定：
IE10之前：btn1.attachEvent("onclick",函数);
其他浏览器：btn1.addEventListener("click",函数,true/false);
true：表示事件捕获；false（默认）：表示事件冒泡
兼容写法：if(btn1.attackEvent){btn1.attachEvent("onclick",函数);}else{btn1.addEventListener("click",函数,true/false);}
②取消事件绑定：
.detachEvent("onclick",函数名);
.removeEventListener("click",函数名);
注：如果取消时间帮顶，运算符9必须使用有名函数，而不能使用分支结构0。因为在取消事件帮顶时，需要传入函数名；