Fork me on GitHub

jQuery中的事件

执行时机

1、 当所有页面元素都加载完成再执行

  1. //原生javascript方法
  2. window.onload = function(){
  4. }
  6. //测试
  7. function one(){
  8. alert("one");
  9. }
  10. function two(){
  11. alert("two");
  12. }
  14. window.onload = one;
  15. window.onlaod = two;
  17. window.onload = function(){
  18. one();
  19. two();
  20. }
  22. //jQuery方法
  23. $(window).load(function(){
  25. })

2、 当DOM元素加载完就执行

  1. $(document).ready(function(){
  3. })
  5. $().ready(function(){
  7. })
  9. $(function(){
  11. })

事件绑定

jQuery中事件的绑定，通过one()和on()方法。

常见事件类型

  1. blur //当输入域失去焦点
  2. focus //当输入域获得焦点
  3. load //当加载时，触发事件
  4. resize //对浏览器窗口调整大小时
  5. scroll //对元素滚动时
  6. unload //当用户点击链接离开本页时
  7. click //单击
  8. dblclick //双击
  9. mousedown //当按下鼠标按钮时
  10. mouseup //当松开鼠标按钮时
  11. mousemove //当鼠标指针在指定的元素中移动时
  13. mouseover //当鼠标指针放到元素上时（子元素上也生效）
  14. mouseout //当鼠标离开元素时（子元素上也生效）
  15. mouseenter //当鼠标指针放到元素上时
  16. mouseleave //当鼠标离开元素时
  17. hover //合成事件，鼠标放上去、鼠标离开
  18. toggle() //显示、隐藏
  20. change //当输入域发生变化 表单 区分于blur
  21. select //当 textarea 或文本类型的 input 元素中的文本被鼠标选中时
  22. submit //提交表单
  23. keydown //当按下按键时(只发生一次)
  24. keypress //每插入一个字符，就会发生keypress事件。
  25. keyup //当按钮被松开时
  26. error

练习

  1. <div id="panel">
  2. <h5 class="head">谁才是武汉最好的PHP培训机构？</h5>
  3. <div class="content">
  4. 武汉长乐教育，是最专业的武汉PHP培训机构。
  5. www.whphp.com是我们在武汉PHP市场主要的IT教育培训宣传网站，请您认证域名www.whphp.com。
  6. 当您在寻找一个真正能学会技术的武汉PHP培训学校，那就来武汉长乐教育吧。
  7. </div>
  8. </div>
  1. //用到方法 is(":visible")

阻止事件冒泡和默认行为

什么是事件冒泡

  1. <script type="text/javascript">
  2. $(function(){
  3. // 为span元素绑定click事件
  4. $('span').on("click",function(){
  5. var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
  6. $('#msg').html(txt);
  7. });
  8. // 为div元素绑定click事件
  9. $('#content').on("click",function(){
  10. var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
  11. $('#msg').html(txt);
  12. });
  13. // 为body元素绑定click事件
  14. $("body").on("click",function(){
  15. var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
  16. $('#msg').html(txt);
  17. });
  18. })
  19. </script>
  20. </head>
  21. <body>
  22. <div id="content">
  23. 外层div元素
  24. <span>内层span元素</span>
  25. 外层div元素
  26. </div>
  28. <div id="msg"></div>
  1. $('a').click(function(event){
  2. event.stopPropagation(); //阻止事件冒泡
  3. event.preventDefault(); //阻止默认行为
  5. //$('a').click(function(e){
  6. //e.stopPropagation(); //阻止事件冒泡
  7. //e.preventDefault(); //阻止默认行为
  10. //return false;
  11. })

移除事件

  1. <script>
  2. $(function(){
  3. $("p").click(function(){
  4. $(this).slideToggle();//隐藏
  5. });
  7. $("button").click(function(){
  8. $("p").off(); //没有参数，删除所有的绑定事件,不要使用unbind()了(废弃)
  9. //$("p").off("click");
  10. });
  11. });
  12. </script>
  14. <p>这是一个段落。</p>
  15. <p>这是另一个段落。</p>
  16. <p>点击任何段落可以令其消失。包括本段落。</p>
  17. <button>删除 p 元素的事件处理器</button>

给动态增加的元素绑定事件

  1. <script>
  2. $(function(){
  3. //$("p").click(function(){
  4. //$(this).css("background-color","pink");
  5. //})
  6. $(document).on("click","p",function(){
  7. $(this).css("background-color","pink");
  8. })
  9. $("button").click(function(){
  10. $("div").append("<p>动态增加的元素</p>")
  11. })
  12. });
  13. </script>
  14. <div><p>本来的的元素</p></div>
  15. <button>点我</button>
posted @ 2018-10-25 14:09  big2cat  阅读(161)  评论(0)  编辑  收藏  举报