事件初级入门
2014-05-25 19:39 Pretty丶Boy 阅读(259) 评论(0) 编辑 收藏 举报 事件绑定： IE下：绑定函数中的this指向window；删除绑定的匿名函数，看我
IE
attachEvent（事件，函数） 绑定事件
detachEvent（事件，函数） 解除事件
DOM
addEventListener（事件，函数，捕获） 绑定事件
removeEventListener（事件，函数，捕获） 解除事件
// IE 事件加 “on” DOM事件 直接写动作 关于捕获，事件流
鼠标滚动
鼠标滚动 滚动方向
IE/chrome onmousewheel wheelDelta 值为+ 向上滚动；值为— 向下滚动
FF DOMMouseScroll detail 与上面的相反
/*
var oEvent=ev||event;
var bDown=true;
bDown=oEvent.wheelDelta?oEvent.wheelDelta<0:oEvent.detail>0; // 判断浏览器兼容，三目运算
if(bDown)
{
oDiv.style.height=oDiv.offsetHeight+10+'px';
}
else
{
oDiv.style.height=oDiv.offsetHeight-10+'px';
}
*/
小例子：
拖拽改变元素大小
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {width:11px; height:11px; background:#f00; position:absolute; bottom:0; right:0; cursor:nw-resize;}
#div2 {width:200px; height:150px; background:#CCC; position:relative;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=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;
document.onmousemove=function (ev)
{
var oEvent=ev||event;
oDiv2.style.width=oEvent.clientX-disX+oDiv.offsetWidth+'px';
oDiv2.style.height=oEvent.clientY-disY+oDiv.offsetHeight+'px';
};
document.onmouseup=function ()
{
document.onmousemove=null;
document.onmouseup=null;
};
return false;
};
};
</script>
</head>
<body>
<div id="div2">
<div id="div1">
</div>
</div>
..................我就是那么懒省事
</body>
</html>
