内容回顾
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内容发生变化,那么对应的页面就会重新渲染。会造成大量的重绘和回流。(后续dom操作要被舍弃(效率))
重绘和回流(回流必定重绘)
-
重绘对应一个元素操作(不改变它的宽高和对应的位置 改变的是其他的样式)
-
回流对应的元素操作(改变对应的元素所有的内容 宽高和对应的位置都会发生变化)
事件
概述:
事件是一个异步机制,它相当于一个观察者---执行者执行---观察者观察---处理函数执行。这个流程称为事件
事件的组成
-
事件名(内置的)
-
执行对象(元素对象)
-
处理函数(自定义函数)
-
观察者(js的事件引擎)
例子:
我去便利店买烟,老板告诉我没货了,我跟老板说有货了再通知我。货来了老板通知了我,我去买了。
分析:
事件名---买烟
执行者---我
观察者---老板
处理---买
示例
<button>点击</button>
button.onclick = function(){
console.log('点击了')
}
事件名 click(内置的)
执行对象 button(元素对象)
处理函数 后续的函数(自定义函数)
观察者(js引擎 事件引擎)
在js内书写的事件,它的观察者都是事件引擎。我们需要关注的就是前面的三个内容(事件名、执行对象、处理函数)
事件的声明书写方式
内联模式(在标签内部)
<!--内联模式就是在onclick书写中设置对应的代码-->
<button onclick = "alert('你好')">点我</button>
<button onclick = "fn(1)">点我</button>
<script>
function fn(arg){
alert('我是函数执行'+arg);
}
</script>
脚本模式(在script中 常用)
//脚本模式的写法 事件名 执行对象 处理函数
var btn = document.getElementsByTagName('button')[2]
//执行对象.on+事件名 = 处理函数
btn.onclick = function(){
console.log('你好');
}
function handler(){
console.log('处理函数执行了');
}
btn.onclick = handler
内联模式和脚本模式的区别
-
内联模式里面的函数需要手动调用 而对应的脚本的模式的处理函数自动调用
-
内联模式里面的函数调用的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子元素会触发)
<div>
我是一个div
<p>你好</p>
</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('鼠标弹起');
}
//鼠标的移进和移出
//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('在widow上触发了keypress事件');
}
</script>
注意事项
-
执行顺序keydown - keypress- keyup
-
keypress 一定会触发 keydown
HTML事件(HTML中自带的一些事件(只能用于专门HTML))
window的事件
-
加载事件 (load)
-
卸载事件 (unload)
-
关闭窗口的事件 (onclose)
-
打印之前调用的事件 (onbeforeprint)
-
卸载之前调用的事件 (onbeforeunload)
-
滚动栏发生变化的事件(onscroll)
//加载事件
window.onload = function(){
console.log('hello');
}
//卸载事件(刷新)
window.onunload = function(){
console.log('卸载');
}
//关闭窗口事件 (清除相关缓存和对应的资源操作)
window.onclose = function(){
console.log('关闭');
}
//打印之前调用 调用print方法之前 更改打印的然后继续打印
window.onbeforeprint = function(){
console.log('打印了');
}
//在卸载之前调用 将一些内容回收
window.onbrforeunload = 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的滚动栏滚动了');
}
表单的事件
-
submit 表单提交事件
-
reset 表单重置事件
-
select 内容被选中(只针对输入框和文本域)
-
change 表单的value值发生变化
-
input 可输入的表单标签里面进行输入
-
blur 失去焦点
-
focus 获取焦点
//表单相关的事件
//加给整个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 选择里面的内容
ducoment.querySelector('input').onselect = function(){
console.log('选择值了');
}
//失去焦点
document.querySelector('input'.onblur) = function(){
console.log('失去焦点了');
}
//聚焦
document.querySelector('input').onfocus = function(){
console.log('获取焦点了');
}
相关聚焦和失焦的方法
-
focus 聚焦的方法
-
blur 失焦的方法
//element也具备focus()blur()
document.querySelector('input').focus()
setTimeout(function(){
document.querySelector('input').blur()
},3000)
event 事件源对象
概述
event 被称为事件源对象,它是一个全局的内置对象(属于window),它里面包含了一些关于事件执行的相关的属性。
处理函数中arguments
处理函数也是一个函数,函数就具备一个arguments的属性。argument是一个伪数组,那么就可以知道对应的处理函数里面也拥有arguments
var btn = ducoment.querySelector('button')
btn.onclick = function(){
//点击事件触发以后对应的arguments里面有一个对应的pointEvent的对象
console.log('arguments',arguments);
console.log('argument[0]',arguments[0]);
//这个对象是在arguments里面存在第一位里面以属性为主,那么这个对象表示什么
//这个参数其实就对应的事件的一些内容 称为事件源对象 event
}
window.onkeydown = function(){
console.log('arguments',arguments);
//keyboardEvent 键盘的事件源对象
console.log('argument[0]',argument[0]);
}
从上述代码可得到对应的事件执行的处理函数里面会传递一个参数,这个参数的类型是一个event。这个处理函数的arguments数组里面只有一个元素
故而我们可以简写为
//这个地方的e 一般写作 e 或者是 event
btn.onclick = function(e){
//这个地方的e表示是第一个参数 也就是对应的event对象 这个event在这个里面有兼容问题
//兼容写法
e = e || window.event
//这个e表示的就是第一个参数 那么它也就是我们对应的event对象
console.log(`e`,e);
}
enent的常用属性
鼠标坐标的相关属性
-
screenX 表示鼠标离屏幕的X距离
-
screenY 表示鼠标离屏幕的Y距离
-
pageX 表示当前的鼠标离页面的X距离(包含卷起的部分)
-
pageY 表示当前的鼠标离页面的Y距离 (包含卷起的部分)
-
clientX 表示鼠标离页面可视区的X距离
-
clientY 表示鼠标离页面可视区的Y距离
-
offsetX 表示鼠标离父元素偏移的X距离
-
offsetY 表示鼠标离父元素偏移的Y距离
按钮辅助的相关属性
-
ctrlKey 是否按下了ctrl键
-
altKey 是否按下了alt键
-
shiftKey 是否按下了shift
//辅助的按键属性 返回布尔类型值
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 表示当前事件的触发对象
-
currentTarget 表示加事件的元素
//触发者元素
console.log(e.target);
//加事件的元素
console.log(e.currentTarget);
键盘相关的属性
-
key 表示当前按下的键的字符(区分大小写)
-
keyCode(在keydown里面 不区分大小 全部是大写的ASCLL码)
-
code (key+大写的字符)
-
charCode (在keypress里面才管用 它区分大小写 返回对应的ASCLL码)
window.onkeypress = function(e){
console.log(e.code);//当前的按钮按下键是哪一个 返回的是一个key+大写字母
console.log(e.keyCode);//当前按下键的大写字母 ASCLL码
console.log(e.charCode);//当前字符的ASCLL码 keypress里面
console.log(e.key);//表示当前按下的键(兼容问题)
}
事件委托机制(事件代理)
概述:将对应的事件委托给对应的元素,然后通过对应的e.target获取实际的触发元素进行操作。
示例
//事件委托的写法
//获取需要加事件的父元素
var ul = document.querySelector('ul')
//给ul添加事件
//给父元素添加事件
//在内部判断触发元素 e.target
//对应执行操作
ul.onclick = function(e){
e = e || window.event
//判断当前触发元素是否为li
if(e.target.tagName == 'LI'){
//排他思想
//把所有的li的calss清除
for(var item of this.children){
item.className = ''
}
e.target.className = 'active'
}
}
事件委托的运用场景
在一个父元素里面有多个子元素要添加相同的事件的时候