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]
BOM与事件的更多相关文章
- day 34 js 基础后部分 BOM 和 事件和正则
前情提要 今天主要学习的是bom 和事件 一:正则表达式 <!DOCTYPE html> <html lang="en"> <head> < ...
- (day46)DOM、BOM、事件
目录 一.BOM (一)定义 (二)window对象 (三)window的子对象 (1)navigator对象 (2)screen对象 (3)history对象 (4)location对象 (5)弹出 ...
- bom操作,事件与jquery
BOM操作中 window关键字 可以不写 DOM操作 学习如何查找节点 如何查找标签 选择器 事件 当符合某个条件下 自动触发的动作/响应 js绑定事件的方式 方式1 不推荐使用 <butto ...
- H5课程大纲
K1模块课程: 课程模块 课程阶段 课程内容 K1 模块 第1阶段 认识前端开发 环境配置.使用标签的分类.写法及使用规范CSS样式的使用.各类常见样式Photoshop使用16大常用样式盒模型.语义 ...
- 【前端童鞋看过来!】给大家分享网盘里前端相关书籍,主要是和网络通信(HTTP/TCP/IP)及javascript相关的
百度云链接:https://pan.baidu.com/s/1kUPdf5H(无密码) 截图: <HTTP权威指南> [豆瓣书评]:此书第一部分是HTTP的概略,如果你没有时间,通读第一部 ...
- 一个普通的 Zepto 源码分析(三) - event 模块
一个普通的 Zepto 源码分析(三) - event 模块 普通的路人,普通地瞧.分析时使用的是目前最新 1.2.0 版本. Zepto 可以由许多模块组成,默认包含的模块有 zepto 核心模块, ...
- 一个「学渣」从零开始的Web前端自学之路
从 13 年专科毕业开始,一路跌跌撞撞走了很多弯路,做过餐厅服务员,进过工厂干过流水线,做过客服,干过电话销售可以说经历相当的“丰富”. 最后的机缘巧合下,走上了前端开发之路,作为一个非计算机专业且低 ...
- web开发 入门
插件 ,索引文件,js目录,视图目录,资产目录,css目录,数据目录,font-awesome-4.7.0目录,图像目录. 引导程序 框架.字体.layer,mockjs.paging分页.树网格.t ...
- JavaScript:常用总结
● 语法要点 ● 引用类型 ● BOM/DOM ● 事件要点 一.语法要点 1.在声明变量时,如果省去了var关键字,那么这个变量为全局变量. 2.数据类型有5种原始类型和9种引用类型: 原始类型中: ...
随机推荐
- Windows 10预览版14316开启Bash命令支持
00x0 前言 4月7日凌晨,微软推送了最新的Windows 10一周年更新预览版14316,其中重要的是原生支持Linux Bash命令行支持. 00x1 问题 如何开启Linux Bash命令行? ...
- ORACLE存储过程调用Web Service
1. 概述 最近在ESB项目中,客户在各个系统之间的服务调用大多都是在oracle存储过程中进行的,本文就oracle存储过程调用web service来进行说明.其他主流数据库,比如mysql和sq ...
- 固定在网页顶部跟随滚动条滑动而滑动的DIV层
在一个页面放2个悬浮框,悬浮框随页面的上下滚动有上下波动的效果,最终固定在同一位置 体验效果:http://hovertree.com/texiao/jsstudy/1/ 代码如下: <!DOC ...
- C# 判断字符串是否是int/double
using System.Text.RegularExpressions; /// <summary> /// 判断字符串是否是int/double /// </summary> ...
- Java基本概念(1)什么是Java
什么是Java Java是一种开发语言(核心特点:跨平台,面向对象,名称由来看这里:J2EE里面的2是什么意思),对于开发者来讲,Java基本等于Jdk. Jdk的版本介绍看这里:Java都有那些版本 ...
- 当shiro不进入自定义realm的权限认证方法时
需要加入下面的一个bean @Bean public DefaultAdvisorAutoProxyCreator advisorAutoProxyCreator(){ DefaultAdvisorA ...
- karma与webpack结合
一.必备插件 1.babel:es6的语法支持 2.karma:测试框架 3.jasmine:断言框架 4.webpack:打包工具 5.karma-webpack:karma调用webpack打包接 ...
- 移动端全兼容的flexbox速成班
说起flexbox,都算是件陈年旧事了,它是2009年W3C提出的一种全新的可伸缩的CSS布局方式.依赖flexbox,我们可以更简单,高效的完成可伸缩式页面的布局. 业界与flexbox的相关教程文 ...
- table tr foreach td 换行
@{ ;} <table style=" class="sy_table"> <tr> @foreach (DataRow dr in (View ...
- JavaScript基本语法(四)
一. JavaScript 函数 1.函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块.我们可以将一些常用的代码封装成函数,待用到的时候就能直接调用使用.利用函数可以使代码的组织结构 ...