jQuery 之 [ 事件 ]

時間 2019-12-12

標籤 jquery 事件欄目 JQuery 简体版

原文原文鏈接

jQuery事件

事件綁定與解綁

bind()方法

綁定事件的一種方式jquery
1. 括號中填寫事件名稱事件處理函數
2. 容許同時綁定多個事件（使用空格隔開）
3. 與事件監聽器類似

unbind( )方法

解除綁定ide
1. 括號中填寫事件名稱指定的事件處理函數名稱
2. 沒有參數時會解綁全部事件

<body>
<div id="d1"></div>
<script src="jquery.js"></script>
<script>
    /*
        事件綁定
        bind( )方法 - 綁定事件的一種方式
         * 與事件監聽器類似
         * 括號中填寫 事件名稱  事件處理函數
        unbind( )方法 - 解除綁定
         * 括號中填寫 事件名稱  指定的事件處理函數名稱
     */
    /* 定位綁定事件的元素位置 */
    var $div =$( '#d1' );
    /* 爲指定元素綁定事件 */
    $div.bind( 'click', function () {
        console.log( '我特啊呦弄啥嘞' );
    } );

    /* 也能夠先定義事件處理函數並命名 - 方便綁定與解綁 */
    function log () {
        console.log( '我特啊呦弄啥嘞' );
    }
    /* 綁定事件 */
    $div.bind( 'click', log );
    /* 事件解綁 */
    $div.unbind( 'click', log );
</script>
</body>

多事件綁定與解綁

<body>
<button id="an">按鈕</button>
<div id="d1"></div>
<script src="jquery.js"></script>
<script>
    /*
        多事件綁定
        bind( )方法 - 容許同時綁定多個事件（使用空格隔開）
     */
    /* 定位綁定事件的元素位置 */
    var $an = $( '#an' );
    /* 爲指定元素綁定事件 */
    $an.bind( 'mouseover mouseout', function () {
        var $div = $( '#d1' );
        /* 進行條件選擇判斷 - 何時觸發什麼事件 */
        if ( $div.is(':hidden') ) {
            $div.show();
        } else {
            $div.hide();
        }
    } );
    /* 解綁指定的事件 */
    $an.unbind( 'mouseover' );
</script>
</body>

綁定事件的方式

bind( )方法函數
- 在括號中填寫事件名稱事件處理函數
one( )方法code
- 在括號中填寫事件名稱事件處理函數
- 該方法只執行一次
on( )方法seo
- 在括號中填寫事件名稱事件處理函數

解綁事件的方式

unbind（）方法事件
- 解除綁定「括號中填寫事件名稱指定事件處理函數名稱」
off（）方法ip
- 解除綁定「括號中填寫事件名稱指定事件處理函數名稱」

示例代碼

<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<script src="jquery.js"></script>
<script>
   /*
       綁定事件的方式
       bind( )方法 - 在括號中填寫  事件名稱   事件處理函數
        * unbind（ ）方法 - 解除綁定「括號中填寫 事件名稱  指定事件處理函數名稱」
       on( )方法 - 在括號中填寫  事件名稱   事件處理函數
        * off（ ）方法 - 解除綁定「括號中填寫 事件名稱  指定事件處理函數名稱」
       one( )方法 - 在括號中填寫  事件名稱   事件處理函數
        * 只執行一次綁定事件
    */
   var $d1 = $( '#d1' );
   $d1.bind( 'click',function () {
       console.log( '我特啊呦賭贏' );
   } );

   var $d2 = $( '#d2' );
   $d2.on( 'click', function () {
       console.log( '我特啊呦付汪木' );
   });

   var $d3 = $( '#d3' );
   $d3.one( 'click', function () {
       console.log( '咦！...嫩個鱉孫...' );
   } );
</script>
</body>

事件模擬

trigger（）方法

能夠模擬事件觸發後的效果

<body>
<button id="an">按鈕</button>
<div id="d1"></div>
<script src="jquery.js"></script>
<script>
    /* 定位指定元素而且綁定事件 */
    $( '#an' ).bind( 'click', function () {
        $( '#d1' ).show();
    } );
    /* trigger（）方法能夠模擬事件觸發後的效果 - 由用戶觸發的效果 */
    $( '#an' ).trigger( 'click' );
</script>
</body>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。