代码改变世界

事件初级入门

2014-05-25 19:39  Pretty丶Boy  阅读(263)  评论(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>