jQuery事件机制on()、offset()、position()

1 offset()  返回或设置匹配元素相对文档(body)的偏移量
$("div").offset();      // {top:80,left:80}


2 position()  获取元素相对于有定位的父元素的位置
$("div").position();   //{top:80,left:80}

3 jquery 事件机制
*发展历程 ： 简单事件绑定--->bind事件绑定--->delegate事件绑定--->on事件绑定

* 简单事件绑定
click(function() {})   单击事件
mouseenter(function() {})  鼠标进入事件
mouseenter(function() {})   鼠标移走
。。。
缺点： 不能同时注册多个事件，要一个一个事件进行绑定

*bind
用法
//1  给多个事件源绑定同一个事件
$("span").bind("click mouseenter",function() {
            alert("success");
            });
        
        //2 bind一次可以注册多个事件
        $("span").bind({
        click:function() {
               alert("right");
        },
        mouseenter:function() {
               alert("wrong");
        }
        });
        //3 缺点：不支持动态元素事件绑定
        
    *delegate  代理  委托
    // 第一个参数 selector 事件最终由谁来执行
        // 第二个参数 事件的类型
        // 第三个参数  事件处理函数
        // 优点 支持动态创建的元素也能有事件
        // 缺点 必须注册委托事件
        $("#box").delegate("p","click",function() {
        console.log(this);
        });
        
    * on注册事件  (重点，推荐使用)     
    jQuery1.7版本之后
   
    //1 直接给自己注册事件
      $(".box div p").on("click",function() {
      alert("哈哈");
      });
     
      //2 通过div注册事件，由子元素执行
      $(".box div").on("click","p",function() {
      alert("嘿嘿");
      });
     
      //3 给div注册事件
      $(".box div").on("click",,function() {
      alert("呵呵");
      });
     
      //4 给div添加一个动态p元素
      $("button").on("click",function() {
      $(".box div").append("<p>么么</p>");
      });
     
      先执行自己直接注册的事件，再执行委托事件，最后执行祖先元素的事件
     
      对于动态添加的元素，直接注册的事件不起作用，先执行委托事件，然后执行祖先元素的事件

*事件解绑
1 unbind()   与bind()匹配使用          基本不使用
$(selector).unbind();   //解绑匹配元素的所有事件
$(selector).unbind("click");   //解绑匹配元素的click事件

2undelegate()  与delegate()匹配使用     基本不使用
$(selector).undelegate();   //解绑匹配元素的所有事件
$(selector).undelegate("click");   //解绑匹配元素的click事件

3 off()    与on()相对        推荐使用
$(selector).off()         //解绑匹配元素的所有事件
$(selector).off("click");     //解绑匹配元素的click事件