20200914-叶梦宇-

学习心得

BOM（兼容性差）

window

代替ES中的global充当全局作用域对象
var a=10;
window.a;

包含所有ES+DOM+BOM的对象和函数
window.Array
window.document
window.alert()
window还代表当前窗口的信息，也能操作当前窗口
完整窗口大小
window.outerWidth
window.outerHeight
仅用于显示网页区域的大小
window.innerWidth
window.innerHeight

    关闭窗口
        /*window.*/close()
    打开窗口
        /*window.*/open("url","name")
            name
                自定义名称
                    在新窗口打开，只能打开一个
                        _blank
                            不指定窗口名，每次都让浏览器生成随机不重复的窗口名，在新窗口打开，可以打开多个
                        _self
                            用当前窗口自己的name，打开新连接，新窗口会替换当前窗口，在当前窗口打开，可进退
            width
                打开新窗口的宽度
            height
                打开新窗口的高度
            toolbar
                新窗口是否显示工具栏
                    yes/1
                    no/0
            titlebar
                新窗口是否显示标题栏
                    yes/1
                    no/0
            left
                新窗口距离左边界的像素
            right
                新窗口距离右边界的像素
            menubar
                新窗口中是否显示菜单栏
                    yes/1
                    no/0
            srcollbar
                新窗口中是否显示滚动条
                    yes/1
                    no/0
            fullscreen
                新窗口是否全屏显示
                    yes/1
                    no/0
            resizable
                新窗口是否可以调整大小
                    yes/1
                    no/0

事件

注意：console.log.dir(元素对象)，可以查看元素上绑定 的事件。

一个事件仅绑定一个处理函数

elem.on事件名=function(){
//this->elem
}
问题
一个事件只能绑定一个处理函数
不能被remove移除掉，只能onXXX=null
只能移除由onXXX绑定的事件处理函数
无法移除addEventListener绑定的事件处理函数

一个事件可绑定多个处理函数

elem.addEventListener("事件名",fn);
elem.removeEventListener("事件名",fn)

注意：bom中的标准事件名是没有on的，所以 事件名是不能写on的。click。mouseover等等。

如果一个处理函数可能被移除，在绑定时不能使用匿名函数，必须使用有名的函数

DOM的事件模型的三个阶段

捕获
由外向内, 记录各级父元素绑定的事件处理函数，只记录，不执行
目标触发
优先触发目标元素上的事件处理函数
冒泡
由内向外, 反向依次触发捕获阶段记录的事件处理函数

注意：如何阻止冒泡， function(e){
e. stopPropagation();
}

事件对象

事件发生时自动创建，封装事件信息的，并提供操作事件的API的对象。

事件问题

浏览器触发事件，采用的是遍历所有事件监听对象的方式

如果事件监听越多，遍历时间越长，响应事件就越慢

优化

尽量少的添加事件监听
如果多个平级子元素绑定相同的事件监听，则只需在父元素绑定一次，所有子元素共用
e.target获取子元素
不随冒泡而改变
如何筛选目标元素
元素名nodeName

取消事件/阻止默认行为

​ e.preventDefault()
​ 什么时候使用？
​ 阻止<a href="#xxx" 修改url
​ 在表单的onsubmit事件结尾阻止表单提交
​ 用H5拖拽API，需要先禁用浏览器默认的拖拽行为

事件坐标

​ 相对于显示屏的左上角（不是网页的）
​ e.screenX/screenY
​ 相对于网页的左上角
​ e.clientX/clientY
​ 相对于触发事件元素的左上角
​ e.offsetX/offsetY

页面滚动

​ 事件
​ window.onscroll
​ 获得页面滚动过的高度
​ document.body.scrollTop
​ document.documentElement.scrollTop
​ 方法
​ window.scrollBy(left的增量，top的增量)
​ window.scrollTo(left,top)

鼠标滚动

兼容性不好

不同的浏览器有不同的写法

firefox和IE是向下滚是负数，向上滚动是正数，

事件监听 滚轮事件

谷歌 addEventListener onmousewheel

IE attachEvent onmousewheel

FF addEventListener DOMMouseScroll

谷歌的

window.onmousewheel=document.onmousewheel=function(e){
if(e.wheelDelta>0){
console.log("向上滚动")
}else{
console.log("向下滚动")
}
}

火狐的

document.addEventListener('DOMMouseScroll',function(e){
if(e.detail>0){
console.log("向下滚动")
}else{
console.log("向上滚动")
}
},false)

学习心得

马上就要分班了，以后就更注重前端发展了，马上就要学习更高端的内容了，希望自己能跟上。