jQuery 之 [ 事件 ]

堇年

2019-06-28

关注关注

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>

jquery jquery事件 ul