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();

jQuery 之 事件

jquery事件

主动触发与自定义事件

事件冒泡

事件委托

推荐阅读更多精彩内容

jQuery 之事件