事件的⽅法（常见）事件
1，DOM常见事件
浏览器或者⽤户做的⼀些事情统称为事件；是元素天⽣⾃带的⼀种⾏为。
1.1⿏标事件：⿏标动作时触发的事件
onmouseover⿏标划⼊事件
onmouseoout⿏标划出事件
onmousemve⿏标移动事件
onmousedown⿏标点击事件
onmouseup⿏标抬起事件
onclick⿏标点击事件
ondblclick⿏标双击事件
onmouseenter⿏标划⼊事件（不⽀持冒泡）
onmouseleave⿏标划出事件（不⽀持冒泡）
1.2键盘事件事件
onkeydown键盘点击事件
onkeypress键盘点击事件（在onkeydown之后onkeyup之前执⾏）
onkeyup键盘抬起事件
1.3表单元素事件
onfoucs获得焦点事件
onblur失去焦点事件
onchange输⼊的被改变和失去焦点事件
oninput输⼊的值被改变事件
1.4系统事件
1.5移动端事件
ontouchstart触摸开始时触发
ontouchend触摸结束时触发
ontouchmove触摸滑动是触发
移动端使⽤click⼤概有300ms的延迟
2，事件对象
在事件触发时，浏览器传递给事件函数的第⼀个实参；其中包含了本次事件触发的具体信息
let box = document.querySelector('#box');
console.log(e); // e ⼀般称为事件对象，window.event
// 在IE浏览器下没有e，但是会把事件的信息挂载到
// e.clientX ⿏标点击的位置相对于当前浏览器可视窗⼝的左边距离
// e.clientY ⿏标点击位置相对于当前浏览器可视窗⼝的上边距离
// e.offsetX ⿏标点击位置相对于当前点击元素的左边距离
// e.offsetY ⿏标点击位置相对于当前点击元素的上边距离
// e.pageX ⿏标点击位置相对于 body 左边的偏移量
// e.pageY ⿏标点击位置相对于 body 上边的偏移量
// e.target 事件源，当前事件是谁触发的事件源就是谁
/
/ e.type  事件类型例如点击事件： 'click'
// e.cancelBubble：是否阻⽌事件默认的冒泡传播(true为阻⽌)
// e.stopPropagation(); 停⽌事件的冒泡传播(IE8及以下不兼容)
};
console.log(e.keyCode);
// e.keyCode 键码：键盘上每个键对应⼀个键码
};
3，事件的形式⾏为
有些元素是有替代⾏为的，如a标签点击会进⾏进⾏
let a = ElementById('a');
/
/ 阻⽌默认⾏为：
alert(111);
e.preventDefault(); // 阻⽌元素的事件默认⾏为(IE8级以下不兼容)
// IE 低版本可以使⽤：e.returnValue = false
};
4，DOM事件绑定
js中的事件分为DOM0级事件和DOM2级事件
1.1 DOM0级事件
1.1事件绑定
console.log(1)
};
console.log(2);
};
DOM0事件：给元素的同⼀个事件类型只能绑定⼀个函数(默认存在冒泡计机制)，如果绑定多个，下⾯的会覆盖上⾯的当⽤户点击box元素时，控制台会打印2
1.2事件的去除
1.2，DOM2级事件绑定
1.1事件绑定
1，给元素的同⼀个事件类型可以绑定多个函数
2，可以指定绑定的函数在冒泡阶段执⾏还是在捕获阶段执⾏
元素.addEventListener(‘事件类型’, 函数, false冒泡 || true捕获)
box.addEventListener(‘click’, function(){}, false)
1.2 attachEvent IE浏览器的DOM2级事件绑定
元素.attachEvent(‘事件类型’, 函数);
box.attachEvent(‘onclick’, function(){});
1.3 attachEvent和addEventListener的区别
添加绑定⽅法中的这个是当前被绑定的元素，⽽att中的this是窗⼝
add不能给元素的同⼀个事件类型绑定同⼀个⽅法，但是att可以
添加绑定的函数按绑定的顺序执⾏，但是att绑定的⽅法倒着执⾏
5，事件的传播
1，冒泡传播的机制：当触发⼦元素的事件时，会转换为触发当前元素祖先元素⾝上对应的事件（从⾥到外）；
2，捕获传播的机制：当触发⼦某⼀个事件时，会最外层的祖先元素开始出发对应的事件，直到⽬标元素为⽌（往外到⾥）；
3，⽬标阶段：⽬标阶段的函数执⾏执⾏和函数绑定的顺序⼀致
4，三个阶段的执⾏顺序：捕获阶段->⽬标阶段->冒泡阶段
5，dom2级事件绑定时第三个参数可以控制函数在哪个阶段执⾏（true：捕获阶段； false：冒泡阶段）
function fn1(e){
console.log("center","冒泡");
}
function fn2(e){
console.log("inner","冒泡");
}
function fn3(e){
console.log("outer","冒泡");
}
function fn4(){
console.log("center","捕获");
}
function fn5(){
console.log("inner","捕获");
}
function fn6(){
console.log("outer","捕获");
}
center.addEventListener("click",fn4,true);
center.addEventListener("click",fn1,false);
inner.addEventListener("click",fn2,false);
inner.addEventListener("click",fn5,true);
outer.addEventListener("click",fn3,false);
outer.addEventListener("click",fn6,true);
// 当⽤户点击center元素时，函数执⾏的顺序是:
捕获阶段-->⽬标阶段-->冒泡阶段
fn6-->fn5-->fn4-->fn1-->fn2-->fn3
6，事件委托
事件委托：主要利⽤事件的冒泡传播机制，给最外层的盒⼦绑定事件；触发⾥边元素的事件会把外层盒⼦对应的事件也触发
<div id="parent">
blur事件
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<script>
// 三个div将onmouseover这个事件委托给这三个盒⼦的⽗元素
let parent  = ElementById("parent");
if(e.target.innerHTML==="1"){
console.log("红⾊");
}else if(e.target.innerHTML==="2"){
console.log("绿⾊");
}else if(e.target.innerHTML==="3"){
console.log("黄⾊");
}
}
</script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。