案例1:事件绑定:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>function myAddEvent(obj, ev, fn) {
if(obj.attachEvent) {
//IE下
//attachEvent(事件名,函数);
//detachEvent() 解除绑定
obj.attachEvent('on' + ev, fn);
} else {
//FF Chrome下
//addEventListener(事件名,函数,false);
//removeEventListener()解除绑定
obj.addEventListener(ev, fn, false);
}
}
window.onclick = function() {
var oBtn = document.getElementById("btn1");
myAddEvent(oBtn, 'click', function() {
alert('a');
});
myAddEvent(oBtn, 'click', function() {
alert('b');
});
}</script>
</head>
<body>
<input type="button" id = "btn1" value="按钮"/>
</body>
</html>
案例2:拖拽吸附
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1 {height: 200px;width: 200px;background: red;position: absolute;}
#div2 {height: 500px;width: 700px;background: gray;position:relative;}
</style>
<script>
window.onclick = function(){
var oDiv = document.getElementById("div1");
var oDiv2 = document.getElementById("div2");
oDiv.onmousedown = function(ev){
var oEvent = ev || event;
var disX = oEvent.clientX - oDiv.offsetLeft;
var disY= oEvent.clientY - oDiv.offsetTop;
//这里不能用oDiv,因为宽度小,当鼠标移出时就会失去效果
document.onmousemove = function(ev){
var oEvent = ev || event;
var x = oEvent.clientX - disX;
var y = oEvent.clientY - disY;
//解决div跑出界面的情况
if(x < 50){ //吸附原理
x = 0;
}
else if(x > oDiv2.offsetWidth - oDiv.offsetWidth - 50){
x = oDiv2.offsetWidth - oDiv.offsetWidth;
}
if(y < 50){
y = 0;
}
else if(y > oDiv2.offsetHeight - oDiv.offsetHeight - 50){
y = oDiv2.offsetHeight - oDiv.offsetHeight;
}
oDiv.style.left = x + 'px';
oDiv.style.top = y + 'px';
}
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
}
//解决FF问题
return false;
}
}
</script>
</head>
<body>
<div id = "div2">
<div id = "div1"></div>
</div>
</body>
</html>
案例3:事件捕获
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onclick = function(){
var oBtn = document.getElementById("btn1");
oBtn.onclick = function(){
alert('yes');
}
//IE下使用
//oBtn.setCapture();
//oBtn.releaseCapture();
}
</script>
</head>
<body>
<input type = "button" value="按钮" id = "btn1"/>
</body>
</html>