JQuery-事件绑定详解

一时失言乱红尘 2022-11-29 12:20 304阅读 0赞

目录

定义元素监听事件

on() 绑定事件


定义元素监听事件

语法:$(选择器).监听事件名称(处理函数);

说明:监听事件名称是 js事件中去掉 on 后的内容, js 中的onclick的监听事件名称是 click

例如: 为页面中所有的 button 绑定 onclick,并关联处理函数 fun1

$(“button”).click(fun1(){//函数处理动作})

on() 绑定事件

on() 方法在被选元素上添加事件处理程序。该方法给 API 带来很多便利,推荐使用该方法

语法:$(选择器).on(event,,data,function)

event:事件一个或者多个,多个之间空格分开

data:可选。规定传递到函数的额外数据,json 格式

function: 可选。规定当事件发生时运行的函数。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
  8. <style>
  9. div{
  10. background: yellow;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <div id="mydiv">
  16. 我是一个div ,需要增加一个button
  17. </div>
  18. <input type="button" value="创建一个button,绑定一个click" id="btn1"/><br/>
  19. </body>
  20. <script>
  21. //在dom对象创建好后,绑定事件
  22. $(function(){
  23. $("#btn1").click(function(){
  24. //使用append增加dom对象
  25. $("#mydiv").append("<input id='newBtn' type='button' value='我是新加入的按钮'/>");
  26. //使用on给按钮绑定事件
  27. $("#newBtn").on("click",function(){
  28. alert("新建的按钮被单击了");
  29. })
  30. })
  31. })
  32. </script>
  33. </html>

#

发表评论

表情:
评论列表 (有 0 条评论,304人围观)

还没有评论,来说两句吧...

相关阅读

    相关 jQuery动态事件

    jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定。在1.7版本以前使用live。但是在1.8

    相关 jQuery--解除事件

    解除事件绑定 在元素绑定事件之后,当在某个时刻不再需要该事件处理时,可以解除所绑定的事件。在jQuery中提供了unbind()和undelegate()方法,分别用于解