jquery 笔记（三）之事件

1.在页面加载后执行任务

1.引用函数与调用函数

将函数指定为事件处理程序时，如果带着圆括号，函数会被立即调用；没有圆括号，函数名就只是函数的标识符或函数引用，可以用于在将来在调用函数。

2..ready()方法

1一：().ready()方法支持我们预定在dom加载完成之后调用某个函数，而不必等待页面中的图像加载。同时他为我们提供了很好的跨浏览器解决方案：1.尽可能使用浏览器的原生的dom实现就绪，并以window.onload事件处理程序作为后备。2.可以多次调用并按照调用他们的顺序执行3.即便是在浏览器事件发生之后把函数传给().ready() ，这些函数也会执行
4.异步处理事件的约定，必要时脚本可以延迟执行
5.通过重复检查一个几乎与 dom 同时可用的方法，在较早版本的浏览器中模拟 dom 就绪事件
6.ready()方法的参数可以是一个已经定义好的函数的引用

$().ready(function(){

})

这种匿名写作的函数在 jquery 中十分方便，特别适合传递那些不会被重用的函数。而且与此同时创建的闭包也是一种非常高级和强大的工具。但是，加入处理不当的话，闭包也会给我们带来意想不到的后果和内存占用问题。

3.什么是加载完成？

一般来说使用$(document).ready()要优于使用onload 事件处理程序，但必须要明确的一点是，因为支持文件可能还没有加载完成，所以类似图像的高度和宽度这样的属性此时不一定会有效。如果需要访问这些属性，可能就得选择一个onload事件处理程序（或者是使用jquery为load事件设置处理程序）这两种机制能够和平共存。

4.避免$命名冲突

由于很多库都使用标识符，因此就需要一种方式来避免名称冲突。jquery提供了一种加jQuery.noConflict()方法，调用该方法可以把对标识符的控制权让渡还给其他库。

<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
</script>
<script src="myscript.js></script>

调用jQuery.noConflict();，可以将控制权交还给最先包含的库（prototype.js），这样就可以在自定义脚本中使用两个库了，但是，在需要使用jquery方法时，必须要记住要用jQuery而不是用$来调用。

jQuery(document).ready(function($){
// 我们可以在函数内部将jQuery重命名为$，而不必担心造成冲突。
});

样式转换器demo

2.事件传播

1..hover()方法

.hover() 接受两个函数参数，第一个函数会在鼠标指针进入被选择的元素时执行，而第二个函数会在鼠标指针离开该元素时触发。同时，使用.hover()一意味着可以避免js 中的事件传播导致的头痛问题。

$(document).ready(function(){
    $('class').hover(function(){},function(){});
}

2.事件的旅程

<div>
    <span>
        <a>
        </a>
    </span>
</div>

• 事件捕获：事件首先交给最外层的元素，接着在交给更具体的元素，即
  ->->
• 事件冒泡：当事件发生时，首先交给最具体的元素，在这个元素获得响应机会之后，事件会向上冒泡到更一般的元素。即：->->

为了全包跨浏览器的一致性，而且也为了让人更容易理解，jquery会始终的事件的冒泡阶段注册事件处理程序。因此，我们总是可以假定最具体的元素会首先获得响应事件的机会。

3.事件冒泡的副作用

事件冒泡可能会导致始料不及的行为，特别是在错误的元素响应mouseover或者mouseout事件的情况下。假设在我们这个例子中，为

注册了一个mouseout事件处理程序，当用户的鼠标指针退出这个

时，会按照预期运行mouseout事件处理程序。因为这个过程发生在顶层元素上，所以其他的元素不会取得这个事件。但是，当指针从元素上离开时，元素回取得一个mouseout事件。然后这个事件会向上冒泡到和

，从而触发事件处理程序。这种冒泡序列不是我们所希望的。

mouseenter和moseleave事件，无论是单独绑定，还是在.hover()方法中组合绑定，都可以避免这些冒泡问题。