day11DOM和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 、avaiWidth 、avaiheight...
-
navigator : 导航对象
属性 : userAgent
-
frames : 窗口 ( window )
DOM ( document object model ) 文档对象模型
-
document 文档对象
-
element 元素对象
-
attribute 属性对象
-
text 文本对象
dom里面的知识点
-
空文本 ( 换行符 、制表符 、空格... ) 也是一个文本节点
-
属性如果是自身自带的属性,可以直接点出来 ( input.value 、img.src 、a.href ... ) ,如果不是自带的就不可以点出来
-
dom会操作对应的html的内容 , 当你的html内容发生了变化 , 页面就会重新渲染 , 会造成大量的重绘和回流 . ( 后续dom操作要被舍弃 ( 因为重绘和回流都需要时间加载,会导致效率变低 ) )
重绘和回流 ( 回流必定会重绘 , 重绘不一定会引发回流 )
-
重绘就是对一个元素进行操作 , 而不改变它的宽高和位置 , 只改变其样式
-
回流就是对元素进行操作 , 会改变了它所有的内容 , 宽高和位置都会发生变化
事件
概述 :
事件是一个异步机制 , 它相当于是一个 执行者执行 -- 观察者观察 -- 处理函数执行 的这个过程称为事件
事件的组成 :
-
事件名 ( 内置的 )
-
执行对象 ( 元素对象 )
-
处理函数 ( 自定义函数 )
-
观察者 ( js的事件引擎 )
示例 :
<button>点击</button> <script> var btn=document.querySelector('button') btn.onclick=function(){ //事件名:click ,执行对象:btn ,处理函数function(){} console.log('点击了'); } </script>
注意 : 在js内书写的事件,它的观察者都是js事件引擎 , 故我们需要关注的就是前面三个内容 ( 事件名 、执行对象 、处理函数)
事件的声明 / 书写方式
内联模式 ( 在标签内部 )
<!-- 内联模式就是在onclick中书写js代码 --> <button onclick="alert('侬好呀')">内联方式1</button> <button onclick="fn(11)">内联方式2</button> <script> function fn(arr) { alert('Aloha' + arr)//Aloha11 console.log(this);//window } </script>
// 脚本模式的写法 (事件名、执行对象、处理函数) var btn = document.getElementsByTagName('button')[3] //执行对象 .on+事件名 = 处理函数 btn.onclick = function () { alert('脚本模式1') console.log(this);//当前执行者(btn) } function of() { alert('我把脚本模式1替换了') console.log(this)//当前执行者(btn) } btn.onclick = of
内联模式和脚本模式的区别:
-
内联模式的函数需要手动调用 , 要加括号 , 脚本模式的函数会自动执行
-
内联模式的this指向window , 脚本模式的this指向当前执行者
事件名的分类
鼠标事件 ( 鼠标触发的,mouse )
-
click 单击事件
-
dblclick 双击事件
-
onmousedown 按下
-
mouseup 松开
-
mouseenter 移入
-
mouseleave 移出
-
mouseover 移入
-
mouseout 移出
-
mousemove 移动
-
contextmenu 右键点击
注意事项
-
click 和 ( mousedown 、mouseup ) 的执行顺序 ( mousedown-->mouseup-->click )
-
( mouseenter 、mouseleave ) 和 ( mouseover 、mouseout ) 的区别 :
前者进入子元素不会触发子元素,后者进入子元素会触发子元素
<div>我是一个div <span>你好</span> </div> <script> // 获取div var div=document.querySelector('div') // 脚本模式 (元素对象.on+事件名称=处理函数) div.onclick=function(){ console.log('单击事件被执行了'); } // 双击事件必定会触发单击事件 div.ondblclick=function(){ console.log('双击事件被执行了'); } // 执行顺序 按下-->松开-->点击 div.onmousedown=function(){ console.log('鼠标按下'); } div.onmouseup=function(){ console.log('鼠标松开'); } // 鼠标移入移出:进入子元素不会触发 // mouseenter和mouseleave div.onmouseenter=function(){ console.log('鼠标移入:不会触发子元素'); } div.onmouseleave=function(){ console.log('鼠标移出:不会触发子元素'); } // 鼠标移入和移出:进入子元素会触发 //mouseover和mouseout div.onmouseover=function(){ console.log('鼠标移入:会触发子元素'); } div.onmouseout=function(){ console.log('鼠标移出:会触发子元素'); } // 鼠标点击右键(点击事件不会触发) div.ontextmenu=function(){ console.log('鼠标右键触发了'); } // 鼠标移动就触发 div.onmousemove = function () { console.log('鼠标移动就触发'); } </script>
键盘事件 ( 键盘触发的 key )
-
keydown 按下
-
keyup 松开
-
keypress 字符键 ( 除功能键的其他键 )
<input type="text"> <script> // 获取输入框 var input = document.getElementsByTagName('input')[0] // 键盘相关事件 // 键盘按下 input.onkeydown = function () { console.log('键盘按下就会触发') } // 键盘松开 input.onkeyup = function () { console.log('键盘松开就会触发') } // 字符键按下(除了功能键的其他键) window.onkeypress = function () { console.log('在window上按下字符键就会触发') } </script>
注意事项 :
-
执行顺序 keydown --> keypress --> keyup
-
keypress一定会触发keydown
HTML事件 ( HTML中一些自带的事件 ( 只能用于专门的HTML上 ) )
window的事件
-
加载事件 ( load )
-
卸载事件 ( unload )
-
关闭窗口事件 ( close )
-
打印之前的事件 ( beforeprint )
-
卸载之前的事件 ( beforeunload )
-
滚动栏滚动事件 ( scroll )
<style> div{ width: 100px; height: 100px; overflow: scroll; } </style> <body style="height:3000px"> <div> <p>111</p> <p>111</p> <p>111</p> <p>111</p> <p>111</p> <p>111</p> </div> </body> <script> //加载事件 window.onload = function () { console.log('hello') } // 卸载事件(刷新可看到效果) window.onunload = function () { console.log('卸载') } // 关闭窗口事件 (可清除相关缓存和对应的资源操作) window.onclose = function () { console.log('关闭窗口'); } // 打印之前调用 调用print之前,可更改打印的内容,然后再继续打印 window.onbeforeprint = function () { console.log('打印了') } // 卸载之前调用 可以将一些内容回收 window.onunload = function () { console.log('卸载之前调用') } // 滚动栏滚动 window.onscroll = function () { console.log('滚动栏发生了变化') } // 加载事件的其他使用 var img = new Image() //构建一个图片对象 img.onload = function () { img.src = '图片地址' //图片加载好了就设置src地址 } // 滚动栏滚动事件的其他使用 document.querySelector('div').onscroll = function () { console.log('div的滚动栏滚动了') } </script>
表单的事件
-
submit 表单提交事件
-
reset 表单重置事件
-
select 选中内容事件 ( 只针对文本框和文本域[input和textarea] )
-
change 表单的value值发生变化
-
input 输入事件
-
blur 失去焦点
-
focus 聚焦
<form action=""> <input type="text"> <button>提交</button> <button type="reset">重置</button> </form> <script> // 表单相关元素 // 获取表单 var forms = document.forms[0] var input = document.querySelector('input') // 提交事件 forms[1].onclick = function () { console.log('触发了提交事件') } // 重置事件 forms[2].onreset = function () { console.log('触发了重置事件') } // change事件 value值发生了变化,然后失去焦点才触发 input.onchange = function () { console.log('值发生变化了') } // input事件 输入内容就触发 input.oninput=function(){ console.log('input事件触发了') } // select 选中事件 input.onselect=function(){ console.log('恭喜选中成功,啥也没有~') } // 失去焦点事件 input.onblur=function(){ console.log('失去焦点咯,搞虾米') } // 聚焦事件 input.onfocus=function(){ console.log('聚焦啦~') } </script>
相关聚焦和失焦的方法
-
focous 聚焦的方法
-
blur 失焦的方法
<input type="text"> <script> // element也具备 focus() blur() var input = document.querySelector('input') // 获取input框的光焦,再3秒后失去光焦 input.focus() setTimeout(function () { input.blur() }, 3000) </script>
event事件源对象
概述 :
event被称为事件源对象,它是一个全局的内置对象 ( 属于window ) ,它里面包含了一些关于事件执行的属性 .
事件里的处理函数也是一个函数 , 函数就具备一个arguments的属性 , 它是一个伪数组 ,里面有event事件源
<button>点我</button> <script> var btn = document.querySelector('button') btn.onclick = function () { // 每个事件执行的处理函数都有一个arguments属性,它会传递一个参数,这个参数的类型是Event,这个arguments数组里只有这一个元素 // 点击事件触发后,里面的arguments数组里有一个pointEvent的对象 console.log(arguments) //pointEvent 鼠标的事件源对象 console.log(arguments[0]) // 这个对象是存在arguments里的第一位,里面以属性为主,它就是事件的一些内容,称之为事件源对象,event } // 键盘事件需要在window中才能执行 window.onkeydown = function () { console.log(arguments) //keyboardEvent 键盘的事件源对象 console.log(arguments[0]) } </script>
从上述代码可得到 对应的事件执行的处理函数里面会传递一个参数,这个参数的类型是一个event,这个处理函数的arguments数组里面只有这一个元素
故而我们可以简写为
<button>点我</button> <script> var btn = document.querySelector('button') //这个地方的e 一般写成 e 或者是event btn.onclick = function (e) { //这个地方的e表示的是第一个参数,也就是对应的event对象,它有兼容问题 //兼容写法 e = e || window.event console.log(e) } </script>
event的常用属性
鼠标坐标的相关属性
-
screenX 表示的是鼠标离屏幕的X轴距离
-
screenY 表示的是鼠标离屏幕的Y轴距离
-
pageX 表示的是鼠标离页面的X轴距离 ( 包括滚轮栏被卷起的部分 )
-
pageY 表示的是鼠标离页面的Y轴距离 ( 包括滚轮栏被卷起的部分 )
-
clientX 表示的是鼠标离可视区域的X轴距离
-
clientY 表示的是鼠标离可视区域的Y轴距离
-
offsetX 表示的是鼠标离父元素(有定位的元素)偏移的X轴距离
-
offsetY 表示的是鼠标离父元素(有定位的元素)偏移的Y轴距离
按钮辅助的相关属性
-
ctrlkey
-
altkey
-
shiftkey
//辅助的案件属性 返回的是布尔类型的值 console.log(e.ctrlkey) //是否长按ctrl键 console.log(e.shiftkey) //是否长按shift键 console.log(e.altkey) //是否长按alt键
鼠标相关的属性
-
button 按下的是哪个键 ( 鼠标 )
//按下的是哪个键 一共三个值 0,1,2 console.log(e.button); //左键0,中间1,右键2
事件及相关触发的属性
-
type 检测当前的事件类型
//检测事件类型,返回事件名 console.log(e.type)
-
-
currentTarget 表示添加这个事件的元素
//触发者元素 console.log(e.target) //添加这个事件的元素 console.log(e.currentTarget)
键盘相关的属性
-
key : 表示当前按下的键 ( 区分大小写 )
-
keycode : 应在keydown事件里 , 不区分大小写 , 返回的都是当前按下键的大写字母的ascii码
-
code : 表示当前按下的键 , 返回的是key+键的大写字母
-
charCode : 在keypress才管用 , 区分大小写 , 返回的是对应的ascii码
window.onkeydown = function (e) { console.log(e.code) //当前按下的键,返回的是一个key+键的大写字母 console.log(e.keyCode) //当前按下键的大写字母的ascii码 console.log(e.charCode) //只能再在keypress才有用,返回当前按下键的ascii码 console.log(e.key) //表示当前按下的键 (有兼容问题) }
事件委托机制 ( 事件代理 )
概述 : 将事件委托给它的父元素,然后通过e.target获取实际的触发元素进行操作
<style> .active { color: aqua; background-color: #ccc; } </style> <body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <script> // 事件委托的写法 // 首先获取需要加委托事件的父元素 var ul = document.querySelector('ul') // 给父元素添加事件 // 在内部判断触发元素 e.target 再进行操作 ul.onclick = function (e) { e = e || window.event if (e.target.tagName == 'LI') { // 排他思想 // 把所有为li标签名的class删除 for (var item of this.children) { item.className = '' } // 点击的li标签设置class实现样式 e.target.className = 'active' } } </script> </body>
事件委托的运用场景
在一个父元素里面有多个子元素要添加相同的事件的时候
浙公网安备 33010602011771号