事件高級（一）
image.png
- 給元素添加事件的問題
- 事件綁定的意義
當一個元素添加兩個以上事件的時候 - 事件綁定：IE - attachEvent涣易、W3C - addEventListener
<script>
function aaa()
{
alert('a');
}
function bbb()
{
alert('b');
}
window.onload=function ()
{
var oBtn=document.getElementById('btn1');
/*oBtn.onclick=aaa;
oBtn.onclick=bbb;*/
//對象.attachEvent(事件名, 函數(shù))
//對象.addEventListener(事件名, 函數(shù), 是否捕獲)
//IE
/*oBtn.attachEvent('onclick', aaa);
oBtn.attachEvent('onclick', bbb);*/
//FF
/*oBtn.addEventListener('click', aaa, false);
oBtn.addEventListener('click', bbb, false);*/
if(oBtn.attachEvent)
{
oBtn.attachEvent('onclick', aaa);
oBtn.attachEvent('onclick', bbb);
}
else
{
oBtn.addEventListener('click', aaa, false);
oBtn.addEventListener('click', bbb, false);
}
};
</script>
- 兼容性處理
- 封裝事件綁定函數(shù)
function aaa()
{
alert('a');
}
function bbb()
{
alert('b');
}
//1.誰
//2.事件
//3.函數(shù)
function myAddEvent(obj, sEvent, fn)
{
if(obj.attachEvent)
{
obj.attachEvent('on'+sEvent, fn);
}
else
{
obj.addEventListener(sEvent, fn, false);
}
}
window.onload=function ()
{
var oBtn=document.getElementById('btn1');
myAddEvent(oBtn, 'click', aaa);
myAddEvent(oBtn, 'click', bbb);
};
</script>
- IE下事件綁定this指向的問題
<script>
window.onload=function ()
{
var oBtn=document.getElementById('btn1');
/*oBtn.onclick=function ()
{
alert(this);
};*/
//IE 事件綁定 this->window
/*oBtn.attachEvent('onclick', function (){
alert(this==window);
});*/
//FF
oBtn.addEventListener('click', function (){
alert(this);
}, false);
};
</script>
- 解除事件綁定、匿名函數(shù)的特性
<script>//解除不掉，函數(shù)要成獨立的戏挡，匿名的解除不掉
window.onload=function ()
{
var oBtn=document.getElementById('btn1');
oBtn.attachEvent('onclick', function (){
alert('a');
});
oBtn.detachEvent('onclick', function (){
alert('a');
});
};
</script>
<title>簡寫听皿，不是一個東西</title>
<script>
var a=function ()
{
alert('a');
};
var b=function ()
{
alert('a');
};
alert(a==b);
</script>
- 拖拽原理回顧
<style>
#div1 {width:100px; height:100px; background:red; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1');
oDiv.onmousedown=function (ev)
{
var oEvent=ev||event;
var disX=oEvent.clientX-oDiv.offsetLeft;
var disY=oEvent.clientY-oDiv.offsetTop;
document.onmousemove=function (ev)
{
var oEvent=ev||event;
oDiv.style.left=oEvent.clientX-disX+'px';
oDiv.style.top=oEvent.clientY-disY+'px';
};
document.onmouseup=function ()
{
document.onmousemove=null;
document.onmouseup=null;
};
};
};
</script>
</head>
<body>
<div id="div1">
</div>
</body>
- 封裝可重用的拖拽實例
<style>
#div1 {width:100px; height:100px; background:red; position:absolute;}
#div2 {width:100px; height:100px; background:yellow; position:absolute;}
#div3 {width:100px; height:100px; background:green; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script>
window.onload=function ()
{
drag('div1');
drag('div2');
drag('div3');
};
function drag(id)
{
var oDiv=document.getElementById(id);
oDiv.onmousedown=function (ev)
{
var oEvent=ev||event;
var disX=oEvent.clientX-oDiv.offsetLeft;
var disY=oEvent.clientY-oDiv.offsetTop;
document.onmousemove=function (ev)
{
var oEvent=ev||event;
oDiv.style.left=oEvent.clientX-disX+'px';
oDiv.style.top=oEvent.clientY-disY+'px';
};
document.onmouseup=function ()
{
document.onmousemove=null;
document.onmouseup=null;
};
};
}
</script>
</head>
<body>
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
</body>
