【JavaScript】事件--总结
千锋
1.Event 对象
代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
div{
width: 200px;
height: 200px;
background-color: yellow;
}
style>
<body>
<input type="text" id="username">
<div id="box1">div>
body>
<script>
username.onkeyup = function(evt){
// console.log(evt.keyCode)
if(evt.keyCode===13){
console.log("创建节点")
}
}
box1.onclick = function(a) {
console.log(a)
}
script>
在输入框输入一个a,按下回车键，控制台输出“创建节点”。
键盘按键键码值（keyCode）对照表
点击div，会出现点击位置等参数：
点击黄色正方体的任意位置都会返回你点击的位置距离浏览器界面的偏移量
box1.onclick = function(evt) {
console.log(evt.clientX,evt.clientY);
}
//evt.clientX,evt.clientY:距离浏览器可视窗口的左上角的坐标值
2.鼠标跟随
做一个鼠标移上“你的头像”，就在旁边显示“头像介绍”效果
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
*{padding:0; margin:0;}
#box{
width: 200px;
height: 50px;
background-color: red;
position: relative;
margin: 100px;
}
#box p{
width: 300px;
height: 200px;
background-color: aqua;
position: absolute;
left: 100px; top: 100px;
display: none;
pointer-events: none;
/* 穿透 */
z-index: 100;
}
style>
head>
<body>
<div id="box">
你的头像
<p>
头像介绍
p>
div>
body>
<script>
box.onmouseover = function(){
this.firstElementChild.style.display="block";
}
box.onmouseout = function(){
this.firstElementChild.style.display="none";
}
box.onmousemove=function(evt){
// console.log(evt.offsetX,evt.offsetY)
this.firstElementChild.style.left=evt.offsetX+50+"px";
this.firstElementChild.style.top=evt.offsetY+50+"px";
}
script>
html>
offset/page/screen/client
大致按照从小到大顺序依次解析：
- event.offsetX、event.offsetY
鼠标相对于事件源元素（srcElement）的X,Y坐标，也作相对于触发事件的对象，只有IE事件有这2个属性，标准事件没有对应的属性。 - event.clientX、event.clientY
鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性 - event.pageX、event.pageY
类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标；页面没有滚动时，event.pageX、event.pageY的值与event.clientX、event.clientY的值相等；滚动后大于event.clientX、event.clientY的值。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。 - event.screenX、event.screenY
鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性
evt.clientX,evt.clientY:距离浏览器可视窗口的左上角的坐标值，这个值是随着滚动条而变化的，实时获取你当前div盒子的位置
pageX、pageY:距离页面的左上角的坐标值是一个固定值，不随着滚动条变化，只和初始位置有关
offsetX、offsetY:距离触发元素左上角的坐标值，就是相对于盒子的位置，距离这个盒子边框的位置，和浏览器以及页面无关
3.鼠标拖拽：
鼠标按下即可拖拽：
鼠标拖拽
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
*{padding:0; margin:0;}
#box{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
}
style>
head>
<body>
<div id="box">div>
body>
<script>
box.onmousedown = function() {
console.log("down")
// 鼠标按下之后可以拖拽，整个页面可动，使用document
document.onmousemove = function(evt) {
// 让拖拽点处于盒子中心位置
var x=evt.clientX-box.offsetWidth/2
var y=evt.clientY-box.offsetHeight / 2
// 让盒子不要出界,让窗口宽度减去盒子宽度，作为一个临界值赋给拖拽点
if(y<=0) y=0
if(x<=0) x=0
if(x>=document.documentElement.clientWidth-box.offsetWidth)
x=document.documentElement.clientWidth - box.offsetWidth
if(y >=document.documentElement.clientHeight - box.offsetHeight)
y=document.documentElement.clientHeight - box.offsetHeight
box.style.left=x+"px"
box.style.top= y +"px"
}
}
box.onmouseup = function() {
console.log("up")
// 鼠标抬起之后取消拖拽
document.onmousemove = null
}
script>
html>
4.右键自定义菜单：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<style>
*{
margin:0;padding:0;
}
ul{
list-style: none;
width: 200px;
padding: 10px;
border:1px solid black;
display: none;
position: absolute;
}
ul li:hover{
background: skyblue;
}
style>
<body>
<ul id="list">
<li class="a">1li>
<li class="a1">2li>
<li class="a2">3li>
ul>
body>
<script>
// 阻止浏览器右键的默认行为
document.addEventListener("contextmenu",function(evt){
evt.preventDefault()
///让自定义的右键行为显示出来
list.style.display = "block"
var x=evt.clientX
var y=evt.clientY
//防止右键行为的div跑出浏览器边界
if(document.documentElement.clientHeight-list.offsetHeight<=y)
y=document.documentElement.clientHeight-list.offsetHeight
if(document.documentElement.clientWidth - list.offsetWidth<=x)
x=document.documentElement.clientWidth - list.offsetWidth
list.style.top =y+"px"
list.style.left=x+"px"
})
//给每一个li都加上点击事件，不用id，使用事件委托
//减少多个函数的绑定的性能处理 || 动态添加li，也会有事件处理
list.onclick = function(evt) {
console.log("list",evt.target)
//低版本的是：ect.srcElement
if(evt.target.className==="a"){
list.style.backgroundColor = "yellow"
}
if(evt.target.className==="a1"){
list.style.backgroundColor = "blue"
}
if(evt.target.className==="a2"){
list.style.backgroundColor = "red"
}
}
// 双击左键让右键行为消失
document.addEventListener("dblclick",function(){
list.style.display = "none"
})
script>
html>
addEventListener
onclick只能响应一次，同样的id再定义一个onclick只会被覆盖。而.addEventListener可以让绑定的多个事件同时响应。
事件解绑：
点击一次实现后就解绑，再点击就无效
1.使用this指向事件，点击一次执行后就赋值为null
2.使用addEventListener实现点击，之后removeEventListener解开点击事件
<button id="btn">抽奖button>
body>
<script>
// 初级
// btn.onclick = function() {
// console.log("谢谢惠顾")
// this.disabled = true
// }
// 高级：
// 第一种方法
// btn.onclick = function() {
// console.log("谢谢惠顾")
// this.οnclick=null
// }
// 第二种方法
// function handler() {
// console.log("谢谢惠顾")
// btn.removeEventListener("click", handler)
// }
// btn.addEventListener("click", handler)
script>
disabled 属性是一个布尔属性。 disabled 属性规定应该禁用的 元素。 被禁用的 input 元素是无法使用和无法点击的。 disabled 属性进行设置
鼠标事件
单击事件：click
双击事件：dblclick
右键点击事件：contextmenu
鼠标按下事件:mousedown
鼠标移动事件：mousemove(经过按钮区域就会触发)
鼠标抬起事件：mouseup
onclick是点击，一个完整的点击动作由按下鼠标键onmousedown，和弹起鼠标键onmouseup完成，所以很多时候，onclick事件和onmousedown,onmouseup混用的时候会出现冲突。
鼠标移入移出mouseover mouseout
鼠标移入移出：mouseenter mouseleave
over out区分比较模糊，移出小盒子同时触发移入大盒子，更加一体化。
enter leave区分比较明确，移出小盒子不会触发移入大盒子，移入小盒子同时触发移入大盒子，因为大盒子包含小盒子的原因。
mouseover: 只要鼠标指针移入事件所绑定的元素或其子元素，都会触发该事件
mouseenter: 只有鼠标指针移入事件所绑定的元素时，才会触发该事件
① 只要鼠标指针移入（或移出）事件所绑定的元素或其子元素，都会触发
mouseover（或mouseout）事件
② 只有鼠标指针移入（或移出）事件所绑定的元素时，才会触发
mouseenter（或mouseleave）事件
键盘事件
键盘按下onkeydown 键盘抬起 onkeyup
获取焦点：focus 失去焦点：blur
change 获取焦点,当失去焦点后对比里面内容不一样时才会触发
oninput：当输入内容时立即触发
oninput 事件在用户输入时触发。
该事件在 或 元素的值发生改变时触发。
提示： 该事件类似于 onchange 事件。不同之处在于 oninput 事件在元素值发生变化是立即触发， onchange 在元素失去焦点时触发。另外一点不同是 onchange 事件也可以作用于 < keygen > 和 < select > 元素。
提交事件：onsubmit 重置事件：onreset
移动端触摸事件
touchstart touchmove touchend：
touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。
touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。
touchend事件：当手指从屏幕上离开的时候触发。
黑马：
target和this的不同：
事件委托：
点击3，背景就变为粉色
阻止右键默认行为
鼠标事件对象：
键盘事件：
