BOM与事件

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,它代表着窗口当前所包含的HTML页面,而且允许你动态地改变这个文档。
因为HTTP协议被设计成无状态的协议,服务器会认为每次访问都是新的,所以我们需要COOKIE来记录一些用户的
一些状态与喜好。COOKIE是存储在用户电脑中的一个小文本文件,它与WEB域中的某个目录相关联,当用户的浏览器
众这些目录中请求了一个页面,COOKIE会随着HTTP请求被自动发送。

EMCASCRIPT5在2009年被确立,引入了一些新的对象,有一个严格模式,抛弃了过时的一些特性。
"use strict"

在浏览器中打开一个网页,按快捷键 CTRL+SHIFT+I
你就可以打开一个WEB开发人员辅助工具,选择CONSOLE菜单,你就可以在里面输入JS代码,进入一个REPL的环境,
可以执行你输入的单行或多行代码块。
如果要输入多行代码块,请在输入下一行之前敲SHIFT+ENTER。

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.

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

HTML页面的交互性,主要是通过DOM的事件来完成的,JS可以提供一些事件处理函数,当事件发生时,做一些想做的处理。
事件处理的规范现在有两个,一个是W3C一个是微软。
仅仅判断一个对象是否存在不足以验证浏览器是否支持某种事件模型。
事件分为三类,
一是鼠标事件,二是键盘事件,三是接口事件(不是由用户的行为直接引起,而是用户行为的结果引起的页面状态发生变化,如页面提交,页面加载)
常见鼠标事件:
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]

时间: 2024-10-12 10:35:22

BOM与事件的相关文章

精通Node.js: 你应该阅读的书籍

最开始的几年,在应用服务器编程领域,我存在着一个选择.那时候,我已经远离了C一些时间,喜欢上JavaScript很长时间. 我喜欢JavaScript是因为JavaScript很轻,很优雅,很容易表达我的想法.并且如果我想实现一个可视化的内容,我可以在半小时内通过HTML Css写出一个漂亮的.生动的交互工具,然后把我任何想到的东西扔进去给别人看. 我很喜欢这样写javascript,虽然我知道道上这样写:JavaScript.但是javascript这样的写法让我觉得更加的轻快,虽然javas

你是怎么看完《JavaScript权威指南》《JavaScript高级程序设计》等这类厚书的?

如果js属于刚刚入门阶段,不建议抱着书一直看下去,因为这样你不容易明白这些定义和概念的用法.看着看着就会很迷惑的.建议先试着用原生JS写一些小项目和小程序,然后试着写博客做些笔记,把遇到的困惑写下来,带着疑问去学习. 如果有一定的js基础或者用JQuery等一些库做过一些小东西的话,可以先看<JavaScript语言精粹(修订版)>这本书,这本书很薄,100多页而已,可以很快看完,对于了解js的基础知识,比如对象,数组,语法,作用域,闭包等等都很有帮助.前面有人提到<你不知道的JavaS

100天书单 NO.1

豆瓣评分:9.3 内容简介  · · · · · · 本书是JavaScript 超级畅销书的最新版.ECMAScript 5 和HTML5 在标准之争中双双胜出,使大量专有实现和客户端扩展正式进入规范,同时也为JavaScript 增添了很多适应未来发展的新特性.本书这一版除增加5 章全新内容外,其他章节也有较大幅度的增补和修订,新内容篇幅约占三分之一.全书从JavaScript 语言实现的各个组成部分——语言核心.DOM.BOM.事件模型讲起,深入浅出地探讨了面向对象编程.Ajax 与Com

关于阅读

最便宜的自我修炼是阅读. 喜欢买书,碍于没有收入心动之时才入手几本. 买得不多,读得也不深. 写此文督促自身不要荒废已买的几本书. 以及自己阅读之路:买书的理由,进度,以及对每本书的心得体会. 记录从会买书走向会读书之路. 一.实体书籍: (一)技术书籍: 1.<Head First Java> 购书途径:奥维博世图书专营店[2014-11-11][39.50元] 购买理由: 阅读计划与进度: 阅读心得体会: 内容简介: <Head First Java>是本完整的面向对象(obj

Web开发必备书籍

你看,或者不看我, 我就在那里, 不悲不喜: 你读,或者不读我, 内容就在那里, 不离不弃: 来我的怀里, 或者, 让我住进你的脑海里, 默默 渗透 皆大 欢喜 在这个竞争激烈的社会,我深深的感觉到'技多不压身'是句真理.在大家马不停蹄的奋斗的时候,小编插空给大家推荐web开发必备良品,从入门到精通,应有尽有,不容错过~ 1.HTML5篇--<HTML5与CSS3基础教程(第8版)> 作者 Elizabeth Castro,Bruce Hyslop 译者 望以文 书号 978-7-115-35

JS-WEB-API 整理

JS-WEB-API 常说的JS(浏览器执行的JS)包含两部分: JS基础知识:ECMA 262标准 JS-WEB-API:W3C标准 W3C标准中关于JS的规定有: DOM操作 BOM操作 事件绑定 Ajax请求(包括HTTP协议) 存储 例如:页面弹窗是 window.alert(123),浏览器需要做: 定义一个 window 全局变量,对象类型 给它定义一个 alert 属性,属性值是一个函数 获取元素 document.geiElementById(id),浏览器需要: 定义一个 do

Web前端攻城狮培养计划之前端小白入门:网页布局基础与常见网页特效

步骤1: HTML基础超文本标记语言(英文缩写:HTML)是为"网页创建和其它可在网页浏览器中看到的信息"设计的一种标记语言,为搭建网页结构做出第一步.本阶段主要介绍了HTML的语法基础.表格.表单.等标签,并有案例结合,达到学以致用. 第1课 HTML基础HTML是网页制作必备技能,在本课程主要介绍HTML概念.语法及常用基础标签 第2课 HTML表格表格在网页中用于数据和排版,本课程介绍表格概念.语法.操作,并通过案例掌握知识. 第3课 HTML表单表单用于收集用户信息,本课程介绍

初学web前端必读的基本书籍推荐分享

零基础开始学习web前端技术,那么没有好的书籍你怎么开始学习呢?作为一个从零开始学习web前端技术的人给大家推荐基本不错的书籍,希望对于刚刚想进入web前端的人有一定的帮助,以下就是给初学web前端最近书籍推荐. 一.<Web前端开发最佳实践> 这本书是前端开发领域的经典之作,是一本扎实前端基本功,规范我们前端代码的实践性书籍.本书主要讲解了HTML.CSS.Javascript以及移动端开发的最佳实践方案,能够对缺乏良好指导的开发者产生很大的帮助.通过阅读本书我们可以掌握如何编写高可读性.高

JavaScript高级程序设计(第3版)PDF下载

网盘下载地址:JavaScript高级程序设计(第3版)PDF下载 – 易分享电子书PDF资源网 作者:  [美] 尼古拉斯·泽卡斯 出版社: 人民邮电出版社 原作名: Professional JavaScript for Web 译者: 李松峰 / 曹力 出版年: 2012-3-29 页数: 748 定价: 99.00元 装帧: 平装 内容简介 · · · · · · 本书是JavaScript 超级畅销书的最新版.ECMAScript 5 和HTML5 在标准之争中双双胜出,使大量专有实现