您的位置：首页 > Web前端 > JavaScript

js事件应用（事件绑定、拖拽吸附、事件捕获）

2017-07-16 14:06 363 查看

案例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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航