javaScript中的onclick与jquery中的click区别

Posted 2021-01-14 jennydtt

来来来，先看一个例子：

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()方法的写法不一样。

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