事件高级（一）
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(事件名, 函数)
//对象.addEventListener(事件名, 函数, 是否捕获)
//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>
- 兼容性处理
- 封装事件绑定函数
function aaa()
{
alert('a');
}
function bbb()
{
alert('b');
}
//1.谁
//2.事件
//3.函数
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>
- 解除事件绑定、匿名函数的特性
<script>//解除不掉，函数要成独立的，匿名的解除不掉
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>
