20200914 王维

学习总结

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的内容需要学习,今天返回正式学习的第一天,每天的时间非常紧迫,需要学习新知识,需要练习,需要复习学过的知识,需要做老师布置的项目和作业,需要做学校的项目作业,需要自学知识,需要处理学校的杂事等等,感觉自己一下好像被压倒了,有点喘不过气来,身体疲惫不堪,希望能够调整好状态。

评论

this is is footer