• 事件初级入门


      事件绑定:          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 {11px; height:11px; background:#f00; position:absolute; bottom:0; right:0; cursor:nw-resize;}
    #div2 {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>

  • 相关阅读:
    k8s管理
    Docker
    容器技术学习系列(一)-Docker基础知识学习
    Linux系统下DHCP服务安装部署和使用详解
    Linux下配置yum源为阿里云或网易的详解
    一道算法题目(1)
    SS命令和Netstat命令比较
    centos配置redis的主从复制(2)
    centos配置redis的主从复制(1)
    散列表(22)
  • 原文地址:https://www.cnblogs.com/---cc/p/3751499.html
Copyright © 2020-2023  润新知