一、事件函数列表：

blur() ：元素失去焦点
focus()：元素获得焦点

focus的一般用法：

$('#input01').focus();

这条语句的效果是打开网页时，使用focus方法的标签（一般是Input type="text"）自动被选中，可以直接输入内容。

blur的效果：既然获得焦点是自动选中文本框，那么失去焦点就是在移出文本框时触发一定的效果。
比如：

$('#input01').blur(function(){
    // 获取input元素的值
    var sVal = $(this).val();
    alert(sVal);
})

这段语句的效果就是当移出文本框时，弹出文本框中的内容。

click()：鼠标单击
这个之前经常用，也比较好理解，就不多说了。

mouseover()：鼠标进入（进入子元素也触发）
mouseout()：鼠标离开（离开子元素也触发）
mouseenter()：鼠标进入（进入子元素不触发）
mouseleave()：鼠标离开（离开子元素不触发）
和鼠标有关的事件都比较好理解，也比较好实现。

// 子元素触发
$('.con').mouseover(function(){
    alert('移入');
})
$('.con').mouseout(function(){
    alert('移出');
})

// 子元素不触发
 $('.con2').mouseenter(function(){
    alert('移入');
})
$('.con2').mouseleave(function(){
    alert('移出');
})

hover()：同时为mouseenter和mouseleave事件指定处理函数。
使用hover()可以代替上面的mouseenter()和mouseleave()。

// 和上面子元素不触发的语句等价
$('.con2').hover(function(){
    alert('移入');
},function(){
    alert('移出');
})

ready()：DOM加载完成
ready事件之前也用过很多次了，就是获取，可以简写成一个$(function(){})
resize()：浏览器窗口的大小发生改变

$(window).resize(function(){
    var $w = $(window).width();

    document.title = $w;
})

resize常常用来直接用在$(window)上，上面这条语句的效果是当浏览器窗口尺寸发生变化时，在title上显示当前窗口的宽度。

scroll()：滚动条的位置发生变化
也比较好理解，就是当滚动页面的时候触发一定的效果
submit()：用户递交表单
一般用在form标签上，可以获取到数据提交时返回的值。

二、绑定事件的其他方式

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

    });
});

三、事件冒泡

什么是事件冒泡

在一个对象上触发某类事件（比如单击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>

在这个例子中我们定义了三个嵌套的盒子（father>son>grandson），并给每个box建立一个click事件。
在不使用语句event.stopPropagation()的情况下，我们点击grandson时，会依次弹出grandson、son、father，这就是事件冒泡。同理，点击son时，会依次弹出son、father。

有些时候我们并不想要这种冒泡机制，他会妨碍我们的效果，这时候就要使用

event.stopPropagation();

和上面的代码一样，我们在使用这个语句的时候需要在function()里添加一个event参数。
使用阻止冒泡机制的语句后，再次点击grandson时，就只会弹出grandson了。

阻止默认行为

阻止表单提交

$('#form1').submit(function(event){
    event.preventDefault();
})

合并阻止操作

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

// event.stopPropagation();
// event.preventDefault();

// 合并写法：
return false;

阻止默认行为、阻止事件冒泡的语句都可以用return false代替，事实上也很少用那两个语句。

四、事件委托

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

一般绑定事件的写法

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

看起来好像没什么区别，但是在特定场景下事件委托十分的方便。
比如我现在用jquery语句新加一个li

var $li = $('<li>9</li>');
$('.list').append($li);

如果我们用的是一般绑定事件，执行之后我们点击第九个li，它的背景颜色是不会变的。想要变的话必须要给第九个li单独编写一个绑定。

但是如果我们使用事件委托，把添加li的语句写在事件委托下面，保存执行后，点击第九个标签也会改变背景颜色。

Python笔记:jQuery和js库 10.7——jQuery事件