事件三要素
事件三要素
1. 事件源: 绑定在谁身上的事件(和谁约定好)
2. 事件类型: 绑定一个什么事件
3. 事件处理函数: 当行为发生的时候, 要执行哪一个函数
<body>
<div></div>
<script>
var div=document.querySelector('div')
div.onclick=function(){
console.log('我要点击了')
}
// div:事件源,把事件绑定在谁身上
// click:事件类型,需要绑定一个什么样的事件
// function(){}:事件处理函数,当行为发生在什么时候,要执行哪个函数
</script>
常见的事件类型
1.鼠标事件
都是一些和鼠标相关的事件:
click 点击事件
dblclick 双击事件
contextmenu 右键单击事件
mousedown 鼠标按下
mouseup 鼠标抬起
mousemove 鼠标移动
mouseover 鼠标移入
mouseout 鼠标移出
mouseenter 鼠标移入
mouseleave 鼠标移出
<body>
<div></div>
<script>
var div=document.querySelector('div')
// 1.鼠标事件
// click 点击事件
div.onclick=function(){console.log('我要开始点击了')}
// dblclick 双击事件
div.ondblclick=function(){console.log('双击事件')}
// contextmenu 右键单击事件
div.oncontextmenu=function(){console.log('右键单击事件')}
// mousedown 鼠标按下
div.onmousedown=function(){console.log('鼠标按下')}
// mouseup 鼠标按下
div.onmouseup=function(){console.log('鼠标抬起')}
// mousemove 鼠标移动
div.onmousemove=function(){console.log('鼠标移动')}
// mouseover 鼠标移入
div.onmouseover=function(){console.log('鼠标移入')}
// mouseout 鼠标移出
div.onmouseout=function(){console.log('鼠标移出')}
// mouseenter 鼠标移入
div.onmouseenter=function(){console.log('鼠标移入')}
// mouseleave 鼠标移出
div.onmouseleave=function(){console.log('鼠标移出')}
</script>
</body>
2.键盘事件
因为键盘事件, 没有办法确定我是在某一个元素上按下的键盘,所以一般来说我们的键盘事件绑定在 表单元素 或者 document 上.
keydown 键盘按下
keyup 键盘抬起
keypress 键盘按下
<body>
<form action="">
<input type="text" name="" id="">
<input type="submit">
<input type="reset"
</form>
<script>
var div=document.querySelector('div')
var inp=document.querySelector('input')
// keydown 键盘按下
inp.onkeydown=function(){console.log('键盘按下')}
// keyup 键盘抬起
inp.onkeyup=function(){console.log('键盘抬起')}
// keypress 键盘按下
inp.onkeypress=function(){console.log('键盘按下')}
</script>
</body>
3.浏览器事件
load 加载完毕
resize 窗口改变
scroll 滚动条滚动
4.表单事件
专门给 form 标签和 input 标签 和 textarea 标签 和 select 标签使用的.
focus 聚焦事件
blur 失焦事件
change 改变事件
input 输入事件
submit 提交事件 (绑定给 form 标签)
reset 重置事件 (绑定给 form 标签)
<body>
<form action="">
<input type="text" name="" id="">
<input type="submit">
<input type="reset">
</form>
<script>
var inp=document.querySelector('input')
var form=document.querySelector('form')
// focus 聚焦事件
inp.onfocus=function(){console.log('聚焦')}
// blur 失焦
inp.onblur=function(){console.log('失焦')}
// change 改变事件
inp.onchange=function(){console.log('改变事件')}
// input 输入事件
inp.oninput=function(){console.log('输入事件')}
// submit 提交事件
form.onsubmit=function(){console.log('提交事件')}
// reset 重置事件
form.onreset=function(){console.log('重置事件')}
5.移动端事件
touchstart 触摸开始(手放在屏幕上的时候)
touchmove 触摸移动(手在屏幕上移动)
touchend 触摸结束(手离开屏幕的时候)
6.其他事件
=> transitionend 过渡动画结束 需要特殊的绑定方式
=> animationend 帧动画结束 需要特殊的绑定方式
=> selectstart 开始框选文本
事件对象
在每一个事件触发的时候都应该有一些描述性的信息,当我们把这些信息放在一个对象里面的时候,我们管这个对象叫做事件对象.
事件对象: 就是一个保存了本次事件的描述信息的对象数据类型.
当你触发事件的时候, 浏览器会帮我们记录好这些内容,你只要获取到事件对象, 去里面进行查看就可以了.
如何在事件里面获取事件对象?
标准浏览器获取事件对象:
box.onclick = function (e) {}
IE 低版本获取:
直接在事件处理函数里面使用 window.event 来获取.
兼容方式:
div.onclick=function(e){
e = e || window.event
}
事件对象里面的信息—鼠标事件
学习一些在事件对象内和鼠标事件相关的信息
button 属性: 决定的是你按下的是鼠标的哪一个按键
clientX 和 clientY 属性: 相对于浏览器可视窗口左上角的坐标
pageX 和 pageY 属性: 相对于页面左上角的坐标
offsetX 和 offsetY 属性: 相对于元素左上角的坐标
<body>
<div></div>
<script>
var box = document.querySelector('div')
// 坐标点
box.onclick = function (e) {
// 处理事件对象兼容
e = e || window.event
// 打印看一下几组坐标
// clientX 和 clientY
console.log('clientX : ', e.clientX)
console.log('clientY : ', e.clientY)
console.log('========================')
// pageX 和 pageY
console.log('pageX : ', e.pageX)
console.log('pageY : ', e.pageY)
console.log('========================')
// offsetX 和 offsetY
console.log('offsetX : ', e.offsetX)
console.log('offsetY : ', e.offsetY)
console.log('========================')
}
</script>
</body>
事件对象里面的信息—键盘事件
-
你按下的是哪一个按键
我们键盘上每一个按键都有一个自己的编码,通过事件对象里面的编码来确定你按下的是哪一个按键.获取编码的信息由两个: e.keyCode 标准浏览器 e.which 火狐小于 20 的版本 兼容处理 var code = e.keyCode || e.which
// 1. 绑定一个键盘事件 - 看键盘编码
inp.onkeydown = function (e) {
e = e || window.event
// 键盘编码的兼容处理
var code = e.keyCode || e.which
// 判断你按下的是 回车 按钮
if (code === 13) {
alert('您按下的是 回车 按键')
}
}
-
你按下的是不是组合按键
在事件对象里面有四个属性 shiftKey 判断 shift 按键 ctrlKey 判断 ctrl 按键 altKey 判断 alt 按键 metaKey (不兼容, IE 没有) 判断 win 按键
inp.onkeydown=function(e){
e= e ||window.event
var code=e.keycode || e.which
if(code === 65 && e.shiftKey===true && e.ctrlKey===true && e.altKey===true){
alert('alt + shift + alt + a')
}
}
他们四个的值都是布尔值:默认是 false, 表示没有按下;当你按下去的时候, 他们会变成 true, 表示按下了.
我们在判断组合按键的时候,只要多判断一个属性是不是 true 就能知道你按下的是不是组合按键.
事件监听器
我们绑定事件一共有两种方式:
dom0级 事件: 使用 on 的方式进行绑定
dom2级 事件: 使用 监听器 的方式进行绑定
监听器: 我们有两种监听器:
标准浏览器使用的 监听器
IE 低版本使用的 监听器
- 标准浏览器的事件监听器
语法: 元素.addEventListener(‘事件类型’, 事件处理函数)
作用: 给元素添加一个事件处理函数, 当事件触发的时候有函数执行
<body>
<div></div>
<script>
// <!-- 1.标准浏览器的事件监听器 -->
var div =document.querySelector('div')
div.addEventListener('click',function(){
console.log('点击')
})
</script>
</body>
- IE 低版本的事件监听器
语法: 元素.attachEvent(‘on事件类型’, 事件处理函数)
作用: 给元素添加一个事件处理函数, 当事件触发的时候有函数执行
<body>
<div></div>
<script>
// <!-- 1.标准浏览器的事件监听器 -->
var div =document.querySelector('div')
div.attachEvent('onclick',function(){
console.log('点点')
})
</script>
</body>
解绑事件
dom 0级 事件解绑:
元素.on事件类型 = null
<body>
<div></div>
<script>
//dom 0 级事件解绑:
var div=document.querySelector('div')
div.onclick=function(){console.log('我被点击了')}
// 解绑:
div.onclick=null
</script>
</body>
dom2级 事件解绑:
元素.removeEventListener('事件类型', 要移除的事件处理函数)
元素.detachEvenbt('on事件类型', 要移除的事件处理函数)
dom 2 级解绑事件(标准浏览器):
<body>
<div></div>
<script>
var div=document.querySelector('div')
function fn(){
console.log('我被点击了1')
}
function fnn(){
console.log('我被点击了2')
}
div.addEventListener('click',fn)
div.addEventListener('click',fnn)
// 解绑:
div.removeEventListener('click',fn)
div.removeEventListener('click',fnn)
</script>
</body>
dom 2级 事件的 IE 低版本解绑：
<body>
<div></div>
<script>
// dom 2 级解绑事件(IE浏览器):
var div=document.querySelector('div')
function fn(){
console.log('我被点击了1')
}
function fnn(){
console.log('我被点击了2')
}
div.attachEven('onclick',fn)
div.attachEven('onclick',fnn)
// 解绑:
div.datachEvent('onclick',fn)
div.detachEvent('onclick',fnn)
</script>
</body>
事件的冒泡和捕获
就是事件触发的顺序.
冒泡: 按照从 目标 到 window 的顺序来执行所有的同类型事件
捕获: 按照从 window 到 目标 的顺序来执行所有的同类型事件
我们怎么让事件按照冒泡或者捕获的顺序执行?
IE 低版本只能按照冒泡的顺序执行, 没有办法设置捕获
标准浏览器, 通过 addEventListener 的第三个参数来决定是冒泡还是捕获
第三个参数, 是 布尔值:
默认是 false, 表示冒泡
选填是 true, 表示捕获(一般很少使用)
<body>
<div class="three">
<p class="two">
<span class="one"></span>
</p>
</div>
<script>
window.addEventListener('click',function(){console.log('我被点击window')},false)
document.addEventListener('click',function(){console.log('我被点击document')},false )
var html=document.querySelector('html')
html.addEventListener('click',function(){console.log('我被点击html')},false)
var body=document.querySelector('body')
body.addEventListener('click',function(){console.log('我被点击body')},false)
var three=document.querySelector('.three')
three.addEventListener('click',function(){console.log('我被点击three')},false)
var two=document.querySelector('.two')
two.addEventListener('click',function(){console.log('我被点击two')},false)
var one=document.querySelector('.one')
one.addEventListener('click',function(){console.log('我被点击one')},false)
</script>
</body>
浏览器默认行为
浏览器默认行为是指不需要绑定, 浏览器天生自带的一个行为.比如:
表单提交: 不需要绑定提交时间, 只要点击 submit 按钮, 会自动提交跳转页面;
a 超链接: 不需要绑定点击事件, 只要点击 a 标签就会跳转连接;
鼠标右键: 不需要绑定右键单击事件, 只要你单击鼠标右键, 就会出现一个菜单;
文本选中: 不需要绑定选中事件, 只要你框选, 就会选中页面中的文本内容;
阻止默认行为
阻止浏览器默认行为:
1. e.preventDefault() 标准浏览器
2. e.returnValue = false IE 低版本
3. 通用的方法 return false
<body>
<a href="http://www.baidu.com" > 点击一下 </a>
一段内容一段内容一段内容一段内容一段内容一段内容一段内容一段内容一段内容一段内容一段内容一段内容一段内容一段内容一段内容一段内容一段内容一段内容一段内容一段内容一段内容一段内容一段内容
<script>
var a = document.querySelector('a')
a.onclick=function(e){
e = e ||window.event
console.log('a标签')
e.preventDefault()
// 标准浏览器:阻止浏览器默认行为
e.returnValue = false
// IE低版本
}
document.oncontextmenu=function(e){
e = e || window.event
e.preventDefault()
}
document.onselectstart=function(e){
e = e || window.event
e.preventDefault()
alert('请先登录')
}
</script>
</body>
以上是对事件的理解,希望对大家有所帮助!
526
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
