DOM和BOM总结及事件内容

DOM和BOM总结

BOM（bowser object model）浏览器对象模型

window 窗口对象（全局的变量及函数都是属于window（global对象））
location 地址栏对象（获取地址栏内容使用地址栏跳转页面）

属性：hash、search、host、hostname、pathname、port、protocol、origin、href

方法：assign、replace

history 历史对象

属性：state、length

方法：forward、back、go、pushState、replaceState

screen 屏幕对象

属性：width、height、availWidth、availHeight...

navigator 导航对象

属性：userAgent

frames 窗口（window）

DOM（document object model）文档对象模型

document 文档对象（整个html文档）
element 元素对象（所有的标签）
attribute 属性对象（所有标签里面的属性）
text 文本对象（显示的文本）

dom里面的知识点：

空文本（换行符、制表符、空格...）也是一个文本节点
属性如果是自身自带的属性可以直接 . 出来（input.value、img.src、a.href...)如果不是就不能点出来。
dom会操作对应的HTML内容、当你的html内容、当你的html内容发生变化、那么对应的页面就会重新渲染。会造成大量的重绘和回流。（后续的dom操作要被舍弃（效率））

重绘和回流（回流必定重绘）

重绘对应一个元素操作（不改变它的宽高和对应的位置而改变其他的样式）
回流对应的元素操作（改变对应的元素所有的内容宽高和对应的位置都会发生变化）

事件

概述：

事件是一个异步机制。它相当于一个执行者执行---观察者---处理函数执行这个流程称之为事件

事件的组成

事件名（内置的）
执行对象（元素对象）
处理函数（自定义函数）
观察者（js的时间引擎）

例子

我去便利店买包华子，老板告诉我没货。我跟老板说等有货通知我。货来了老板就通知我了，我就去买了。

分析

事件名 ---- 买华子

执行者 ---- 我

观察者 --- 老板

处理 --- 买了华子

示例

<button>点击</button>
<script>
button.onclick = function(){console.log('点击了')
}
</script>

事件名 click（内置的）

执行对象 button（元素对象）

处理函数后续的函数（自定义函数）

观察者（js引擎事件线程(引擎)）

在js内书写的事件它的观察者都是事件引擎。我们需要关注的就是前面三个内容（事件名、执行对象、处理函数）

事件的声明书写方式

内联模式（在标签内部）

<!--内联模式就是在onclick书写中设置对应的代码-->
<button onclick="alert('hello')">点我</button>
<button onclick="fn(1)">点我1</button>
<!-- 注：内联模式下调用函数需要手动调用，需要将函数名深厚的'()'带上 -->
<script>function fn(arg){alert('我是函数执行'+arg)console.log(this);//window}
</script>

脚本模式（在script标签内常用）

<!--脚本模式-->
<button>脚本模式</button>
<script>//脚本模式的写法 事件名 执行对象 处理函数var btn = document.getElementsByTagName('button')[2]//执行对象.on+事件名 = 处理函数btn.onclick = function(){console.log('hello');}function handler(){console.log('处理函数执行了');}//在脚本模式里调用函数不需要手动调用，只需要将对应的函数名赋值给对应的点击事件就可以调用了，如下所示：btn.onclick = handler//内联模式里面的函数调用的this指向window 对应的脚本模式里面的this指向当前的调用者
</script>
内联模式和脚本模式的区别

内联模式下调用函数需要手动调用而对应的脚本的模式的处理函数是自动调用的
内联模式里面的函数调用的this指向window 对应的脚本模式里面的this指向当前的调用者

事件名分类

鼠标事件（鼠标触发的 mouse）

click 点击事件
dblclick 双击事件
mousedown 按下
mouseup 弹起
mouseenter 移入
mouseleave 移出
mouseover 移入
mouseout 移出
mousemove 移动
contextmenu 右键点击

注意事项

click和对应的mousedown和mouseup的执行顺序（mousedown -- mouseup -- click）
mouseenter(mouseleave)和mouseover(mouseout)的区别（mouseenter 子元素不会触发mouseover子元素会触发）

<style type="text/css">div{background-color: red;width: 100px;height: 100px;}
</style>
<div>我是一个div<div style="background-color:yellow;height:50px;width:50px;float:left"></div></div><script>//获取divvar div = document.querySelectorAll('div')[0]//脚本模式div.onclick = function(){console.log('单击事件执行了');}//双击事件必定触发单击div.ondblclick = function(){console.log('双击事件执行了');}//鼠标的按下和弹起 执行顺序 按下 -- 弹起 -- 单击div.onmousedown = function(){console.log('鼠标按下')}div.onmouseup = function(){console.log('鼠标弹起');}//鼠标的移进和移出//enter和leave 进入子元素不会触发div.onmouseenter = function(){console.log('鼠标移入了');}div.onmouseleave = function(){console.log('鼠标移出了');}//over和out 进入子元素也会触发div.onmouseover = function(){console.log('鼠标over移入了');}div.onmouseout = function(){console.log('鼠标out移出了');}//鼠标的移动div.onmousemove = function(){console.log('鼠标移动了');}//鼠标点击右键（点击事件不会触发）div.oncontextmenu = function(){console.log('鼠标右键点击了');}</script>

键盘事件（键盘触发的 key）

keydown 按下

keyup 弹起

keypress 字符串（除功能键的其他键）

<input type="text" />
<script>//获取输入框var input = document.querySelector('input')//键盘相关事件input.onkeydown = function(){console.log('键盘按下');}//在input 中文输入状态下弹起会出现两次input.onkeyup = function(){console.log('键盘弹起');}//字符键按下（除了功能键）input.onkeypress = function(){console.log('字符键按下');}window.onkeypress = function(){console.log('在window上触发了keypress事件');}
</script>

注意事项

执行顺序 keydown -- keypress -- keyup
keypress一定会触发keydown

HTML事件（HTML中自带的一些事件（只能用于专门的HTML））

window的事件

加载事件（load）
卸载事件（unload）
关闭窗口事件（onclose）
打印之前调用的事件（onbeforeprint）
卸载之前调用的事件（onbeforeunload）
滚动栏发生变化的事件（onscroll）

<style type="text/css">div{height: 100px;width: 100px;overflow: scroll;}
</style>
<body style="height:3000px"><div><p>1111111</p><p>1111111</p><p>1111111</p><p>1111111</p><p>1111111</p><p>1111111</p><p>1111111</p><p>1111111</p><p>1111111</p><p>1111111</p></div><form action=""><input type="text" /><button type="submit">提交</button><button type="reset">重置</button></form><script>//加载事件window.onload = function(){console.log('hello');}//卸载事件 （刷新）window.onunload =function(){console.log('卸载');}//关闭窗口事件 （清楚相关缓存和对应的资源操作）window.onclose = function(){console.log('关闭');}//打印之前调用 调用print方法之前 能做到更改打印的内容再继续打印window.onbeforeprint = function(){console.log('打印了');}//在卸载之前调用 将一些内容回收window.onbeforeunload = function(){console.log('卸载之前');}//滚动栏滚动window.onscroll = function(){console.log('滚动栏的位置发生变化');}//加载事件的其他使用var image = new Image()//构建一个图片对象image.onload = function(){//如果图片加载好了image.src = '图片地址'//给图片设置对应的src地址}//onscroll的其他使用document.querySelector('div').onscroll = function(){console.log('div的滚动栏滚动了');}</script>
</body>

表单的事件

submit 表单提交事件
reset表单重置事件
select 内容被选中（只针对输入框和文本域）
change 表单的value值发生变化
input 可输入的表单标签里面进行输入
blur 失去焦点
focus 获取焦点

<style type="text/css">div{height: 100px;width: 100px;overflow: scroll;}
</style>
<body style="height:3000px"><div><p>1111111</p><p>1111111</p><p>1111111</p><p>1111111</p><p>1111111</p><p>1111111</p><p>1111111</p><p>1111111</p><p>1111111</p><p>1111111</p></div><form action=""><input type="text" /><button type="submit">提交</button><button type="reset">重置</button></form><script>//表单相关的事件//加给整个form表单的事件document.forms[0].onsubmit = function(){console.log('提交了');}document.forms[0].onreset = function(){console.log('重置了');}//change value值发生变化 失去焦点document.querySelector('input').onchange = function(){console.log('值变化了');}//input 输入对应的值的时候调用document.querySelector('input').oninput = function(){console.log('输入值');}//select 选择里面的内容document.querySelector('input').onselect = function(){console.log('选择值了');}//失去焦点document.querySelector('input').onblur = function(){console.log('失去焦点了');}//聚焦document.querySelector('input').onfocus = function(){console.log('获取焦点了');}</script>
</body>

event事件源对象

概述

event被称为事件源对象，他是一个全局的内置对象（属于window），他里面包含了一些关于事件执行的相关的属性。

处理函数中Arguments

处理函数也是一个函数，函数就具备一个arguments的属性。arguments是一个伪数组。那么就可以知道对应的处理函数里面也拥有arguments

var btn = document.querySelector('button')
btn.onclick = function(){//点击事件触发以后对应的arguments里面有一个对应的pointerEvent的对象console.log('arguments',arguments);console.log(`arguments[0]`,arguments[0]);//这个对象实在arguments里面存在第一位里面以属性为主 那么这个对象表示什么//这个参数其实就是对应的事件的一些内容 称为事件源对象 event
}
window.onkeydown = function(){console.log('arguments',arguments);//keyboardEvent 键盘的的事件源对象console.log(`arguments[0]`,arguments[0]);
}

从上述代码可得到对应的事件执行的处理函数里面会传递一个参数，这个参数的类型是一个event。这个处理函数的arguments数组里面只有一个元素。

故而我们可以简写为

//这个地方的e 一般写做 e 或者是 event
btn.onclick = function(e){//这个地方的e表示的是第一个参数 也就是对应的event对象 这个event在这个里面有兼容问题//兼容写法e = e || window.event//这个e表示的就是第一个参数 那么他也就是我们对应的event对象console.log(`e`,e);
}

event的常用属性

鼠标坐标的相关属性

screenX 表示鼠标离屏幕的x距离

screenY 表示鼠标离屏幕的y距离

pageX 表示当前的鼠标离页面的x距离（包含卷起的部分）

pageY 表示当前的鼠标离页面的y距离（包含卷起的部分）

clientX 表示鼠标离页面可视区的x距离

clientY 表示鼠标离页面可视区的y距离

offsetX 表示鼠标离父元素偏移的x距离

offsetY 表示鼠标离父元素偏移的y距离

按钮辅助的相关属性

ctrlKey 是否按下了ctrl键
shiftKey 是否按下了shift键
altKey 是否按下了alt键

//辅助的按键属性 返回布尔类型值
console.log(e.ctrlKey);//是否长按ctrl
console.log(e.altKey);//是否长按alt
console.log(e.shiftKey);//是否长按shift

鼠标相关属性

button 按下是哪个键

//按下的键是什么 三个值 0 1 2
console.log(e.button);左键0 中间滚轮1 右键2

事件及相关触发属性

type 当前的属性类型

//事件类型 返回事件名
console.log(e.type);//click

target 表示当前事件的触发对象

//触发者元素
console.log(e.target);
//加事件的元素
console.log(e.currentTarget);

键盘相关属性

key 表示当前按下的键的字符（区分大小写）

keyCode（在keydown里面不区分大小全部是大写的ascii码）

code（key+大写的字符）

charCode（在keypress里面才管用他区分大小写返回对应的ascii码）

window.onkeypress = function(){console.log(e.code);//当前的按钮按下键是哪一个 返回的是一个key+大写字母console.log(e.keyCode);//当前按下键的大写字母 ascii码console.log(e.charCode);//当前字符的ascii码 keypress里面console.log(e.key);//表示当前按下的键
}

事件委托机制（事件代理）

概述：将对应事件委托给对应的父元素，然后通过对应的e.target获取实际的触发元素进行操作。

示例

//事件委托的写法
//获取需要加事件的父元素
var ul = document.querySelector('ul')
//给ul添加事件
//给父元素添加事件
//在内部判断触发元素 e.target
//对应执行操作
ul.onclick = function(){e = e || window.event//判断当前出发元素是否为liif(e.target.tagName == 'LI'){//排他思想//把所有的li的class清除for (var item of this.children){item.className = ''}e.target.className = 'active'}
}

事件委托的运用场景

在一个父元素里面有多个子元素要添加相同的事件的时候