Home / Questions / 22829
Accepted
Hoose
Asked: 2020-09-07 16:11:25 +0800 CST 2020-09-07 16:11:25 +0800 CST

on.click 和 click 有什么区别？

  • 772

那么，这两种方法有什么区别呢？它在语义上是相同的还是会影响某些东西？

$('#demo').on('click', function() {
  alert('Click con on.click');
});

$('#demo2').click(function() {
  alert('Click con click');
});
#demo{
  background-color:#F2F2F2;
  width:500px;
  height:100px;
  text-align:center;
  vertical-align: middle;
  display:table-cell;
  cursor:pointer;
}

#demo2{
  background-color:#E6E6E6;
  width:500px;
  height:100px;
  text-align:center;
  vertical-align: middle;
  display:table-cell;
  cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="demo">Click con on.click</div>
<div id="demo2">Click con click</div>

jquery

2 Answers

  1. Best Answer

    也许最重要的区别是它.on('click', selector, function(){})允许您使用在 DOM 加载后添加的元素，而.click(function(){})这不允许。

    $('#test1').on('click', '.demoOnClick',function() {                  
  console.log('Click con on.click');
});

$('.demoClick').click(function() {
  console.log('Click con click');
});

$('#crearBoton').click(function() {
  $('#test1').append('<div class="demoOnClick">Clic para On.click</div><div class="demoClick">Clic para .click</div>');
});
    #crearBoton {
  border: solid 1px;
  cursor: pointer;
  width: 100px;
}

.demoOnClick {
  border: solid 1px blue;
  margin: 5px;
  padding: 5px;
}

.demoClick {
  border: solid 1px red;
  margin: 5px;
  padding: 5px;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test1">
  
  </div>
<div id="crearBoton">Clic aqui</div>

    其他区别：

    • .on()为选择器中包含的所有元素.click()创建一个处理程序，同时为每个元素创建一个处理程序。
    • on()允许使用命名空间。
    • 16

  2. 我想补充一些关于这个话题的东西。该方法.on允许事件委托，但也可以listener通过改变语法直接使用。

    关键是在调用中为其提供一个选择器。所以：

    $(document).on('click', myEventHandler)您将听到整个文档的所有点击声。

    $('#myElement').on('click', myEventHandler)它将侦听来自 myElement （及其自身）的所有后代的所有点击。

    $('#myElement').on('click', '.mySelector', myEventHandler)它的作用与上面相同，但.mySelector在调用myEventHandler.

    所以： $('#myElement').on('click', myEventHandler)它与

    $('#myElement').click(myEventHandler)

    “允许使用在 DOM 加载后添加的元素”的原因on是实际上listener在包含它的较低级别元素中声明了一个 for 该事件。

    更清晰：

    $('#myDIV').on('click', 'button', myEventHandler)

    实际上，接收事件的是listener声明的那个，然后它myDIV通过选择器过滤button它包含的所有元素。

    这就是为什么向它添加一个新的按钮元素会对myDIV事件做出反应click。

    简单的！;)

    一个日常的例子。当我们使用一些framework诸如aalert的组件时Bootstrap。我们看到，通过使用 automatic 属性向 DOM 动态添加警报，关闭按钮会导致警报关闭，data-dismiss="alert"而无需附加listener. 这是因为在 Bootstrap js 库内部它所做的是：

    $(document).on('click', '[data-dismiss="alert"]', myHandler).

    然后myHandler它执行最接近的dismiss类元素（方法）等。alertjQuery.closest

    您如何jQuery识别单击了哪个警报按钮？感谢event bubbling... 即使listener在根元素 ( document) 上设置了 ，该事件实际上click发生在警报按钮上，并一直持续下去，直到它收到它为止document。然后它jQuery过滤所有并通过该方法alerts调用，并将发起事件的元素（ ）作为参数传递。handlerapplyjavascriptbutton

    当我们$(document).on('click', 'button.myClass', myHandler) jQuery在内部使用它时，它是document.addEventListener('click', myHandler, false).

    所以它会捕获clicks页面上的所有对象，然后执行dispatchto object button.myClass。

    • 1