jQuery基礎(4)- 位置信息、事件流、事件對象、事件代理、jquery事件

1、jQuery的位置信息javascript

jQuery的位置信是JS的client系列、offset系列、scroll系列封裝好的一些簡便api。css

一、寬度和高度html

       a、獲取寬度和高度,例如:      java

  .width()  // 獲取匹配元素集合中的第一個元素的寬度值,內容寬度,不含padding
  .height()  // 獲取匹配元素集合中的第一個元素的高度值,內容高度,不含padding

       注意:這個方法不接受任何參數。.css(‘width’)(或.css(‘height’))和 .width()(或.height())之間的區別是後者返回一個沒有單位的數值(例如,400),前者是返回帶有完整單位的字符串(例如,400px)。當一個元素的寬度(或高度)須要數學計算的時候推薦使用.width()(或.height()) 方法。jquery

       b、設置寬度和高度,例如:  api

  .width(value)  // 給每一個匹配的元素設置寬度,value爲數字,不帶單位
  .height(value)  //給每一個匹配的元素設置高度,value爲數字,不帶單位

 

二、innerWidth()和innerHeight()瀏覽器

       a、獲取內部寬和高,例如: app

  .innerWidth()  // 獲取匹配元素集合中第一個元素的寬度值,含padding,不含border
  .innerHeight()  // 獲取匹配元素集合中第一個元素的高度值,含padding,不含border

       注意:這種方法不適用於window 和 document對象,對於這些對象可使用.width()和.height()代替。函數

       b、設置內部寬和高,例如:性能

    .innerWidth(value)  // 給每一個匹配的元素設置內部寬度,value爲數字,不帶單位
    .innerHeight(value)  //給每一個匹配的元素設置內部高度,value爲數字,不帶單位

 

三、outerWidth()和outerHeight()

       a、獲取外部寬和高

  // 獲取匹配元素集合中第一個元素的外部寬度(包括padding,border和可選的margin)
  .outerWidth([includeMargin])
  // 獲取匹配元素集合中第一個元素的外部高度(包括padding,border和可選的margin)
  .outerHeight([includeMargin])

              參數includeMargin:類型是布爾值,默認爲false,表示不包含margin值。

              注意:這個方法不適用於window 和 document對象,對於這些對象可使用.width()和.height()代替。

       b、設置外部寬和高

  .outerWidth(value)  // 給每一個匹配的元素設置內部寬度,value爲數字,不帶單位
  .outerHeight(value)  //給每一個匹配的元素設置內部高度,value爲數字,不帶單位

 

四、偏移

       a、獲取偏移量,例如:

  .offset()  // 返回一個包含top和left屬性的Object對象

       描述:在匹配的元素集合中,獲取的第一個元素的當前座標,座標相對於文檔,與父相子絕無關。

       注意:jQuery不支持獲取經過display:none隱藏元素的偏移座標。一樣的,也沒法取得隱藏元素的 border, margin, 或 padding 信息。若元素的屬性設置的是 visibility:hidden,那麼咱們依然能夠取得它的座標。

       b、設置偏移量,例如: 

  .offset({ top: 10, left: 30});  // 設置匹配的元素集合中每個元素的座標,座標相對於文檔

 

五、元素座標

  .position()  // 返回一個包含top和left屬性的Object對象

       描述:描述獲取匹配元素中第一個元素的當前座標,相對於offset parent的座標 (offset parent指離該元素最近的並且被定位過的祖先元素 )。

       注意:當把一個新元素放在同一個容器裏面另外一個元素附近時,用.position()更好用。

 

六、滾動距離

       a、獲取水平方向滾動距離和垂直方向滾動距離,例如:

  .scrollLeft() // 獲取匹配元素集合中第一個元素的當前水平滾動條的位置(頁面捲走的寬度)
  .scrollTop() // 獲取匹配的元素集合中第一個元素的當前遲滯滾動條的位置(頁面捲走的高度)

       b、設置水平方向滾動距離和垂直方向滾動距離,例如:

  .scrollLeft(value)  // 設置每一個匹配元素的水平方向滾動條位置
  .scrollLeft(value)  // 設置每一個匹配元素的垂直方向滾動條位置

 

2、JS的事件流的概念

一、事件的概念

       HTML中與javascript交互是經過事件驅動來實現的,例如鼠標點擊事件onclick、頁面的滾動事件onscroll等等,能夠向文檔或者文檔中的元素添加事件偵聽器來預訂事件。想要知道這些事件是在何時進行調用的,就須要瞭解一下「事件流」的概念。

 

二、什麼是事件流

       事件流描述的是從頁面中接收事件的順序。

 

三、事件流的由來(瞭解)

       因爲微軟和網景亂搞,後來必需要爲事件傳播機制,制定一個標準,由於事件捕獲是網景公司開發出來的,而事件冒泡是由微軟公司開發出來的,它們都想要本身的技術成爲標準,因此致使這兩個公司總是幹架,制定標準的人爲了避免讓它們幹架,因此研發了事件流。

 

四、」DOM2級事件」規定的事件流包括三個階段:

  ①事件捕獲階段:事件捕獲和事件冒泡是相反的,也就是說,當用戶觸發了一個事件的時候,這個事件是從DOM樹的最上層開始觸發一直到捕獲到事件源;

  ②處於目標階段:事件在目標元素上發生並處理,可是事件處理會被當作是冒泡階段的一部分;

  ③事件冒泡階段:官方的定義就是從最特定的事件目標到最不特定的事件目標,意思就是說,加入用戶單擊了一個元素,,該元素擁有一個click事件,那麼一樣的事件也將會被它的祖先觸發,這個事件從該元素開始一直冒泡到DOM樹的最上層,這一過程稱爲事件冒泡;

 

五、事件流的寫法以及實現方式

       a、標準實現方式是使用關鍵詞addEventListener,假如你想給某元素添加/刪除事件,能夠這樣寫: 

  element.addEventListener(eventType, fn, false);
  element.removeEventListener(eventType, fn, false);

  參數解釋:

    eventType:表示要使用哪一種事件類型,好比click;

    fn:回調函數,裏面寫觸發此事件你要作什麼事情;

    false:事件機制,分爲冒泡和捕獲,false表示事件冒泡,true表示事件捕獲;

 

       b、既然有標準的實現方式,那麼確定也存在着非標準的寫法,以下:

  element.attachEvent(eventType, fn);   // 這種寫法兼容IE, IE沒有實現事件捕獲
  element.detachEvent(eventType, fn);

  參數解釋:

    eventType:事件類型;

    fn:回調函數;

 

       c、冒泡和捕獲的示例,以下:

           
  <button id="btn">按鈕</button>
  <script>
    window.onload = function(){
      var oBtn = document.getElementById('btn');

          document.addEventListener('click',function(){
            console.log('document處於事件捕獲階段');
          }, true);

          document.documentElement.addEventListener('click',function(){
              console.log('html處於事件捕獲階段');
          }, true);

          document.body.addEventListener('click',function(){
              console.log('body處於事件捕獲階段');
          }, true);

          oBtn.addEventListener('click',function(){
              console.log('btn處於事件捕獲階段');
          }, true);

          oBtn.addEventListener('click',function(){
              console.log('btn處於事件冒泡階段');
          }, false);

          document.body.addEventListener('click',function(){
              console.log('body處於事件冒泡階段');
          }, false);

          document.documentElement.addEventListener('click',function(){
              console.log('html處於事件冒泡階段');
          }, false);

          document.addEventListener('click',function(){
              console.log('document處於事件冒泡階段');
          }, false);
      };
    </script>
    <!--
    控制檯輸出結果以下:
    document處於事件捕獲階段
    html處於事件捕獲階段
    body處於事件捕獲階段
    btn處於事件捕獲階段
    btn處於事件冒泡階段
    body處於事件冒泡階段
    html處於事件冒泡階段
    document處於事件冒泡階段
    -->

 

3、事件對象

       什麼是事件對象?在觸發DOM上的事件時都會產生一個對象。

一、認識事件對象

       事件在瀏覽器中是以對象的形式存在的,即event。觸發一個事件,就會產生一個事件對象event,該對象包含着全部與事件有關的信息。包括致使事件的元素、事件的類型以及其餘與特定事件相關的信息。

       例如:鼠標操做產生的event中會包含鼠標位置的信息;鍵盤操做產生的event中會包含與按下的鍵有關的信息。

       全部瀏覽器都支持event對象,但支持方式不一樣,在DOM中event對象必須做爲惟一的參數傳給事件處理函數,在IE中event是window對象的一個屬性。

 

二、何時產生事件對象?

       當觸發某個事件的時候,這個事件的回調函數的形參會默認接收一個event事件對象。

 

三、DOM中的事件對象

       DOM0級和DOM2級事件處理程序都會把event做爲參數傳入。

       根據習慣:能夠用e,或者ev或者event。

       DOM中事件對象重要屬性和方法:

屬性

描述

type

用於獲取事件類型

target

用於獲取事件目標,即事件加在哪一個元素上

      

方法

描述

stopPropagation()

用於阻止事件冒泡

preventDefault()

阻止事件的默認行爲(移動端用的多)

 

四、IE中的事件對象

       第一種狀況: 經過DOM0級方法添加事件處理程序時,event對象做爲window對象的一個屬性存在。

       第二種狀況:經過attachEvent()添加的事件處理程序,event對象做爲參數傳入。

       IE中事件對象重要屬性和方法:

屬性

描述

type

用於獲取事件類型

srcElement

用於獲取事件目標,即事件加在哪一個元素上

cancelBubble

用於阻止事件冒泡,是屬性(true表示阻止)

returnValue

用於阻止事件的默認行爲,是屬性(false表示阻止)

 

五、Event對象的一些兼容性寫法(瞭解)

       a、得到event對象兼容性寫法,以下:

    event || (event = window.event);

       b、得到target兼容型寫法,以下:

    event.target||event.srcElement;

       d、阻止冒泡兼容性寫法,以下:

    event.stopPropagation ? event.stopPropagation() : (event.cancelBubble =true);

       c、阻止瀏覽器默認行爲兼容性寫法,以下:

    event.preventDefault ? event.preventDefault() : (event.returnValue = false);

 

4、事件委託(事件代理)

       通俗的講,onclick、onmouseover、onmouseout等就是事件,委託,就是讓別人來作,這個事件原本是加在某些元素上的,然而咱們能夠加到別人身上,來完成這個事件。

一、原理

       利用冒泡的原理,把事件加到父級上,觸發執行效果。

二、做用

       a、性能要好;

       b、針對新建立的元素,直接能夠擁有事件;

三、事件源

       跟this做用同樣(他不用看指向問題,誰操做的就是誰),event對象下的。

四、使用情景

       a、爲DOM中的不少元素綁定相同事件;

       b、爲DOM中尚不存在的元素綁定事件;

五、語法:.on( events [, selector ] [, data ], handler(eventObject))

  參數解釋:

    events:String類型,一個或多個空格分隔的事件類型;

    selector:String類型,選擇器字符串,用於過濾出被選中的元素中能觸發事件的後代元素;

    data:任意類型,當一個事件被觸發時,要傳遞給事件處理函數的event.data;

    handler(eventObject):Function類型,事件被觸發時,執行的函數;

  描述:在選定的元素上綁定一個或多個事件處理函數。

  示例:

  <ul>
        <li>第一項</li>
        <li>第二項</li>
    </ul>

    <script>
        $(function () {
            // 現有的li和將來添加的li都能作事件操做
            $('ul').on('click','li',function () {
              alert(this.innerText);
          });
          $('ul').append('<li>第三項</li>');
       })
    </script>

 

5、jquery經常使用的事件

       jquery經常使用的事件,你們必定要熟記在心,以下:

事件

描述

click()

鼠標單擊觸發事件

dblclick()

鼠標雙擊觸發事件

mousedown()/mouseup()

鼠標按下/彈起觸發事件

mousemove()

鼠標移動

mouseover()/mouseout()

鼠標移入/移出觸發(包含被選元素和其子元素)

mouseenter()/mouseleave()

鼠標移入/移出觸發(只在穿過/離開被選元素時觸發)

hover()

hover(fn1,fn2)分別當鼠標指針進入和離開元素時執行

focus()/blur()

表單控件聚焦/失去焦點時觸發

keydown()/keyup()

鍵盤按下/彈起時觸發

change()

表單元素髮生改變時觸發

select()

文本元素髮生改變時觸發事件

submit()

表單提交時觸發

 

6、解決單雙擊衝突問題

       知識鋪墊:兩次點擊間隔小於300ms爲雙擊,因此考慮利用定時器解決,以下:

  <button>按鈕</button>

  <script>
        var timer = null;
        $('button').click(function () {
            clearTimeout(timer);  // 開定時器以前先關定時器
            timer = setTimeout(function () {
                console.log('單擊了');
            },300)
        });

        $('button').dblclick(function () {
            clearTimeout(timer);
            console.log('雙擊了');
        });
  </script>

 

7、應用:回到頂部代碼示例:

  <div class="fixTop">回到頂部</div>

  <script>
        $(function () {
            $('.fixTop').click(function(event) {
                $('html,body').animate({
                    'scrollTop':0
                },1000)
            });
        });
  </script>
相關文章
相關標籤/搜索