jQuery 的事件操作

最新推荐文章于 2023-07-07 16:55:54 发布

时间线原理

最新推荐文章于 2023-07-07 16:55:54 发布

阅读量219

点赞数

分类专栏： jQuery 文章标签： jquery js javascript

本文链接：https://blog.csdn.net/weixin_46229298/article/details/109553854

版权

jQuery 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

事件

页面加载

DOM 中提供了 load 事件用于加载页面完毕之后的执行机制，jQuery 提供了 ready() 方法实现相似功能。但 DOM 中的 load 事件与 jQuery 中的 ready() 方法的区别如下表所示：

DOM 中的 `load` 事件：	jQuery 中的 `read()` 方法：
没有任何简写形式	具有简写形式
当 HTML 页面加载完毕之后触发 `load` 事件	当 DOM 节点述加载完毕之后调用 `ready()` 方法
一个 HTML 页面仅允许存在一个 `load` 事件	一个 HTML 页面允许存在多个 `ready()` 方法

jQuery 提供了 ready() 方法，来实现类似于 window.obload 事件的功能。当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

$(document).ready(function(){
  // 在这里写你的代码...
});

其中 $(document).ready() 可以进行简写为：

// 1
$().ready(function(){

})
// 2
$(function($) {
  // 你可以在这里继续使用$作为别名...
});

事件绑定

1. 单事件绑定：

jQuery 中提供了 bind() 和 unbind() 方法完成事件绑定与解绑功能，具体语法如下：

$element.bind(type,data,callback);

$element.unbind(type[,data.callback]);
// 这里的 type 用于删除含有一个事件类型的字符串

type：含有一个事件类型的字符串
data：作为 event.data 属性值传递给事件对象的额外数据对象
callback：绑定到每个匹配元素的事件上面的处理函数

用法示例：

// 一个事件可以绑定多个方法
$('#btn').bind('click',function(){
    console.log('this is button.');
});
$('#btn').bind('click',function(){
    console.log('this is button too.');
});

如下图所示：

unbind(type,data,callback) 方法用于解绑事件，在使用过程中存在两种情况：

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

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

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

如果传递事件名称和指定的处理函数的话，解绑定该事件的指定处理函数

用法示例：

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

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

2. 多事件绑定

bind() 方法，多事件绑定，事件名称之间使用空格分隔

用法示例：

// 鼠标悬停事件
// * mouseover 表示鼠标悬停在指定元素之上
// * mouseout 表述鼠标从指定元素上移开
$('#title').bind('mouseover mouseout',function(){
    if($('ul').is(':hidden')){
        $('ul').css('display','block')
    } else {
        // $('ul').hide();
        $('ul').css('display','none')
    }
})

多事件绑定的 unbind() 方法分为三种情况：

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

3. 事件绑定方法对比

jQuery 由于版本不同，完成事件绑定的方法不仅 bind() 方法，还有以下几种方法：

one(type[,data,fn]) 方法：为每一个匹配元素的特定事件绑定一个一次性的事件处理函数
bind(type[,data,fn]) 方法：为每个匹配元素的特定事件绑定事件处理函数
on(events,[selector],[data],fn) 方法：为每个匹配元素绑定一个或多个事件的事件处理函数。jQuery 1.7 版本新增方法
live(type[,data],fn) 方法：该方法可实现事件委托效果。jQuery 1.7 版本该方法被移除
delegate(selector[,type][,data],fn) 方法：该方法可实现事件委托效果。jQuery 1.6 版本新增方法

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

bind() 与 unbind() jQuery 3.0 版本后删除方法
on() 与 off() 方法 jQuery 1.7 版本后新增方法
- bind() 与 unbind() 的底层方法就是 on() 和 off()
live() 与 die() jQuery 1.7 版本后删除方法
- 作用：实现事件委托
delegate() 与 undelete() - jQuery 1.6 版本后新增方法,jQuery 3.0 版本后删除方法
- 作用：实现事件委托
one() 为事件绑定一次性的函数

事件切换

jQuery 提供了 hover() 方法模拟鼠标悬停事件效果，具体语法如下：

$element.hover([over,]out);

over：鼠标移到元素上要触发的函数
out：鼠标移出元素要触发的函数

用法示例：

$('#title').hover(function(){
    $('ul').css('display','block');
},function(){
    $('ul').css('display','none');
});

jQuery 提供了 toggle() 方法用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。具体语法如下：

$element.toggle(fn,fn2[,fn3,fn4,...]);

fn：第一数次点击时要执行的函数
fn2：第二数次点击时要执行的函数
fn3,fn4,… ：更多次点击时要执行的函数

说明：需要注意的是在 1.9 版本这个方法发生了变化，不再是事件切换的方法而是变成了动画方法。

事件模拟（`trigger()`）

jQuery 提供了 trigger() 方法用于模拟触发匹配元素绑定的事件，具体语法如下：

$element.trigger(type[,data]);

type：一个事件对象或者要触发的事件类型
data：传递给事件处理函数的附加参数

用法示例：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件模拟</title>
    <script src="jquery-1.12.4.js"></script>
</head>
<body>
    <button id="btn">按钮</button>
</body>
<script>
    // 绑定事件 - 由用户触发,调用处理函数
    $('#btn').bind('click',function(){
        console.log('this is test')
    })

    // 模拟用户触发事件
    $('#btn').trigger('click');
</script>

上述代码运行效果如下图所示：

时间线原理

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 的事件操作

事件页面加载DOM 中提供了 load 事件用于加载页面完毕之后的执行机制，jQuery 提供了 ready() 方法实现相似功能。但 DOM 中的 load 事件与 jQuery 中的 ready() 方法的区别如下表所示：DOM 中的 load 事件：jQuery 中的 read() 方法：没有任何简写形式具有简写形式当 HTML 页面加载完毕之后触发 load 事件当 DOM 节点述加载完毕之后调用 ready() 方法一个 HTML 页面仅允许存在一个 lo
复制链接

扫一扫