jQuery中的事件我的分享

时间 2019-12-09

原文原文链接

jQuery事件

页面加载

DOM的页面加载机制
若是先编写JavaScript代码(用于获取页面元素),再加载页面元素
致使问题 - 没法成功获取页面元素
缘由 - 执行这段JavaScript代码时,页面元素尚未被加载(不存在)
解决先执行代码后加载元素的问题 - window.onloa
保证先加载页面元素完毕后,在执行JavaScript代码
window对象表示浏览器窗口css
- 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)方法 - 绑定事件函数
- 参数this
  - type - 表示绑定的事件名称(注意:没有on)
  - data - 做为event.data属性传递给事件对象的额外数据对象
  - callback - 表示绑定事件的处理函数

示例代码:code

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)方法 - 解绑定事件对象
- 参数seo
  - type - 表示绑定的事件名称(注意:没有on)
  - data - 做为event.data属性传递给事件对象的额外数据对象
  - callback - 表示绑定事件的处理函数
- 状况事件
  - 若是只传递事件名称的话 - 解绑定该事件的全部处理函数
  - 若是传递事件名称和指定的处理函数 - 解绑定该事件的指定处理函数

示例代码:ip

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

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

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

示例代码:get

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

多事件的绑定与解绑定

bind()方法支持同时绑定多个事件 - 事件名称使用空格隔开
同时绑定的多个事件, 具备同一个处理函数
unbind()
不传递任何参数 - 表示解绑指定元素的全部事件
传递一个事件名称 - 表示解绑指定元素的指定单个事件
传递多个事件名称 - 表示解绑指定元素的指定多个事件
unbind()方法

没有指定任何事件时 - 将指定元素的全部事件所有解绑定
指定一个事件名称时 - 将指定元素的指定当个事件解绑定
指定多个事件名称时 - 将指定元素的指定多个事件解绑定

示例代码:

// 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>