javascript - 关于 JS 中 onclick="" 与 $('').on('click',); 区别

问题描述

问 题

有这样的一个函数

function addProduct(obj) {
    console.log(obj);
}

分别有以下这样两种方式操作
第一种

<span class="dab1">+对比</span>

<script>
    $('.dab1').on('click', addProduct);
</script>

第二种

<span onclick="addProduct(this)">+对比</span>

第一种执行的结果如下

第二种执行方式如下

为什么执行出来的结果不一样呢? 如何让第二种方法执行的结果和第一种一样.

解决方案

楼主最好检查一下你的代码。毕竟你那个内联调用的时候传入是this而不是事件对象

如果修改第二个例子的代码成

<span onclick="addProduct(event)">+对比</span>

在chrome里面就会是Event对象的实例了。

但是需要提一下的是，使用jquery的事件监听函数on

$('.dab1').on('click', addProduct);

回调函数的第一个参数得到的不仅仅是Event对象的实例，而是jQuery增强版Event对象的实例。

jQuery为了让所有的浏览器的事件都表现完全一致，是下了不少功夫的。--- 自己实现了一套冒泡，捕捉机制。

同时也给浏览器原有的事件对象做了扩展。

让我们来到源码里找到答案把。

关键的一个函数 fix 函数
把原有的事件对象和jQuery的Event对象的实例做了一次merge。于是后面的事件对象的传递都是加了jQuery.Event补丁的原生事件对象。

如果顺藤摸瓜，找到jQuery.Event.prototype的时候，就会发现原有的stopPropagation和preventDefault都被jQuery重写了。做了有关IE的兼容。

这篇关于javascript - 关于 JS 中 onclick="" 与 $('').on('click',); 区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！