事件委托与键盘事件
Posted shangjun6
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了事件委托与键盘事件相关的知识，希望对你有一定的参考价值。
1.fn()与fn的区别？
fn()：执行里面的函数
fn: 将函数的内容赋给谁
2.事件委托的解析
onmouseenter，onmouseleave与onmouseover，onmouseout的区别？
onmouseenter获取的事件源（target）是元素的本身，所以他没有事件冒泡的机制
onmouseover获取的事件源（target）是为他的子级，当改变事件源的时候也是改变子级（同时也让自己拥有了父级的事件）从而就会产生冒泡机制；
3.dom0级与dom2级的区别？
1.dom2级正常事件，先捕获在冒泡
dom0级无捕获，直接就冒泡
(addEventListener() 中的第三个参数 true代表捕获 false代表冒泡)
2. dom0级事件元素绑定多个onclick，最后值执行最后一个onclick
dom2级事件绑定多个click，都要执行（注意：当绑定多个事件名，函数，事件发生阶段（捕获或冒泡），三者完全一样时，才执行一个）；
案例：
div.addEventListener("click","fn1",false)
div.addEventListener("click","fn1",false) （这种情况下才执行一个，且事件函数不能使用匿名函数）（因为匿名函数开辟的内存地址不一样，事件函数名相同时，内存地址才一样）
3.dom0级如果绑定多个相同事件，后者会覆盖前者，dom2级不会
dom0级只适合普通事件，dom2级需要制定的事件类型如domContentLoaded(当文档结构加载完成之后执行)
4.事件取消
dom0级直接赋值：null
div.onclick=null
dom2级需要使用removeEventListener()
div.removeEventListener("click","fn1",true)
5.键盘事件：
键盘事件：onkeydown(键盘按下) onkeyup(键盘抬起)
document.onkeydown (包括了所有键盘，键盘事件的常用写法)
键盘事件触发时，浏览器天生自带一个叫keyboardEvent对象，所有键盘信息都在这个对象上
靠keycode来识别你按哪个键
我们发现ev有个属性keycode键盘编码
案例：
document.onkeydown=function(ev){
var ev=ev||window.event
console.log(ev.keycode)
}
右击鼠标事件：oncontextmenu
案例：鼠标右击事件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.you{
position:absolute;
width:200px;
height:300px;
border:red 1px solid;
}
</style>
</head>
<body>
</body>
<script>
document.oncontextmenu=function(ev){
var ev=ev||window.event;
ev.preventDefault()||ev.returnValue;
var div=document.createElement("div");
div.className="you";
div.id="you";
var you=document.getElementById("you");
if(you){
document.body.removeChild(you);
div.style.left=ev.clientX+5+"px";
div.style.top=ev.clientY+5+"px";
document.body.appendChild(div)
}
else{
div.style.left=ev.clientX+5+"px";
div.style.top=ev.clientY+5+"px";
document.body.appendChild(div)
}
}
document.onclick=function(){
var you=document.getElementById("you");
document.body.removeChild(you)
}
</script>
鼠标拖拽的案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width:200px;
height:200px;
background:red;
position:absolute;
}
</style>
</head>
<body>
<div id="ha">
</div>
</body>
</html>
<script>
var ha=document.getElementById("ha");
ha.onmousedown=function(ev){
var ev=ev||window.event;
var x=ev.clientX-ha.offsetLeft;
var y=ev.clientY-ha.offsetTop;
document.onmousemove=function(ev){
var ev=ev||window.event;
ha.style.left=ev.clientX-x+"px";
ha.style.top=ev.clientY-y+"px";
}
ha.onmouseup=function(){
document.onmousemove=null;
}
}
</script>
以上是关于事件委托与键盘事件的主要内容，如果未能解决你的问题，请参考以下文章