javaScript中的onclick与jquery中的click区别

Posted jennydtt

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javaScript中的onclick与jquery中的click区别相关的知识,希望对你有一定的参考价值。

来来来,先看一个例子:

html部分,定义几个按钮

<div class="carousel-btn">
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
</div>
js部分,实现点击按钮弹出是第几个按钮:

1、原生js实现

for(var i=0;i<_btn.length;i++){
_btn[i].onclick=function () {
alert(i)
}
}

这个会出现啥问题呢?——————————你会发现点击按钮都会弹出 4。因为函数体内的i与for循环内的i是同一个i,for循环执行完i为4,所以在执行点击事件的时候就会都弹出4。

那该咋解决呢?——————那就把函数体的i和for循环的i分来嘛,那怎样分开呢?那就把i赋加到按钮的一个属性上嘛

 index 属性——可返回索引位置

那么:

for(var i=0;i<_btn.length;i++){
_btn[i].index = i;
_btn[i].onclick=function () {
alert(this.index)
}
}
这下结果就正确了吧~~~~
虽然这样解决了,但想想还有其他什么简便办法吗?
1、用es6中的let解决变量作用域问题:
for(let i=0;i<_btn.length;i++){
_btn[i].onclick = function () {
alert(i)
}
}
2、jquery中的click方法是干啥的呢?要不用它试试呗

_btn.click (function () { alert($(this).index())})
果然好使!
那么我们来看看代码是怎么实现的...........
对比第二种方式,发现竟然不用循环,不用i,那个this和这个$(this)是啥区别,那个index与这个index()又是什么关系?为什么onclick要用=连接函数,而click却用()?
来我们一条一条理解:
1、为什么不用循环?如果你在第二条中不用循环,直接_btn.onclick()你会发现报错;原因就是,_btn是数组形式,而onclick只能针对一个dom元素进行操作;而click却能针对数组操作;
2、this和$(this)区别?首先,this是html中的元素,它相当于一个指针;而$()=jquery(),$(this)是jquery中的对象,所以$(this)能调用jquery中的方法;
this,表示当前的上下文对象是一个html DOM对象,可以调用html对象所拥有的属性,方法。
$(this),代表的上下文对象是一个jquery的上下文对象,可以调用jquery的方法和属性值。
3、index与index()区别?上面也说了,index是HTML DOM的一个属性,返回索引位置;index()是jquery DOM元素中的一个方法。index()方法用于返回指定元素相对其他指定元素的index位置;
$(this)就是指当前点击的那个元素,可以调用jquery中的index()方法;而this是html的对象,可以直接使用html中的属性index;
4、onclick与click区别?

首先,两者本质区别:onclick是js原始的事件,click是jquery中新增的方法,click方法是执行会触发onclick事件,原生的js中没有click方法。

click是动作,点击事件,onclick是监听点击事件的发生并调用相应的监听处理函数。、

onclick是绑上事件,告诉浏览器在鼠标点击的时候应该做什么;

click是触发事件,模拟鼠标的点击操作;

onclick后面加函数,onclick是点击事件,后面的函数是要点击的操作(函数);onclick=funtion(){}是函数表示式的形式;

click()是方法,括号内再加一个函数的话click(function)这个函数就是回调函数,就是将一个函数作为参数传递给click方法,click就会执行或者调用所传递给它的函数;function是规定当发生click事件时运行的函数;而onclick是事件不是方法,所以不能将一个函数作为参数传递给事件,只能传递给函数;所以onclick事件与click()方法的写法不一样。

有不正确的地方欢迎批评指正~~~~~

 



































以上是关于javaScript中的onclick与jquery中的click区别的主要内容,如果未能解决你的问题,请参考以下文章

手机页的点击事件怎么写,是不是还要加载jquery mobile? 能不能同时加载电脑版jquer

javascript 【ver2】可视范囲に入ってたらfadeIn※要jQuer

javascript 中的 t.onclick = do Something 和 t.onclick = do Something() 有啥区别? [复制]

Javascript 和 jQuery 中 onclick 与 click的区别拙见

javascript tamañojavascriptstring dimensiones dinamicamente ancho texto nodo dom elemento jquer

jquer 事件,选择器,dom操作