jq 事件机制

旧城等待, 2021-07-24 23:44 497阅读 0赞
  1. **绑定事件**
  2. 法一: 数组对象.bind("去掉on的事件名",绑定内容) 追加模式,一个事件增加多个操作,js是覆盖,可配合js追加绑定
  3. function t2()
  4. {
  5. $("#btn2").bind("click",function(){alert("我是bind绑定单击事件")});
  6. $("#btn2").bind("click",function(){alert("第二个绑定")});
  7. }
  8. 多个事件绑定相同函数
  9. 数组对象.bind('去掉on的事件名' '去掉on的事件名',函数);
  10. 多个事件绑定不同函数
  11. 数组对象.bind({'去掉on的事件名':函数,'去掉on的事件名':函数,...});
  12. 法二:
  13. $(选择器).去掉on的事件名(函数)
  14. function(){
  15. $("#b1").click(function(){alert("hh")})
  16. }
  17. **支持链式绑定**
  18. $('选择器').去掉on的事件(函数).去掉on的事件(函数).去掉on的事件(函数);
  19. 最后以分号结尾
  20. **解除绑定**
  21. 数组对象.unbind("去掉on的事件名") 去除绑定的所有指定事件,不能运用于js
  22. function t3()
  23. {
  24. $("#btn2").unbind("click");
  25. }
  26. **one事件**
  27. 数组对象.one("去掉on的事件名",执行内容) 一次性绑定,事件执行后自动解绑
  28. function t4()
  29. {
  30. $("#btn3").one("click",function(){alert("我是one")});
  31. $("#btn3").one("click",function(){alert("我是one2")});
  32. }
  33. **页面载入事件**
  34. 在页面加载时执行,无需放进body
  35. js方式
  36. 会存在相同事件覆盖的问题
  37. window.事件=函数
  38. window.onload=function(){alert("js方式一")}
  39. window.onload=function(){alert("js方式二")}
  40. window.onclick=function(){alert("js方式三")}
  41. jq方式
  42. 相同事件会绑定,不会覆盖
  43. 法一:$(document).ready(函数)
  44. $(document).ready(function(){alert("jq方式一")})
  45. $(document).ready(function(){alert("jq方式二")})
  46. 法二:$(函数)
  47. $(function(){alert($("ul>label").html())})

代码示例:

  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>jq 事件</title>
  5. <script type="text/javascript" src="js/jquery-3.4.1.js" charset="UTF-8"></script>
  6. <script type="text/javascript">
  7. function t1()
  8. {
  9. var btn=document.getElementById("btn");
  10. btn.onclick=function(){
  11. alert("js");
  12. }
  13. }
  14. function t2()
  15. {
  16. $("#btn2").bind("click",function(){ alert("我是bind绑定单击事件")});
  17. $("#btn2").bind("click",function(){ alert("第二个绑定")});
  18. }
  19. function t3()
  20. {
  21. $("#btn2").unbind("click");
  22. }
  23. function t4()
  24. {
  25. $("#btn3").one("click",function(){ alert("我是one")});
  26. $("#btn3").one("click",function(){ alert("我是one2")});
  27. }
  28. //页面载入
  29. window.onload=function(){ alert("js方式")}
  30. window.onload=function(){ alert("js方式2")}
  31. //jQuery
  32. $(document).ready(function(){ alert("jq 方式一")})
  33. $(document).ready(function(){ alert("jq 方式二")})
  34. </script>
  35. <style type=css>
  36. </style>
  37. </head>
  38. <body>
  39. <input type="button" value="测试js" onclick="t1()" />
  40. <input type="button" value="测试绑定" onclick="t2()" />
  41. <input type="button" value="测试动态解绑" onclick="t3()" />
  42. <input type="button" value="测试one" onclick="t4()"/>
  43. <hr />
  44. <input type="button" value="测试js" id="btn"/>
  45. <input type="button" name-"btn2" id="btn2" value="测试jq-bind" />
  46. <input type="button" value="测试jq-one" name="" id="btn3"/>
  47. </body>
  48. </html>

发表评论

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

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

相关阅读

    相关 JQ高级事件事件委托

    事件委托 跟字面意思一样,需要找一个东西来帮助一起完成某个东西。用我们JQ的语言来说就是,我有2000个按钮,但我们不能一个一个绑定,这样太过于浪费操作,那我们怎么做呢,事

    相关 JQ事件对象

    这次跟着李炎恢老师学习事件对象,和冒泡和默认行为!!再此记下笔记以便日后学习 首先是接收事件对象 <input type="button" value="小疯疯"/

    相关 JQ基础事件

    最近终于学到了事件,也是最常用到的地方,李炎恢老师详细的介绍了各种方法,我也是把李炎恢老师所讲的总结一下 学过JS肯定知道DOM2级的绑定事件方法addEventListen

    相关 jq trigger()事件

    1、该事件触发由bind制作的自定义函数事件,在页面加载时自动执行 语法:('选择器').trigger('自定义函数名'); 代码示例:

    相关 jq 事件机制

    绑定事件 法一: 数组对象.bind("去掉on的事件名",绑定内容) 追加模式,一个事件增加多个操作,js是覆盖,可配合js追加绑定 fun