Jquery 事件

          Posted on 2010-06-19 13:53 java小爬蟲 閱讀(1661) 評論(0)  編輯  收藏
           

          一:DOM的加載

          $(document).ready(function(){

          });

          $().ready(function(){

          });

          $(function(){

          });

          三種加載有相同的功能。

          $(window).load(function(){

          })

          Window.onload=function(){

          }具有相同的功能。

          這兩種加載方式和上面三種加載方式區別在于:

          第一類加載方式:DOM就緒就會執行,并不考慮關聯文件的加載情況。

          第二類加載方式:DOM對象的所有內容全部加載才會執行。

          二:事件綁定

          bind(type, [data], fn)

          為每一個匹配元素的特定事件(像click)綁定一個事件處理器函數。

          這個事件處理函數會接收到一個事件對象,可以通過它來阻止(瀏覽器)默認的行為。如果既想取消默認的行為,又想阻止事件起泡,這個事件處理函數必須返回false

          $("p").bind("click", function(){

            alert( $(this).text() );

          });

           

           

          function handler(event) {

            alert(event.data.foo);

          }

          $("p").bind("click", {foo: "bar"}, handler)

          三:簡單事件綁定

          有些事件經常被用到,jquery提供了簡寫的方法,它和bind()具有相同的效果和類似的使用方法。惟一的區別是減少了代碼量。

          $("p").blur( function () { alert("Hello World!"); } );

           

          四:事件的切換

          hover(over, out)

          當鼠標移動到一個匹配的元素上面時,會觸發指定的第一個函數。當鼠標移出這個元素時,會觸發指定的第二個函數。

           

          $("td").hover(
            function () {
              $(this).addClass("hover");
            },
            function () {
              $(this).removeClass("hover");
            }
          );

           

           

          toggle(fn, fn2, [fn3, fn4, ...])

          每次點擊后依次調用函數。

          如果點擊了一個匹配的元素,則觸發指定的第一個函數,當再次點擊同一元素時,則觸發指定的第二個函數,如果有更多函數,則再次觸發,直到最后一個。隨后的每次點擊都重復對這幾個函數的輪番調用。

          可以使用unbind("click")來刪除。

            $("li").toggle(

                function () {

                  $(this).css({"list-style-type":"disc", "color":"blue"});

                },

                function () {

                  $(this).css({"list-style-type":"disc", "color":"red"});

                },

                function () {

                  $(this).css({"list-style-type":"", "color":""});

                }

              );

          五:事件冒泡

          多個元素可以響應同一事件。假設有兩個元素,一個嵌套在另一個當中,并且綁定了同一事件。那個點擊了最里層的元素以后,不但里層元素觸發事件,外層元素也會觸發事件。所謂“冒泡”,是指事件會按照DOM的層次結構從內向外,直至頂端的依次觸發。

          事件對象

          jquery中,只需為函數增加一個參數就可以使用事件對象。

          事件對象的屬性:

          Event.type

          Event.preventDefault()

          Event.stopPropagation()

          Event.target()

          Event.relatedTarget()

          Event.pageX(),event.pageY();

          事件對象的用處?

          1:停止事件冒泡

          $("form").bind("submit", function(event){
            event.stopPropagation();
          });

          2:阻止默認行為

          $("form").bind("submit", function(event){

            event.preventDefault();

          });

           

          六:移除事件

          一個元素可以綁定多個事件,多個元素可以綁定同一事件。

          unbind([type], [data])

          bind()的反向操作,從每一個匹配的元素中刪除綁定的事件。

          如果沒有參數,則刪除所有綁定的事件。

          你可以將你用bind()注冊的自定義事件取消綁定。

          如果提供了事件類型作為參數,則只刪除該類型的綁定事件。

          如果把在綁定時傳遞的處理函數作為第二個參數,則只有這個特定的事件處理函數會被刪除。

           

          七:模擬事件

          trigger(type, [data])

          在每一個匹配的元素上觸發某類事件。

          這個函數也會導致瀏覽器同名的默認行為的執行。比如,如果用trigger()觸發一個'submit',則同樣會導致瀏覽器提交表單。如果要阻止這種默認行為,應返回false

          你也可以觸發由bind()注冊的自定義事件而不限于瀏覽器默認事件。

          事件處理函數會收到一個修復的(規范化的)事件對象,但這個對象沒有特定瀏覽器才有的屬性,比如keyCode

          jQuery也支持 命名空間事件。這允許你觸發或者解除綁定一組特定的事件處理函數,而無需一一個指定。你可以在事件類型后面加上感嘆號 ! 來只觸發那些沒有命名空間的事件處理函數。

           

           

           

           


          只有注冊用戶登錄后才能發表評論。


          網站導航:
           
          主站蜘蛛池模板: 丽江市| 蒲城县| 平度市| 嵊泗县| 土默特右旗| 铅山县| 河北省| 上虞市| 松滋市| 惠州市| 舟山市| 富阳市| 南昌市| 富裕县| 溆浦县| 玉山县| 邯郸市| 商洛市| 高要市| 拜泉县| 普兰县| 武城县| 紫阳县| 泰安市| 武川县| 安阳市| 精河县| 襄城县| 吴旗县| 于都县| 三穗县| 奉贤区| 电白县| 通渭县| 和平区| 新绛县| 泰来县| 仙游县| 抚松县| 靖宇县| 盐山县|