jQuery 之 事件

jquery事件

• 事件函数列表：

  • blur() : 元素失去焦点
  • focus() : 元素获得焦点
  • change() : 表单元素的值发生变化
  • click() : 鼠标单击
  • dblclick() : 鼠标双击
  • mouseover() : 鼠标进入（进入子元素也触发）
  • mouseout() : 鼠标离开（离开子元素也触发）
  • mouseenter() : 鼠标进入（进入子元素不触发）
  • mouseleave() : 鼠标离开（离开子元素不触发）
  • hover() : 同时为mouseenter和mouseleave事件指定处理函数
  • mouseup() : 松开鼠标
  • mousedown() : 按下鼠标
  • mousemove() : 鼠标在元素内部移动
  • keydown() : 按下键盘
  • keypress() : 按下键盘
  • keyup() : 松开键盘
  • load() : 元素加载完毕
  • ready() : DOM加载完成
  • resize() : 浏览器窗口的大小发生改变
  • scroll() : 滚动条的位置发生变化
  • select() : 用户选中文本框中的内容
  • submit() : 用户递交表单
  • toggle() : 根据鼠标点击的次数，依次运行多个函数
  • unload() : 用户离开页面

• 绑定事件的其他方式

  $(function(){
      $('#div1').bind('mouseover click', function(event) {
          alert($(this).html());
      });
  });
  

• 取消绑定事件

    $(function(){
        $('#div1').bind('mouseover click', function(event) {
            alert($(this).html());
  
            // $(this).unbind();
            $(this).unbind('mouseover');
  
        });
    });
  

主动触发与自定义事件

• 主动触发

  • 可使用jquery对象上的trigger方法来触发对象上绑定的事件。

• 自定义事件

  • 除了系统事件外，可以通过bind方法自定义事件，然后用tiggle方法触发这些事件。

    //给element绑定hello事件
    element.bind("hello",function(){
        alert("hello world!");
    });
    
    //触发hello事件
    element.trigger("hello");
    

事件冒泡

• 什么是事件冒泡

  • 在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）

• 事件冒泡的作用

  • 事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。

• 阻止事件冒泡

  • 事件冒泡机制有时候是不需要的，需要阻止掉，通过 event.stopPropagation() 来阻止

    $(function(){
        var $box1 = $('.father');
        var $box2 = $('.son');
        var $box3 = $('.grandson');
        $box1.click(function() {
            alert('father');
        });
        $box2.click(function() {
            alert('son');
        });
        $box3.click(function(event) {
            alert('grandson');
            event.stopPropagation();
    
        });
        $(document).click(function(event) {
            alert('grandfather');
        });
    })
    
    ......
    
    <div class="father">
        <div class="son">
            <div class="grandson"></div>
        </div>
    </div>
    

• 阻止默认行为

  • 阻止右键菜单

  $(document).contextmenu(function(event) {
      event.preventDefault();
  });
  

• 合并阻止操作

  • 实际开发中，一般把阻止冒泡和阻止默认行为合并起来写，合并写法可以用

  // event.stopPropagation();
  // event.preventDefault();
  
  // 合并写法：
  return false;
  

• 页面弹框实例

事件委托

事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。

• 一般绑定事件的写法

  $(function(){
      $ali = $('#list li');
      $ali.click(function(event) {
          $(this).css({background:'red'});
      });
  })
  ...
  <ul id="list">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
  </ul>
  

• 事件委托的写法

  $(function(){
      $list = $('#list');
      $list.delegate('li', 'click', function(event) {
          $(this).css({background:'red'});
      });
  })
  ...
  <ul id="list">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
  </ul>
  

• 取消事件委托

  // ev.delegateTarge 委托对象
  $(ev.delegateTarge).undelegate();
  
  // 上面的例子可使用 $list.undelegate();