Jquery, 用on, click添加事件有什么区别?

初学Jquery的同学,可能知道用on,和用 click都可以为对象添加点击事件,但不知道二者之间有什么区别。
下面我们通过一些实现来说明,就知道二者的区别所在了。

操作方法

  • 01

    首先,我们看下,click事件的添加,先添加一些html代码,关键是一个样式名为btn的按钮,

  • 02

    然后添加一些JS代码,(需要先引入Jquery库文件), JS代码就是为样式名为btn的按钮,添加click事件, 点击后在id为div_result的div上写入一些提示信息

  • 03

    点击‘点击我’按钮后,正常触发了添加的对应事件。在div上显示了信息。

  • 04

    再看下on添加的事件。html代码不变,注释掉之前click事件的代码,添加相应on事件的代码,如图

  • 05

    运行后,点击按钮,也能正常触发on添加的Click事件。

  • 06

    这次,我们注释掉on添加的事件,然后用之前click事件的代码,并且在页面加载时,用js添加一个按钮,class样式名,同样为'btn'。

  • 07

    我们点击‘JS添加的按钮’,发现并没有触发对应的事件。 所以在用click注册事件后,我们再添加按钮的话,这个新加的按钮并没有对应的click事件。 因为新加的按钮是在注册事件之后,所以新加的按钮是没有注册到事件的。

  • 08

    但如果我们改用on去注册事件,如图,注册事件后,我们再添加新的按钮。

  • 09

    点击JS添加的按钮,能触发对应的事件。说明我们先用on注册了事件,然后再添加新的按钮,还是能触发对应的事件。 为什么这样,因为我们的点击事件是注册在div样式为content上(按钮的父层节点上),而不是直接注册在对应的按钮上。所以,虽然JS添加的按钮是在注册事件后,我们还是可以触发对应的事件的,只要你添加的按钮是在注册事件的div里就行了。

  • 10

    总结,如果你的html在注册事件之后,没有变化的,用click和用on注册事件都是可以的。 但如果你的html在注册事件后,还会通过JS脚本添加一些按钮,并者希望这些按钮也会有之前注册事件的按钮同样的事件话,就需要用on去为按钮的父节点去注册事件,而不应该用click去为按钮直接注册事件。

(0)

相关推荐

  • mac日历添加事件方法

    mac日历添加事件方法来啦!mac自带的日历大家知道怎么使用吗?下文小乐哥分享mac日历添加内容设置教程,如果还不是很了解如何使用mac自带的日历的朋友,可以一起来看下吧。 mac日历添加内容设置教程 ...

  • 怎么在Mac日历中添加事件?

    怎么在Mac日历中添加事件?熟悉了一段时间的Mac系统后,PC6小编发现Mac自带的日历非常好用,平时的行程安排都可以通过日历来建立事件,下面小编教大家如何在Mac上用日历添加事件. 1.首先打开&q ...

  • 三星S6如何使用S日历添加事件

    三星S6如何使用S日历添加事件

  • 正点日历怎么添加备忘事件?

    操作方法: 1.首先用户在手机中打开正点日历,在下方找到[添加事件],并点击进入;(如下图) 2.用户在添加页面输入相关提醒事件内容.提醒日期.提醒铃声时间等信息后,点击右上角的[保存]即可完成事件添 ...

  • win10系统怎么添加日历事件

    现在大部分电脑都是win10系统,有些新用户不知道怎么添加日历事件,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步根据下图箭头所指,点击右下角[日期].2. 第二步在弹出的窗口中 ...

  • VS如何为基于对话框的MFC添加菜单及菜单项事件

    新建出来的基于对话框的MFC工程是没有菜单的,如何在对话框中添加菜单?又如何给菜单的菜单项添加事件应用响应?下面小编来具体描述一下,希望能帮助到一些人. 操作方法 01 新建一个基于对话框的MFC工程 ...

  • layui如何使用按钮事件

    layui如何使用按钮事件? 其实alyui按钮和一般的按钮在使用事件上,都是没什么区别的,就是为按钮添加事件监听器就行了.下面我们来看一下. 操作方法 01 首先我们创建一个layui的按钮. 02 ...

  • js中获取事件对象的方法小结

    操作方法 01 事件对象 的获取很简单,很久前我们就知道IE中事件对象是作为全局对象( window.event )存在的,Firefox中则是做为句柄( handler )的第一个参数传入内的.所以 ...

  • Linux日历程序California 0.2 发布 添加了"自然语言"解析器

    一个合格的桌面日历是工作井井有条(以及想要井井有条)的必备工具。Chrome Web Store上广受欢迎的Sunrise应用的发布让我们的选择比以前更丰富了,而California又为之增添了新的生 ...