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>
原文地址:https://www.cnblogs.com/shangjun6/p/10066153.html