jQuery中对未来的元素绑定事件用bind、live or on

在jQuery中，我们可以对元素绑定事件，从而实现特定的交互操作。但是，有些情况下，我们希望能够对未来的元素绑定事件，即新增元素后也能触发我们定义的事件操作。那么，在这种情况下，我们应该如何使用jQuery来实现呢？这就需要用到bind、live或on这三种方法来实现。

1. bind方法

bind方法是最早的一种对未来元素绑定事件的方法。它可以绑定一个或多个事件处理程序，以及一个事件发生时，可选地阻止默认行为和阻止事件冒泡。

他的基本语法为:

$(selector).bind(event,data,function)

其中，event为必选参数，表示绑定的事件类型，如click、mousemove等；

data则为可选参数，表示传递到事件处理程序的数据；

function则为对事件的响应函数，可以是匿名函数或函数名。

示例一：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script type="text/javascript">
    $(function () {
      $('button').bind('click', function () {
        $('<p></p>').text('这是用bind方法创建的新段落').appendTo('body');
      });
    });
  </script>
</head>
<body>
  <button>创建新段落</button>
  <p>这是原有的段落</p>
</body>
</html>

示例二：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script type="text/javascript">
    $(function () {
      $('body').bind('click', function (event) {
        console.log('X坐标：' + event.pageX);
        console.log('Y坐标：' + event.pageY);
      });
    });
  </script>
</head>
<body>
  <p>点击页面获得当前鼠标的X坐标和Y坐标</p>
</body>
</html>

以上两个示例都利用了bind方法来对新创建的元素绑定事件。

2. live方法

live方法是一个相对较新的对未来元素绑定事件的方法。它基于事件委托机制，从根元素处对事件进行捕获，从而实现对未来元素的事件绑定。

它的基本语法如下所示：

$(selector).live(event,data,function)

其中，selector为必选参数，表示要绑定事件的元素；

event为必选参数，表示绑定的事件类型；

data为可选参数，表示传递给事件处理程序的数据；

function表示对事件的响应函数。

示例一：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script type="text/javascript">
    $(function () {
      $('body').append('<button id="btn">动态创建按钮</button>');
      $('#btn').live('click', function () {
        $('<p></p>').text('这是用live方法创建的新段落').appendTo('body');
      });
    });
  </script>
</head>
<body>
  <p>点击“动态创建按钮”创建新段落</p>
</body>
</html>

示例二：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script type="text/javascript">
    $(function () {
      $('.block').live('click', function () {
        $(this).css('background-color', 'red');
      });
    });
  </script>
</head>
<body>
  <div class="block"></div>
  <p>点击div块使其背景变成红色</p>
</body>
</html>

以上两个示例都利用了live方法来对新创建的元素绑定事件。

3. on方法

on方法是jQuery 1.7版本之后新增的一种对未来元素绑定事件的方法。它可以绑定一个或多个事件处理函数到匹配元素集合中的每个元素。

他的基本语法如下所示：

$(selector).on(event,data,function)

其中，selector为必选参数，表示要绑定事件的元素；

event为必选参数，表示绑定的事件类型，可以为多个事件类型，多个事件类型之间以空格隔开；

data为可选参数，表示传递给事件处理程序的数据；

function表示对事件的响应函数。

示例一：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script type="text/javascript">
    $(function () {
      $('p').on('click', 'span', function () {
        $(this).css('color', 'red');
      });
      $('p').append('<span>动态创建的文字</span>');
    });
  </script>
</head>
<body>
  <p>这是一段文本</p>
</body>
</html>

示例二：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script type="text/javascript">
    $(function () {
      $('#btn').on('mouseover mouseout', function () {
        $(this).toggleClass('highlight');
      });
    });
  </script>
  <style type="text/css">
    .highlight {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <button id="btn">鼠标经过/离开时高亮</button>
</body>
</html>

以上两个示例都利用了on方法来对新创建的元素绑定事件。

总的来说，bind方法是最早的一种对未来元素绑定事件的方法，它的返回值为jQuery对象，不支持事件委托；

而live方法是一种使用事件委托机制实现的对未来元素绑定事件的方法，它的返回值也为jQuery对象，可以支持事件委托；

on方法是一种比较新的，能够绑定多个事件类型并能实现事件委托的对未来元素绑定事件的方法，它的返回值同样为jQuery对象。

因此，在实际应用中，我们可以根据具体的情况来选择相应的方法来对未来元素绑定事件。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery中对未来的元素绑定事件用bind、live or on - Python技术站

jQuery中对未来的元素绑定事件用bind、live or on

1. bind方法

2. live方法

3. on方法

相关文章