jQuery中的事件个人分享

2024年3月23日 150次阅读 来源: a达达

jQuery事件

页面加载

  • DOM的页面加载机制
  • 如果先编写JavaScript代码(用于获取页面元素),再加载页面元素
  • 导致问题 – 无法成功获取页面元素
  • 原因 – 执行这段JavaScript代码时,页面元素还没有被加载(不存在)
  • 解决先执行代码后加载元素的问题 – window.onloa
  • 保证先加载页面元素完毕后,在执行JavaScript代码

  • window对象表示浏览器窗口

    • load事件 – 当浏览器窗口加载页面完毕时被触发
    • 事件处理函数中的代码逻辑 -> 在浏览器加载页面完毕后执行

示例代码:

    <!-- 先加载JavaScript代码逻辑 -->
    <script>
        /*
            window对象表示浏览器窗口
            * load事件 - 当浏览器窗口加载页面完毕时被触发
            * 事件处理函数中的代码逻辑 -> 在浏览器加载页面完毕后执行
         */
        window.onload = function(){
            var btn = document.getElementById('btn');
            console.log(btn);
        }
    </script>
</head>
<body>
<!-- HTML元素 -->
<button id="btn">按钮</button>
</body>

事件绑定

事件的绑定

  • bind(type, data, callback)方法 – 绑定事件

    • 参数

      • type – 表示绑定的事件名称(注意:没有on)
      • data – 作为event.data属性传递给事件对象的额外数据对象
      • callback – 表示绑定事件的处理函数

示例代码:

function click1(){
        console.log('this is button.');
    }
    function click2(){
        console.log('this is button too.');
    }
    $('#btn').bind('click', click1);
    $('#btn').bind('click', click2);

解绑定事件

  • unbind(type, data, callback)方法 – 解绑定事件

    • 参数

      • type – 表示绑定的事件名称(注意:没有on)
      • data – 作为event.data属性传递给事件对象的额外数据对象
      • callback – 表示绑定事件的处理函数

    • 情况

      • 如果只传递事件名称的话 – 解绑定该事件的所有处理函数
      • 如果传递事件名称和指定的处理函数 – 解绑定该事件的指定处理函数

示例代码:

$('#btn').unbind('click', click1);

bind()与unbind()中的data参数

  • data参数的值 -> 利用event事件对象的data属性进行接收
  • 特点 – 该参数的数据内容只能在事件的处理函数中被使用

示例代码:

   $('#btn').bind('click', { a : '皮卡丘' }, function(event){
        // var obj = { a : '皮卡丘' };
        console.log(event.data);
    });

多事件的绑定与解绑定

  • bind()方法支持同时绑定多个事件 – 事件名称使用空格隔开
  • 同时绑定的多个事件, 具有同一个处理函数
  • unbind()
  • 不传递任何参数 – 表示解绑指定元素的所有事件
  • 传递一个事件名称 – 表示解绑指定元素的指定单个事件
  • 传递多个事件名称 – 表示解绑指定元素的指定多个事件
  • unbind()方法
  1. 没有指定任何事件时 – 将指定元素的所有事件全部解绑定
  2. 指定一个事件名称时 – 将指定元素的指定当个事件解绑定
  3. 指定多个事件名称时 – 将指定元素的指定多个事件解绑定

示例代码:

    // bind()方法 - 多事件绑定，事件名称之间使用空格分隔
    $('#title').bind('mouseover mouseout', function(){
        if ($('ul').is(':hidden')) {
            $('ul').css('display','block');
        } else {
            $('ul').css('display','none');
        }
    });

    /*
        unbind()方法
        1.没有指定任何事件时 - 将指定元素的所有事件全部解绑定
        2.指定一个事件名称时 - 将指定元素的指定当个事件解绑定
        3.指定多个事件名称时 - 将指定元素的指定多个事件解绑定
     */
    $('#title').unbind('mouseover mouseout');

事件绑定方法的对比

  • jQuery中提供多组事件绑定与解绑定的方法

    • bind()与unbind() – jQuery 3.0版本后删除方法

    • on()与off()方法 – jQuery 1.7版本后新增方法

      • 其实bind()与unbind()的底层方法就是on()和off()

    • live()与die() – jQuery 1.7版本后删除方法

      • 作用 – 实现事件委托

  • delegate()与undelegate() – jQuery 1.6版本后新增方法，jQuery 3.0版本后删除方法

    • 作用 – 实现事件委托
  • one() – 为事件绑定一次性的函数

事件切换

示例代码:

   // jQuery提供hover(over, out)方法
    $('#title').hover(function(){
        $('ul').css('display','block');
    },function(){
        $('ul').css('display','none');
    });

事件模拟

  • trigger()方法 – 可以模拟事件触发后的效果

示例代码:

<body>
<button id="btn">按钮</button>
<script>
    // 绑定事件 - 由用户行为进行触发，调用处理函数
    $('#btn').bind('click',function(){
        console.log('this is button.');
    });
    // 模拟用户触发事件
    $('#btn').trigger('click');

</script>
</body>
    原文作者：a达达
    原文地址: https://segmentfault.com/a/1190000016329554
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞