事件初級入門

時間 2019-11-13

標籤事件初級入門简体版

原文原文鏈接

  事件綁定：         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';
                     }
               */

      小例子：
            拖拽改變元素大小html

<!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;
};java