BOM与事件

Posted 2020-08-15 我的空中楼阁

PPK谈JS学习笔记第二弹

JS的语言核心和DOM之间有一个过渡层，一般称为BOM，浏览器对象模型。是指JS的客户端实现，它不操作DOM，又不是JS的语言核心，它的主要功能是管理浏览器窗口，每个窗口都有各自独立的WINDOW对象，并使得它们可以彼此通信，window对象是BOM的核心。
为了访问html文档的入口，window对象包含了document对象，反正document对象掌握着用户正在浏览的整个HTML页面。
还有其他功能，window对象包含了LOCATION和HISTORY对象，一些交互方法ALERT以及USERAGENT字符串。

WINDOW包含了两个与导航有关的对象：LOCATION和HISTORY。
LOCATION对象包含了与页面当前位置有关的信息。
包含，协议，主机，主机名，端口等信息。

window.location.href 会在浏览器历史记录中有记录
window.location.replace 会替换掉当前页面在浏览器历史中的记录

timeout and interval
允许你指定一段脚本在将来的某个指定时间运行。
setTimeout(‘myfunc,1000)
第一个参数是要运行的函数名，第二个参数是要等待的时间，单位是毫秒。
setInterval(‘myfunc‘,1000)
每隔一秒执行一次函数myfunc.

window对象中最重要的对象就是document,它代表着窗口当前所包含的ＨＴＭＬ页面，而且允许你动态地改变这个文档。
因为ＨＴＴＰ协议被设计成无状态的协议，服务器会认为每次访问都是新的，所以我们需要ＣＯＯＫＩＥ来记录一些用户的
一些状态与喜好。ＣＯＯＫＩＥ是存储在用户电脑中的一个小文本文件，它与ＷＥＢ域中的某个目录相关联，当用户的浏览器
众这些目录中请求了一个页面，ＣＯＯＫＩＥ会随着ＨＴＴＰ请求被自动发送。

ＥＭＣＡＳＣＲＩＰＴ５在２００９年被确立，引入了一些新的对象，有一个严格模式，抛弃了过时的一些特性。
"use strict"

在浏览器中打开一个网页，按快捷键　ＣＴＲＬ＋ＳＨＩＦＴ＋Ｉ
你就可以打开一个ＷＥＢ开发人员辅助工具，选择ＣＯＮＳＯＬＥ菜单，你就可以在里面输入ＪＳ代码，进入一个ＲＥＰＬ的环境，
可以执行你输入的单行或多行代码块。
如果要输入多行代码块，请在输入下一行之前敲ＳＨＩＦＴ＋ＥＮＴＥＲ。

function student(name){
this.name=name;
}

student.prototype.name="student";
console.log(student.hasOwnProperty(‘name‘));
console.log(student.hasOwnProperty(‘toString‘));

var student1 = new student("stuentyao");
console.log(student1.name); //studentyao
delete student1.name
console.log(student1.name); //student

for 适用于遍历一般数组对象，for-in更适合遍历对象数组。
var monkey = {
hair: true,
feeds: ‘bananas‘,
breathes: ‘air‘
};
function Human(name){
this.name=name;
}
Human继承了monkey.

由于ＰＲＯＴＯＴＹＰＥ的特性，你可以非常方便地对内置的对象进行增强，如字符串，数组等，添加一些你自己需要的方法，
但最好不要这样做，容易混乱，尤其是需要判断一下新的ＪＳ版本有没有自己实现这个方法。
if (typeof String.prototype.trim !== ‘function‘) {
String.prototype.trim = function () {
return this.replace(/^\s+|\s+$/g,‘‘);
};
}

ＨＴＭＬ页面的交互性，主要是通过ＤＯＭ的事件来完成的，ＪＳ可以提供一些事件处理函数，当事件发生时，做一些想做的处理。
事件处理的规范现在有两个，一个是Ｗ３Ｃ一个是微软。
仅仅判断一个对象是否存在不足以验证浏览器是否支持某种事件模型。
事件分为三类，
一是鼠标事件，二是键盘事件，三是接口事件（不是由用户的行为直接引起，而是用户行为的结果引起的页面状态发生变化，如页面提交，页面加载）
常见鼠标事件：
click
dbclick
mousedown
mousemove
mouseover
mouseout
mouseup
键盘事件有：
keydown
keypress
keyup
它们用在所有可接受文本输入的HTML元素上。
检查按键需要用keydown,keyup,阻止字符输入要用keypress.
常见的接口事件有：
blur,focus
change
load
unload
readystatechange(主要用在XMLHttpRequest)
reset
submit
resize
scroll
事件处理程序
最古老的注册事件处理程序的方式是添加一个属性到HTML元素中。
内联的和传统的模型事件处理程序的缺点就是后面的赋值会把前面的值给替换掉。
有两个解决方法，第一个解决方法是在赋值之前保存已经注册的值，然后包装在一个新的匿名函数里面
再赋值。
另一个方法是使用高级的事件注理程序模型，这是推荐的作法。
W3C:
x.addEventListener(‘click‘,doThis,false);
x.addEventListener(‘click‘,doThat,flase);
浏览器处理的时候，不一定是按照事件注册的顺序在执行。
前两个参数意思比较明显，第三个参数是指事件冒泡（false)还是事件捕获的布尔值。
微软的事件模型以相似的方式工作，
x.attachEvent(‘onclick‘,doThis);
x.attachEvent(‘onclick‘,doThat);
移除事件处理程序
removeEventListener(‘click‘,doThis,false);
detachEvent(‘onclick‘,doThis);
W3C 和 微软事件模型之间的区别
不仅仅是调用的方法名称与参数不同，还有本质的不同，
微软模型不支持事件捕获，不过这个很少用，不是大问题。
微软的模型把事件处理函数视为一个全局函数，而不是被注册到HTML元素的一个方法，这是一个严重的问题。
如果你的DIV／FORM／INPUT中INPUT触发了CLICK事件
事件冒泡中： 会从目标开始，即INPUT开始触发事件处理，然后逐级向上冒泡，即FORM，DIV，直到DOCUMENT为止。
事件捕获则刚好相反，它从DOCUMENT一级开始，沿着文档树向下，直到事件目标为止。
在W3C模型中，捕获和冒泡都会发生，先发生捕获再发生冒泡。然而每一个事件处理程序只针对一种类型设定。
事处处理程序
在事件处理程序中，可能需要访问事件对象，当事件发生的时候，浏览器会自动创建这个对象，而且它包含了关于该事件
的各种各样有用的信息，比如目标对象，事件的类型，鼠标的位置，按键等信息。
事件对象和它的属性受浏览器兼容性问题的伤害。
一般受限于提供了不同的属性名称上，有一些则更深层次的底层，有一些是某些浏览器特有的。
在W3C模型中，事件对象作为第一个参数被传递到当前的事件处理程序当中，而微软模型中事件对象总是window.event.
function handleEvent(e){
var evt = e || window.event;
//...
}
event.type:mouseover,keyup 它表示事件类型，几乎被所有浏览器所支持。
事件目标对象
w3c中属性是currentTarget,relatedTarget,target,microsoft专有的属性是fromElement,toElement,andsrcElement.
在传统的W3C模型中，JS事件处理程序成为它们所注册的HTML元素的方法，THIS指向HTML元素，并且在事件程序中可以使用
它。
在其他模型中，这个THIS就不一定能用，所以如果你想要使用THIS关键字，你必须确定它确实引用了在其上注册事件处理程序的那个元素。
事件范例：
检查文本框最大数字限制
textareas[i].onkeyup=textareas[i].onchange=checkMaxLength;
在文本框中输入时检查也有可能是复制粘贴，所以需要加上onchange.
checkMaxLength()将要改变文本框之后的SPAN元素，这个元素不是事件目标对象，也不是被定义事件处理的对象，所以我们
使用脚本创建一个指向SPAN的引用。
textareas[i].relatedElement=[the span]