锐客网

  1. 首页 > it技术 > >

前端|浏览器交互（BOM和DOM相关webApi、监听事件）

前端浏览器

【前端|浏览器交互（BOM和DOM相关webApi、监听事件）】
（1）BOM 浏览器对象模型（Browser Object Model）
浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，
其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。
1.BOM的顶级对象window
window是浏览器的顶级对象，当调用window下的属性和方法时，可以省略window
注意：window下一个特殊的属性 window.name
a.对话框 包括alert(),prompt(),confirm()
b.页面加载事件：onload,onunload()
例子:
window.onload = function () {
// 当页面加载完成执行
// 当页面完全加载所有内容（包括图像、脚本文件、CSS 文件等）执行
}
c.定时器setTimeout()和clearTimeout()在指定的毫秒数到达之后执行指定的函数，只执行一次
setInterval()和clearInterval()定时调用的函数，可以按照给定的时间(单位毫秒)周期调用函数
e.location对象:location可以获取或者设置浏览器地址栏的URL
例子：window.location.hash，window.location.host
f.URL统一资源定位符
g.history对象:back(),forward(),go()
h.navigator对象
例子：
//通过userAgent可以判断用户浏览器的类型

console.log(window.navigator.userAgent);

//通过platform可以判断浏览器所在的系统平台类型.

console.log(window.navigator.platform);
（2）DOM文档对象模型（Document Object Model，简称DOM）提供访问和操作网页HTML内容的方法和接口
DOM是中立于平台和语言的接口，
文档树结构：
1.文档：一个网页可以称为文档
2.节点：网页中的所有内容都是节点（标签、属性、文本、注释等）
3.元素：网页中的标签
4.属性：标签的属性
1.DOM节点和属性
元素节点对象的获取方式:

getElementById():获取特定ID元素的节点对象(返回一个对象)

getElementsByTagName():获取指定标签名的节点列表(返回一个数组)

getElementsByName():获取相同name属性值的节点列表(返回一个数组)
元素节点的属性

tagName: 元素节点对象所指向的标签名称

innerHTML: 元素节点中的内容

className: 元素节点的class属性值

style: css内联样式对象

children: 某元素的所有子元素节点

value: 输入框的内容
2.DOM操作
DOM节点操作指的是: 创建节点、复制节点、插入节点、删除节点和替换节点等.
DOM操作所涉及的方法有:

createElement(); 创建一个元素节点

appendChild(); 添加一个新子节点到子节点的末尾

createTextNode(); 创建一个文本节点

insertBefore(); 将新节点插入到某节点前面

replaceChild(); 将新节点替换旧节点

cloneNode(); 复制节点

removeChild(); 移除节点

（3）监听事件
脚本模式:
脚本模式能将JS代码和HTML代码分离, 符合代码规范.
使用脚本模式我们需要先获取到元素节点对象, 再针对该节点对象添加事件; 如我们可以采用三种方式来获得节点对象: getElementById(), getElementsByTagName(), getElementsByName()

添加事件的方法：
例如:
var box = document.getElementById('box');
添加事件方式一 :通过匿名函数，可以直接触发对应的代码 (推荐)
box.onclick = function() {//给box节点对象添加点击事件onclick
console.log('Hello world!');
};

添加事件方式二 :通过指定的函数名赋值的方式 来执行函数
box.onclick = func; //注意这里不能写成func()
function func() {//给box节点对象添加点击事件onclick
console.log('Hello world!');
};
（4）事件的分类
JavaScript可以处理的事件种类有3种：鼠标事件，键盘事件和HTML事件。
1.鼠标事件，页面所有元素都可触发鼠标事件
click,dbclick,mousedown,mouseup,mousemove,mouseover,mouseenter,mouseleave
2.键盘事件，在键盘上按下键触发的事件，一般由window对象或document对象调用
keypress,keydown,keyup
例如：window.οnkeyup=function(){
}
3.HTML事件：跟HTML页面相关的事件
load,unload,select,change,focus,blur,submit,reset
例子
window.onload = function() {
console.log('页面已经加载完毕');
};
input.onselect = function() {
console.log('选择了文本框中的内容');
};

（5）事件对象Event
通过事件的执行函数传入的event对象(事件对象) 不是在所有浏览器都有值,
在IE浏览器上event对象并没有传过来, 这里我们要用window.event来获取,
而在火狐浏览器上window.event无法获取, 而谷歌浏览器支持event事件传参和window.event两种,
为了兼容所有浏览器, 我们使用以下方式来得到event事件对象:

box.onclick = function(evt){
var e= evt || window.event; //获取到event对象(事件对象)
console.log(e);
};

其中window.event中的window可以省略, 最终我们可以写成:
box.onclick = function(evt){
var e= evt || event; //获取到event对象(事件对象)
console.log(e);
};

注意: evt||event不要倒过来写
事件对象Event的属性:

button: 鼠标按键
clientX: 浏览器可视区域的x坐标
clientY: 浏览器可视区域的y坐标
pageX: 浏览器内容区域的x坐标
pageY: 浏览器内容区域的y坐标
screenX: 显示器屏幕的x坐标
screenY: 显示器屏幕的y坐标
offsetX: 鼠标点击的元素位置距离元素左边界的x坐标
offsetY: 鼠标点击的元素位置距离元素上边界的y坐标

原文1
原文2

    推荐阅读


    上一篇：AFNetworking 图片上传至服务器

    下一篇：农历九月九