jQuery 之 [ 事件 ]

2024年4月27日 185次阅读 来源: 蔡志远

jQuery事件

事件绑定与解绑

bind()方法

  • 绑定事件的一种方式

    1. 括号中填写 事件名称 事件处理函数
    2. 允许同时绑定多个事件（使用空格隔开）
    3. 与事件监听器相似

unbind( )方法

  • 解除绑定

    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( )方法

    • 在括号中填写 事件名称 事件处理函数
    • 该方法只执行一次

  • on( )方法

    • 在括号中填写 事件名称 事件处理函数

解绑事件的方式

  • unbind（ ）方法

    • 解除绑定“括号中填写 事件名称 指定事件处理函数名称”

  • off（ ）方法

    • 解除绑定“括号中填写 事件名称 指定事件处理函数名称”

示例代码

<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>
    原文作者：蔡志远
    原文地址: https://segmentfault.com/a/1190000016329489
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞