学习总结

1.window

三个功能：

①代替ES标准中的global，充当全局作用域对象；②包含ES、DOM和BOM的所有可直接使用的对象和函数；③存储窗口的信息或者操作当前窗口

窗口信息

浏览器窗口信息：window.outerWidth window.outerHeight

网页区域信息：window.innerWidth window.innerHeight

窗口大小改变事件

window.onresize

窗口打开与关闭

window.open("url","name","configuration")

name属性值 _self当前窗口打开 _blank新窗口打开 "自定义名称"新窗口打开，只能打开一个

configuration属性值 width=新窗口宽度, height=高度, top=新窗口距离左边界像素, left=右边界像素, titlebar=是否显示标题栏(yes/1 no/0), menubar=菜单栏, scrollbars=滚动条, resizable=调整大小, status=状态栏,toolbar=工具栏, location=地址字段

2.screen

screen.height 打开浏览器的屏幕的高度

screen.width 宽度

screen.availWidth 屏幕除window任务栏的宽度

screen.availHeight 除任务栏的高度

screen.updateInterval 屏幕刷新率

screen.colorDepth 屏幕色深

3.history

浏览器内存中专门保存一个窗口打开后成功访问过的所有url的历史记录数组，在当前窗口每成功打开一个新的url，就会将新的url追加到history数组的末尾进行保存，默认采用 push() 的方式。新加入的url在上，旧的url被压在下边

作用：控制网页的前进后退

history.go(n) n取1前进一步 n取-1后退一步 -2后退两步 0刷新

history.back 加载history数组中的上一个url

history.forward 加载history数组中的下一个url

4.location

专门保存当前浏览器正在打开的url的对象，并提供了各种跳转页面的方法

在当前窗口打开，可后退

location.assign("新url")

location.href=“新url”

location=“新url”

在当前窗口打开，禁止后退

location.replace("新url") 原理：用新url代替history中当前url

注意：只要讨论前进后退，一定是在一个窗口内。打开的新窗口有自己独立的history。两个窗口的history毫无关系

刷新

普通，优先从浏览器缓存中获取文件

①location=url ②history.go(0) ③F5 刷新 ④location.reload(/false/)

强制，跳过浏览器缓存，强制从服务器获取文件

location.reload(force) 参数 force，值为true

5.navigation

navigator是专门保存封装浏览器配置信息的对象

// 判断当前浏览器是否安装Flash插件
if(navigator.plugins["Shockwave Flash"]!==undefined){
document.write(<h1>已安装Flash插件，可以播放Flash动画</h1>)
}else{
document.write(<h1>未安装Flash插件，<a href="javascript:;">点此下载安装</a></h1>)
}

6.打开新连接

在浏览器内存中，每个窗口都有一个隐藏的唯一的name属性。用来唯一标识当前这个窗口。a元素的target属性和open()的第二个参数，都是在给新窗口起自定义的名字。如果硬要打开一个重名的窗口，后一个同名窗口会覆盖前一个。始终保持name属性在内存中的唯一

_self 获得当前窗口自己的名字，送给新窗口。结果，新窗口会覆盖当前窗口

_blank 不指定窗口名，浏览器决不允许窗口名为空，所以，会自动生成窗口名，几乎永不重复。所以，_blank可以打开任意多个窗口，都不会重名

7.定时器

8.event事件

事件是浏览器自己触发的或用户手动触发的页面内容的状态的改变

在事件处理函数中获得当前触发事件的元素本身 直接使用外部的全局变量：因为外部的全局变量，很可能在用户触发事件之前就被改变了，早就不是之前所指的对象了 使用this，事件处理函数中的 this 指向当前正在触发事件的这个元素本身，因为当事件发生时，浏览器是找到这个触发事件的元素对象，用这个元素对象本身调用事件处理函数属性，即，当前元素.onclick()，此时 this指向当前正在触发事件的元素

事件绑定（3种方式）

1. 在HTML中元素的的开始标签中绑定事件处理函数属性（已被开发淘汰）
2. 在JS中使用赋值方式绑定事件（一个事件仅绑定一个处理函数）
3. 添加事件监听对象的方式（一个事件可绑定多个处理函数）

元素.addEventListener(“事件名”, 事件处理函数) 注意：事件名不要带on前缀。因为DOM标准的事件名，都是没有前缀的，比如: click, mouseover, change,…

注意：同一个处理函数，不允许重复添加两次到元素上，即不能执行同一个处理函数两次

如果移除用 onclick=function(){} 方式绑定的处理函数，可用 onclick=null，只会移除掉由 onclick=function(){} 方式绑定的事件处理函数

元素.removeEventListener("事件名",原处理函数) 只要一个事件监听对象有可能被移除，则绑定时，就必须用有名称的函数保存处理函数的地址。然后移除时才能用函数名获得原函数的地址。不能使用匿名函数。移除事件处理函数时，即使写的匿名处理函数和绑定时一模一样，也无法移除。因为，function(){}等效于new Function()，所以两次匿名函数虽然写的一样，但是相当于先后创建了两个函数对象。所以，移除时用的不是原函数对象。而是新建的函数。当然移除不了

DOM标准事件模型

三个阶段：捕获阶段 目标触发 冒泡执行

注意：IE标准只有两个阶段，没有捕获

如果需要阻止事件冒泡，可以为div添加“阻止事件冒泡”

document.getElementById("show").addEventListener("click",

function(event) {
event.stopPropagation();//阻止事件冒泡
},

false);

element.addEventListener(event, function, useCapture)

event : （必需）事件名，支持所有 DOM事件

function：（必需）指定要事件触发时执行的函数

useCapture：（可选）一个布尔值，指定事件是否在捕获或冒泡阶段执行。true，捕获。false，冒泡。默认false

事件委托

如果多个平级子元素绑定相同的事件监听，则只需在父元素绑定一次，所有子元素共用，为父元素绑定监听，通过 e.target 获取发生事件的子元素。事件委托提高JavaScript性能，可以显著的提高事件的处理速度，减少内存的占用

注意：事件委托中不要用this获得当前元素对象，因为此时的this不再指向子元素，而是父元素

点在父元素上或其它不想要的子元素上，也会出发事件，因此在事件委托中，都要先通过元素名nodeName 或 选择器验证目标元素e.target 的特征是否符合要求。只有符合要求的子元素，才能继续执行处理函数。如果发现，e.target是不符合要求的元素，就什么都不干

取消事件/阻止默认行为

有些元素上自带了一些默认行为，比如a标签默认回到页面顶部，默认会在url结尾添加#

a.onlick=function(e){
e.preventDefault();
}

获取鼠标信息

e.screenX/screenY 相对于屏幕左上角

e.clientX/clientY 相对于浏览器中网页的左上角

e.offsetX/offsetY 相对于触发事件元素的左上角

页面滚动

window.onscroll 页面滚动事件

document.body.scrollTop document.documentElement.scrollTop 获得页面滚动的高度（当前页面在窗口中向下滚动了多少距离）

注意：在不同的浏览器中，有些能识别document.body.scrollTop，有些能识别document.documentElement.scrollTop。如果document.body.scrollTop为0则document.documentElement.scrollTop不为0，反之亦然

兼容写法

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

var scrollTop=document.documentElement.scrollTop+document.body.scrollTop;

document.body.scrollLeft document.documentElement.scrollLeft 获得页面滚动的宽度（当前页面在窗口中向右滚动了多少距离）

window.scrollTo(水平方向滚动到的位置, 垂直方向滚动到的位置)

window.scrollBy(left的增量，top的增量)

鼠标滚轮事件

var scrollFn = function (e) {
e = e || window.event;
// 判断 IE、Chrome 浏览器的滚轮事件
if (e.wheelDelta) {

if (e.wheelDelta > 0) {

console.log('上滚')
}

if (e.wheelDelta < 0) {

console.log('下滚')
}
// Firefox 浏览器滚轮事件
} else if (e.detail) {
if (e.detail> 0) {
console.log('下滚')
}

if (e.detail< 0) {
console.log('上滚')

}

}
}
/* IE、Opera注册事件 */
if(document.attachEvent){
document.attachEvent('onmousewheel',scrollFn);
}
// Firefox 使用 addEventListener 添加滚轮事件

if (document.addEventListener) {
document.addEventListener('DOMMouseScroll', scrollFn, false);

}

// Safari 与 Chrome 属于同一类型
window.onmousewheel = document.onmousewheel = scrollFn;

常用事件

keyCode

心得体会

今天对之前学习的BOM进行了一定的复习，并且把剩下的event进行了学习，完成了BOM的学习，至此JavaScript基础的内容算是告一段落了，但是后面还有非常多的内容，并且自己是选择的Java全栈方向，还有java的内容需要学习，今天返回正式学习的第一天，每天的时间非常紧迫，需要学习新知识，需要练习，需要复习学过的知识，需要做老师布置的项目和作业，需要做学校的项目作业，需要自学知识，需要处理学校的杂事等等，感觉自己一下好像被压倒了，有点喘不过气来，身体疲惫不堪，希望能够调整好状态。