jQuery的最大特色之一就是方法连缀写法，这样的书写方式使得阅读起来更加方便。于是乎，在日常的开发中大量使用连缀写法，而事件方法连缀就是一个特例。若给一个Dom对象使用了绑定了多个事件，便于阅读和书写，习惯了使用连缀写法，但这样的书写方式会造成时间的冗余。
1.事件冗余：多个事件方法中多次调用相同的代码
下面的代码是一个事件方法连缀的写法：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
jQuery(function($) {
$('<div id="livetip"></div>').hide().appendTo('body');
var tipTitle = '';
$('#mytable').bind('mouseover', function(event) {
var $link = $(event.target).closest('a');
if ($link.length) {
var link = $link[0];
tipTitle = link.title;
link.title = '';
$('#livetip').css({
top: event.pageY + 12,
left: event.pageX + 12
})
.html('<div>' + tipTitle + '</div><div>' + link.href + '</div>')
.show();
};
}).bind('mouseout', function(event) {
var $link = $(event.target).closest('a');
if ($link.length) {
$link.attr('title', tipTitle);
$('#livetip').hide();
};
}).bind('mousemove', function(event) {
var $link = $(event.target).closest('a');
if ( $link.length) {
$('#livetip').css({
top: event.pageY + 12,
left: event.pageX + 12
});
};
});
});
|
其中第5|6行、第18|19行、第24|25行多次地使用了同样的一段代码去判断事件对象是否存在。这不管是从代码效率还是代码文件大小的方面来说都是不合理的方法。
2.事件委派：一次性绑定多个事件，根据事件类别委派相应的操作
为了更好地优化上面的代码，可以通过事件委派来修改代码，修改后的代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
jQuery(function($) {
var $liveTip = $('<div id="livetip"></div>').hide().appendTo('body');
var tipTitle = '';
$('#mytable').bind('mouseover mouseout mousemove', function(event) {
var $link = $(event.target).closest('a');
if (!$link.length) { return; }
var link = $link[0];
if (event.type == 'mouseover' || event.type == 'mousemove') {
$liveTip.css({
top: event.pageY + 12,
left: event.pageX + 12
});
};
if (event.type == 'mouseover') {
tipTitle = link.title;
link.title = '';
$liveTip.html('<div>' + tipTitle + '</div><div>' + link.href + '</div>')
.show();
};
if (event.type == 'mouseout') {
$liveTip.hide();
if (tipTitle) {
link.title = tipTitle;
};
};
});
});
|
该段代码中一次性地将多个事件绑定到一个待处理的DOM对象之上，在代码的内部通过判断事件的类别来委派不同的处理代码。这样可以避免代码的重复定义，以达到避免时间冗余的效果。
以上两种代码的执行后的效果是完全一样的，相信大家一眼就可以看中哪一种代码的执行效率更加的快速吧！
分享到：
相关推荐
在给定的标题和描述中，我们关注的是如何使用jQuery进行事件委派，以及如何通过一次绑定来管理多种事件，以减少代码冗余，提高效率。 事件委派是一种优化事件处理策略的技术，它允许我们在文档的高层级元素上绑定...
**jQuery绑定事件**是JavaScript库jQuery中的核心功能之一，它极大地简化了DOM元素事件处理的流程，使得开发者能够更加高效地编写代码。在JavaScript原生语法中，为元素添加事件监听器通常涉及到`addEventListener`...
在探讨jQuery中的`bind()`, `delegate()`, 和`live()`事件绑定方法的区别时，我们需要深入理解它们在处理DOM事件时的独特方式。这些方法在不同的场景下提供了灵活且高效的选择，帮助开发者创建响应式和动态的Web应用...
`.bind()`是jQuery中更通用的事件绑定方法，不仅可以绑定`click`事件，还可以绑定其他多种事件，如`mouseover`、`mouseout`等。下面是如何使用`.bind()`绑定`click`事件的例子： ```javascript $('#clickmebind')....
`通过` $(".imagezz")`选择器选中所有class为`imagezz`的checkbox，并一次性为它们绑定了`$test_image_check_box_click`函数。这样，无论页面上有多少个符合条件的单选框，都可以通过这行代码实现事件绑定。 最后，...
综上所述，jQuery的`click`事件绑定提供了多种传递参数的方法，可以根据具体需求选择合适的方式。同时，结合CSS可以实现丰富的视觉反馈，提升用户体验。在实际开发中，熟练掌握这些技能将使你能够更高效地构建交互式...
jQuery提供了一系列方便的方法来简化事件绑定的过程。 在jQuery中，`on()`方法是最主要的事件绑定函数，它可以处理所有的事件类型。`on()`有多种用法，但基础形式是这样的： ```javascript $(selector).on(event, ...
然而，正如标题和描述所指出的，jQuery的事件绑定有时也会带来一些问题，比如内存消耗过大、动态生成元素需要重新绑定事件以及语法冗余。本文将深入探讨这些问题，并提供相应的解决方案。 首先，让我们看看jQuery中...
3. one事件：用于绑定只执行一次的事件。 四、jquery的Ajax jquery的Ajax是jquery中非常重要的一部分，用于实现异步通信。以下是jquery的Ajax的一些基本概念： 1. 什么是Ajax？Ajax是异步的JavaScript和XML的缩写...
"jQuery鼠标滚轮事件"是一个非常实用的功能，它允许我们监听并响应用户使用鼠标滚轮时的操作，以此来实现诸如页面滚动、图片缩放等丰富的交互效果。在本文中，我们将深入探讨jQuery中关于鼠标滚轮事件的知识点。 ...
本文将深入探讨多种jQuery绑定事件的实现方式，并提供解决事件重复绑定问题的策略。 首先，让我们来看看jQuery如何绑定单个事件。基本语法是使用`.bind()`函数，传入事件类型和处理函数。例如，绑定点击事件（click...
除此之外，jQuery还支持`one`方法，用于只执行一次的事件绑定，这对于一次性操作特别有用。例如： ```javascript $(selector).one('customEvent', function() { console.log('This will only be logged once.'); }...
jQuery对JavaScript操作DOM事件进行了封装，形成了更好的事件处理机制； 包括常用事件、事件绑定与解绑等。jQuery事件处理方法是jQuery的核心函数。 常用事件方法（教材P263表A-4）： 分类 事件方法 描述 鼠标 click...
- **概述**：`bind` 方法是jQuery中用于绑定事件处理程序的基本方式之一。它允许开发者为DOM元素绑定特定类型的事件处理器。这种方法适用于静态元素，即页面加载完毕后已经存在的元素。 - **语法**： ```...
在jQuery库中，事件处理变得简单且灵活，提供了多种方法来绑定、触发和管理事件。以下是对jQuery事件方法的详细总结： 1. **bind()**: `bind()` 方法允许你为一个或多个事件（如`click`、`change`等）绑定一个处理...
本文实例讲述了jQuery给动态添加的元素绑定事件的方法。分享给大家供大家参考。具体分析如下： jquery中绑定事件一般使用bind，或者click，但是这只能是对已经加载好的元素定义事件，那些后来添加插入的元素则需要...
6. 委派事件：使用`.on()`的另一种形式可以实现事件委托，如`$("body").on("click", ".myClass", function() {...})`。这种方法在动态添加的元素上也能生效，提高了代码的可维护性和效率。 二、动画效果 7. 动画...
本文将深入探讨“Jquery数据绑定分页源码”这一主题，这通常涉及到在网页应用中实现数据的动态加载和分页显示。 数据绑定是前端开发中的一个重要概念，它允许开发者将UI元素与数据源进行关联，当数据发生变化时，UI...