首页 > 软件开发 > JQUERY >

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

来源:互联网 2023-03-16 23:54:18 290

初学Jquery的同学,可能知道用on,和用 click都可以为对象添加点击事件,但不知道二者之间有什么区别。k69办公区 - 实用经验教程分享!

下面我们通过一些实现来说明,就知道二者的区别所在了。k69办公区 - 实用经验教程分享!

方法/步骤

  • 1

    首先,我们看下,click事件的添加,先添加一些html代码,关键是一个样式名为btn的按钮,k69办公区 - 实用经验教程分享!

    Jquery, 用on, click添加事件有什么区别?k69办公区 - 实用经验教程分享!

  • 2

    然后添加一些JS代码,(需要先引入Jquery库文件),k69办公区 - 实用经验教程分享!

    JS代码就是为样式名为btn的按钮,添加click事件, 点击后在id为div_result的div上写入一些提示信息k69办公区 - 实用经验教程分享!

    Jquery, 用on, click添加事件有什么区别?k69办公区 - 实用经验教程分享!

  • 2本页面未经授权抓取自百度经验
  • 3

    点击‘点击我’按钮后,正常触发了添加的对应事件。在div上显示了信息。k69办公区 - 实用经验教程分享!

    Jquery, 用on, click添加事件有什么区别?k69办公区 - 实用经验教程分享!

    Jquery, 用on, click添加事件有什么区别?k69办公区 - 实用经验教程分享!

  • 4

    再看下on添加的事件。html代码不变,注释掉之前click事件的代码,添加相应on事件的代码,如图k69办公区 - 实用经验教程分享!

    Jquery, 用on, click添加事件有什么区别?k69办公区 - 实用经验教程分享!

  • 5

    运行后,点击按钮,也能正常触发on添加的Click事件。k69办公区 - 实用经验教程分享!

    Jquery, 用on, click添加事件有什么区别?k69办公区 - 实用经验教程分享!

  • 6

    这次,我们注释掉on添加的事件,然后用之前click事件的代码,并且在页面加载时,用js添加一个按钮,class样式名,同样为'btn'。k69办公区 - 实用经验教程分享!

    Jquery, 用on, click添加事件有什么区别?k69办公区 - 实用经验教程分享!

  • 7

    我们点击‘JS添加的按钮’,发现并没有触发对应的事件。k69办公区 - 实用经验教程分享!

    所以在用click注册事件后,我们再添加按钮的话,这个新加的按钮并没有对应的click事件。k69办公区 - 实用经验教程分享!

    因为新加的按钮是在注册事件之后,所以新加的按钮是没有注册到事件的。k69办公区 - 实用经验教程分享!

    Jquery, 用on, click添加事件有什么区别?k69办公区 - 实用经验教程分享!

  • 8

    但如果我们改用on去注册事件,如图,注册事件后,我们再添加新的按钮。k69办公区 - 实用经验教程分享!

    Jquery, 用on, click添加事件有什么区别?k69办公区 - 实用经验教程分享!

  • 9

    点击JS添加的按钮,能触发对应的事件。说明我们先用on注册了事件,然后再添加新的按钮,还是能触发对应的事件。k69办公区 - 实用经验教程分享!

    为什么这样,因为我们的点击事件是注册在div样式为content上(按钮的父层节点上),而不是直接注册在对应的按钮上。所以,虽然JS添加的按钮是在注册事件后,我们还是可以触发对应的事件的,只要你添加的按钮是在注册事件的div里就行了。k69办公区 - 实用经验教程分享!

    Jquery, 用on, click添加事件有什么区别?k69办公区 - 实用经验教程分享!

  • 10

    总结,如果你的html在注册事件之后,没有变化的,用click和用on注册事件都是可以的。k69办公区 - 实用经验教程分享!

    但如果你的html在注册事件后,还会通过JS脚本添加一些按钮,并者希望这些按钮也会有之前注册事件的按钮同样的事件话,就需要用on去为按钮的父节点去注册事件,而不应该用click去为按钮直接注册事件。k69办公区 - 实用经验教程分享!

  • 以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!k69办公区 - 实用经验教程分享!


    标签: JQUERY

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码