JQuery $().click()与$().on(click...)区别

jQuery的出现，大大简化了对dom的操作，但是如果不是仔细阅读api和进行操作，就不知道其中最大的优点和使用方式。就拿 ( ) . c l i c k ( ) 和 ().click()和 ().click()和(document).on(‘click’,‘要选择的元素’,function(){})来说，都是点击事件的操作，但是也有不同的地方。

$(选择器).click(fn)
　当选中的选择器被点击时触发回调函数fn。只针对与页面已存在的选择器

<body><ul><li>1</li><li>2</li><li>3</li><li>4</li></ul><script src="jquery.min.js"></script><script>$(function(){$('ul>li').click(function(){console.log($(this).html());});$('ul').append('<li>5</li><li>6</li>');})</script>
</body>

结果如下：后面动态创建的5和6，没法进行点击事件触发

2.$(document).on('click','要选择的元素',function(){})on方法包含很多事件，点击，双击等等事件。和$().click()的用法一样，最大的区别即优点是如果动态创建的元素在该选择器选中范围内是能触发回调函数。

<body><ul><li>1</li><li>2</li><li>3</li><li>4</li></ul><script src="jquery.min.js"></script><script>$(function(){$('body').on('click','ul>li',function(){console.log($(this).html());});$('ul').append('<li>5</li><li>6</li>');})</script>
</body>

结果如下：动态添加的元素也能被点击触发函数。

( ) . o n ( ) 的知识点补充： 1. 从 j Q u e r y 1.7 开始， o n ( ) 函数提供了绑定事件处理程序所需的所有功能，用于统一取代以前的 b i n d ( ) 、 d e l e g a t e ( ) 、 l i v e ( ) 等事件函数。 ().on()的知识点补充：　　1.从jQuery 1.7开始，on()函数提供了绑定事件处理程序所需的所有功能，用于统一取代以前的bind()、 delegate()、 live()等事件函数。　　　　 ().on()的知识点补充：　　1.从jQuery1.7开始，on()函数提供了绑定事件处理程序所需的所有功能，用于统一取代以前的bind()、delegate()、live()等事件函数。　　　　().bind()直接绑定在元素上，和click，blur，mouseon一样的点击事件。
　　　　 ( ) . l i v e ( ) 是通过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到 d o c u m e n t D O M 节点上。 ().live()是通过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到document DOM节点上。　　　　 ().live()是通过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到documentDOM节点上。　　　　().delegate()是更精确的小范围的使用事件代理。
　　　$().on()结合了这三个方法的优势摒弃了劣势。

2.该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。
　　3. 阻止事件冒泡和事件委托的方法：
　　　　A：return false。
　　　　　　在事件的处理中，可以阻止默认事件和冒泡事件。

B：event.preventDefault()
　　　　　　在事件的处理中，可以阻止默认事件但是允许冒泡事件的发生。

C：event.stopPropagation().。
　　　　　　在事件的处理中，可以阻止冒泡但是允许默认事件的发生。
转载自：热爱前端的17号诶
https://www.cnblogs.com/sqh17/p/7746418.html

JQuery $().click()与$().on(click...)区别相关推荐

click() bind() live() delegate()区别
click(),bind(),live()都是执行事件时使用的方法,他们之前是有一些区别的,我们在使用这些方法时应该根据需要进行选择. 1.click()方法是我们经常使用的单击事件方法: <s ...
click()和onclick()的区别
click()和onclick()的区别: 1.onclick是绑定事件,告诉浏览器在鼠标点击时候要做什么 click本身是方法作用是触发onclick事件,只要执行了元素的click()方法,就会触 ...
js中click()与onclick()的区别
由一个简单示例到 js中click()与onclick()的区别之前朋友在学习js的时候遇到一个有意思的问题. 先贴一份代码说一下代码构成这里是html结构 <ul><li> ...
click和on click区别
click和onclick的区别 onclick是绑定事件,告诉浏览器在鼠标点击时候要做什么:click本身是方法,作用是触发onclick事件,只要执行了元素的click()方法,就会触发oncli ...
jQuery中click和onclick的区别
click()和onclick()的区别: 1.onclick是绑定事件,告诉浏览器在鼠标点击时候要做什么 click本身是方法作用是触发onclick事件,只要执行了元素的click()方法,就会触 ...
click和onclick的区别
click与onclick区别 click是对象的方法,onclick是事件,当我们点击按钮是,首先触发的是事件,然后是方法: <html> <head><title&g ...
JS中click和onclick本质区别
本文主要JavaScript中click和onclick本质区别 click是一个方法,onclick是一个事件. 求同: 告诉浏览器在鼠标点击时候要做什么. 存异: click属于方法,是JS语句直 ...
@click.stop和@click.prevent区别
click.stop stop:指的是阻止父组件(节点)的事件冒泡... <div id="app"><div class="box" @cl ...
Vue之@click、事件修饰符@click.stop与@click.prevent、按键修饰符@keyup.enter
1.绑定监听@click: (以监听click为例,其他如keyup,用法类似) v-on:click="fun" @click="fun" @cli ...
MUI click事件无效 click没反应 click监听不到
MUI click事件无效 click没反应 click监听不到(有的说tap会点击两次,换成click就没事的案例,试了一下不成功还是用tap比较好) html 部分代码: <li id=&q ...

JQuery $().click()与$().on(click...)区别

JQuery $().click()与$().on(click...)区别相关推荐

最新文章

热门文章