1 常用事件

  • click() 鼠标单击
  • blur() 元素失去焦点
  • focus() 元素获得焦点
  • mouseover() 鼠标进入（进入子元素也触发）
  • mouseout() 鼠标离开（离开子元素也触发）
  • ready() DOM加载完成

    注: 文档对象模型（Document Object Model，简称DOM）

2 代码示例

  1.         <script src="js/jquery-1.12.4.min.js"></script>
  2.     <script>
  3.         $(function(){
  4.             var $lis = $("ul li");
  5.             var $btn = $("#btn1");
  6.             var $txt = $("#txt1");
  7.             var $div = $("div");
  8.             // 添加点击事件
  9.             $lis.click(function(){
  10.                 // 设置当前点击的标签对象为红色
  11.                 $(this).css({"color":"red"});
  12.                 // 获取点击标签的索引
  13.                 alert($(this).index());
  14.             });
  15.             $btn.click(function(){
  16.                 // 获取文本框的内容
  17.                 alert($txt.val());
  18.             });
  19.             // 获取焦点事件
  20.             $txt.focus(function(){
  21.                 $(this).css({"background":"red"});
  22.             });
  23.             // 失去焦点事件
  24.             $txt.blur(function(){
  25.                 $(this).css({"background":"white"});
  26.             });
  27.             // 鼠标进入事件
  28.             $div.mouseover(function(){
  29.                 $(this).css({"background":"green"});
  30.             });
  31.             // 鼠标离开事件
  32.             $div.mouseout(function(){
  33.                 $(this).css({"background":"white"});
  34.             });
  35.         });
  36.     </script>
  37. </head>
  38. <body>
  39.     <div>
  40.         <ul>
  41.             <li>苹果</li>
  42.             <li>鸭梨</li>
  43.             <li>香蕉</li>
  44.         </ul>
  45.         <input type="text" id="txt1">
  46.         <input type="button" id="btn1" value="按钮">
  47.     </div>
  48. </body>
  49. </html>

3 事件代理

  • 事件冒泡: 事件会向它的父级一级级传递
  • 事件代理: 利用事件冒泡的原理, 把事件加到父级标签上, 通过判断事件来源, 执行相应的子元素的操作. 事件代理可以极大减少事件绑定次数, 提高性能; 让新加入的子元素也可以拥有相同的操作