[关闭]
@omg-two 2017-01-10T02:17:10.000000Z 字数 4802 阅读 787

jQuery基础-事件篇

jQuery

鼠标事件

  • .click()与.dbclick()
    1. $ele.click():用于手动指定触发事件，例如$("ele").click()，则表示主动触发点击事件。
    2. $ele.click(function(eventObject)):绑定元素$ele,每次$ele元素触发点击动作则会调用回调函数。this指向绑定事件的元素。
    3. $ele.click([eventData],function(eventObject)):接受传递数据参数，同时调用回调函数。
  1. //方法一
  2. <div id="test">点击触发<div>
  3. $("ele").click(function(){
  4.     alert('触发指定事件')
  5. })
  6. $("#test").click(function(){
  7.      $("ele").click()  //手动指定触发事件 
  8. });
  9. //方法二
  10. <div id="test">点击触发<div>
  11. $("#test").click(function() {
  12.     //this指向 div元素
  13. });
  14. //方法三
  15. <div id="test">点击触发<div>
  16. $("#test").click(11111,function(e) {
  17.     //this指向 div元素
  18.     //e.date  => 11111 传递数据
  19. });
  • .mousedown()与.mouseup()
    1. 三种方法，同上。
  • .mousemove()
    1. 三种方法，同上。
  • .mouseover()与.mouseout()
    1. 三种方法，同上。
    2. 由于冒泡的方式处理问题，mouseover事件会在后代节点上被触发。
  • .mouseenter()与.mouseleave()
    1. 三种方法，同上。
    2. mouseenter事件只会在绑定它的元素上被调用，而不会在后代节点上被触发。
  • .focusin()
    1. 当一个元素，或者其内部任何一个元素获得焦点的时候，通过该事件捕获这个动作。
    2. 三种方法，同上。
    3. 作用在元素包含的元素上。
  • .focuseout()
    1. 当一个元素，或者其内部任何一个元素失去焦点的时候，通过该事件捕获这个动作。
    2. 三种方法，同上。
    3. 作用在元素包含的元素上。
  • .hover()
    1. 鼠标在元素上移进移出动作的捕获。
    2. $(selector).hover(handlerIn,handlerOut):handlerIn(eventObject),当鼠标指针进入元素时触发执行的事件函数;handlerOut(eventObject),当鼠标指针离开元素时触发执行的事件函数。
  1. // hover()方法是同时绑定 mouseenter和 mouseleave事件。
  2. // 我们可以用它来简单地应用在 鼠标在元素上行为
  3. $("p").hover(
  4.     function() {
  5.         $(this).css("background", 'red');
  6.     },
  7.     function() {
  8.         $(this).css("background", '#bbffaa');
  9.     }
  10. );

表单事件

  • focus()与blur()
    1. 聚焦与离开焦点的事件。作用于元素上。
    2. 使用例子如下，注意与focusin的作用范围区别。
  1. <h4>.focusin与blur</h4>
  2. <div class="left">
  3.     <div class="aaron">
  4.         点击触发焦点(无反应)：
  5.         <input type="text" />
  6.     </div>
  7.     <div class="aaron1">
  8.         点击触发焦点并冒泡：
  9.         <input type="text" />
  10.     </div>
  11. </div>
  12. <script type="text/javascript">
  13. $(".aaron").focus(function() {
  14.     $(this).css('border', '2px solid red')
  15. })
  16. $(".aaron1").focusin(function() {
  17.     $(this).find('input').val('冒泡捕获了focusin事件')
  18. })
  19. </script>
  • change()
    1. 对于选择类的，比如单选按钮、复选框、下拉选择框等，做出选择时就触发事件。对于值输入类的，比如input文本框、textarea多行文本框等，则当有改变时，失焦后触发事件。
  1. //监听input值的改变
  2. $('.target1').change(function(e) {
  3.     $("#result").html(e.target.value)
  4. });
  • select()
    1. 文本选择事件。
    2. select事件只能用于 < input > 元素与 < textarea > 元素。
    3. select()下例方法一中，主动触发事件会导致chrome下触发三次，除非在handler函数中返回false。原因不明，疑似与浏览器默认提交有关或冒泡提交有关。
  1. //方法一:触发元素选中事件 
  2. //.select()
  4. $("input").select();
  6. //方法二:元素选中操作执行回调handler函数 
  7. //.$ele.select( handler(eventObject) )
  9. <input id="test" value="文字选中"></input>
  10. $("#test").select(function() { //响应文字选中回调
  11.     //this指向 input元素 
  12. });
  14. //方法三：与方法二一致，可接受参数传入
  15. //$ele.select( [eventData ], handler(eventObject) )
  17. <input id="test" value="文字选中"></input>
  18. $("#test").select(11111,function(e) {//响应文字选中回调
  19.     //this指向 div元素 
  20.    //e.date  => 11111 传递数据
  21. });
  • submit()
    1. 表单提交元素，三种方法同上。
    2. <input type="submit"> <input type="image"> <button type="submit">以及当某些表单元素获取焦点时，敲击Enter（回车键）都会触发表单提交行为。
    3. form元素默认有表单提交行为，若要通过submi处理的话，需要禁止默认行为。如下所示。
  1. //传统方式
  2. e.preventDefault()
  4. //jQuery处理方式
  5. $("#target").submit(function(data) { 
  6.    return false; //阻止默认行为，提交表单
  7. });

键盘事件

  • keydown()与keyup()
    1. 键盘按下与弹起事件。
    2. 三种方法，手动触发已经绑定事件；直接绑定元素；传递参数。如下：
  1. //直接绑定事件
  2. $elem.keydown( handler(eventObject) )
  3. //传递参数
  4. $elem.keydown( [eventData ], handler(eventObject) )
  5. //手动触发已绑定的事件
  6. $elem.keydown()
  • keypress()
    1. 效果上与keydown()差不多。
    2. 只能捕获单个字符，不能捕获组合件
    3. 无法响应系统功能键，不区分小键盘数字与主键盘数字。

1.理论上，keydown()与keyup()可以绑定到人和网元素，但是事件只发送到具有焦点的元素上。

事件的绑定和解绑

  • .on():绑定事件到元素上。
    1. 基本用法：on( events ,[ selector ] ,[ data ] )
    2. 多个事件绑定同一个函数：
      $("#elem").on("mouseover mouseout",function(){})
    3. 多个事件绑定不同函数:
      $("#elem").on({
      mouseover:function(){},
      mouseout:function(){},
      });
    4. 将数据传递到处理程序:

      function greet( event ) {
      alert( "Hello " + event.data.name ); //Hello 慕课网
      }
      \$( "button" ).on( "click", {
      name: "慕课网"
      }, greet );
    5. 委托机制：.on( events ,[ selector ] ,[ data ], handler(eventObject) )
      事件绑定在父辈元素上，但是触发留在后代元素上。如下例所示：
  1. //参考下面3层结构
  3. <div class="left">
  4.     <p class="aaron">
  5.         <a>目标节点</a> //点击在这个元素上
  6.     </p>
  7. </div>
  8. //给出如下代码：
  10. $("div").on("click","p",fn)

事件绑定在最上层div元素上，当用户触发在a元素上，事件将往上冒泡，一直会冒泡在div元素上。如果提供了第二参数，那么事件在往上冒泡的过程中遇到了选择器匹配的元素，将会触发事件回调函数。一般用于动态添加元素时。

  • .off():解绑事件。
    1. 当传入参数时，则删除对应事件；当无参数传入时，默认删除所有事件。
  1. //绑定2个事件
  2. $("elem").on("mousedown mouseup",fn)
  4. //删除一个事件
  5. $("elem").off("mousedown")
  7. //删除所有事件
  8. $("elem").off("mousedown mouseup")
  9. //等价于
  10. $("elem").off()

事件对象的使用

  • 事件说明：
    1. this和event.target的区别：js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；
    2. this和event.target都是dom对象：如果要使用jquey中的方法可以将他们转换为jquery对象。比如this和的使用、和(event.target)的使用；
      3.event.stopPropagation() 方法：阻止事件冒泡。
      事件是可以冒泡的，为防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数。

自定义事件

  • trigger事件：根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为。
    1. 自定义事件对象，是jQuery模拟原生实现
    2. 可以传递参数
    3. 会在dom树上冒泡
    4. 事件对象event无法完美实现。
  1. $('#elem').on('Aaron', function(event,arg1,arg2) {
  2.     alert("自触自定义时间")
  3.  });
  4. $('#elem').trigger('Aaron',['参数1','参数2'])
  • triggerHandler事件
    1. 不会触发浏览器默认行为
    2. 仅仅影响第一个匹配元素。
    3. 不会再dom树上冒泡
    4. 返回最后一个处理的事件的返回值，如果没有触发，返回undefined。
  1. <div class="left">
  2.     <div id="accident">
  3.         <a>triggerHandler事件</a>
  4.         <input type="text">
  5.     </div>
  6.     <button>事件冒泡,触发浏览器默认聚焦行为</button><br><br>
  7.     <button>不会冒泡，不触发浏览器默认聚焦行为</button>
  8. </div>
  9. <script type="text/javascript">
  11.     //给input绑定一个聚焦事件
  12.     $("input").on("focus",function(event,title) {
  13.         $(this).val(title)
  14.     });
  16.     $("#accident").on("click",function() {
  17.         alert("trigger触发的事件会在 DOM 树中向上冒泡");
  18.     });
  19.     //trigger触发focus
  20.     $("button:first").click(function() {
  21.         $("a").trigger("click");
  22.         $("input").trigger("focus");
  23.     });
  25.     //triggerHandler触发focus
  26.     $("button:last").click(function() {
  27.         $("a").triggerHandler("click");
  28.         $("input").triggerHandler("focus","没有触发默认聚焦事件");
  29.     });
  30. </script>
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注