【jQuery】事件处理

一、浏览器的事件模型
1、DOM第0级事件
事件处理器是通过将一个函数实例的引用赋值给DOM元素的属性来声明的。
例：$(#example)[0].onmouseover=function(event){say(‘crackle.’)};
什么事event参数？
（1）Event实例
在大部分浏览器中，当一个事件处理器被触发时，名为Event的类实例会作为第一个参数出入处理器中。IE除外，IE将Event实例保存到一个名为event的全局属性中。
经常会有：

if (!event) event=window.event;
          var target=(event.target) ? event.target : event.srcElement;

（2）事件冒泡
在目标元素有机会处理事件后，事件模型会检查目标元素的父元素，看其是否已经为此事件类型创建了处理器，如果是，就调用已创建的时间处理器，之后检查它的父元素，以及父元素的父元素，直到DOM树的顶部。
（3）影响事件传播和语义动作
可以调用Event实例的stopPropagation()方法来阻止事件向更高层的祖先元素传播。对于IE则可以设置Event实例的属性cancelBubble的值为true。
可以将时间处理器的返回值设为false来取消默认动作。
2、DOM第2级事件
（1）建立事件处理器
也称监听器，通过元素方法创建，而不是把函数引用赋值给元素属性。每个元素都定义有一个addEventListener(eventType,listener,useCapture)方法。
eventType用来获取需要处理的事件类型；listener用来在元素上创建指定事件类型的处理器
（2）事件传播
当触发一个事件时，事件首先从DOM树的根部向下传播到目标元素，称为捕获阶段；然后再依次从目标元素向上传播到DOM根部，称为冒泡阶段。
useCapture设置false，创建冒泡型处理器；设置为true，创建捕获型处理器。
3、IE事件模型
IE为每个DOM元素定义了一个名为attachEvent(enentName,handler)方法。第一个参数用来指定需要附加的事件类型的名称；第二个参数是需要创建的处理器函数。
二、jQuery的事件模型
1、使用jQuery绑定事件处理器
bind(eventType,data,handler)
bind(eventMap)
——创建一个函数，将其作为在匹配集中所有元素上指定的事件类型的事件处理器
eventType—指定事件类型的名称
data—提供的数据，用来附加到Event实例的data属性
handler—将要创建为事件处理器的函数。当调用此函数时，会传入Event实例，并设置函数上下文（this）为冒泡阶段的当前函数。
eventMap—允许在一次调用中创建多个事件类型的处理器
例：

$(‘.whatever’).bind({
        click: function(event) {/*handle clicks*/},
        mouseenter: function(event) {/* handle mouseenters*/},
        mouseleave: function(event) {/* handle mouseleaves*/}
});

eventTypeName(listener)——特定的时间绑定，创建一个指定的函数，将其作为方法名称同名的事件类型的事件处理器。支持的方法有：blur\change\click\dbclick\focus\focusin\focusout\keydown\keypress\keyup\load\mousedown\mouseenter\mouseleave\mousemove\mouseout\mouseover\mouseup\ready\resize\scroll\select\submit\unload.
注意：这些便捷方法使用时，不能指定存储在event.data属性中的data值。
one(eventType,data,listener)——创建一个函数，并将其作为匹配集中所有元素指定事件类型的事件处理器。该处理器一旦执行完毕，就会被自动删除。
2、删除事件处理器
unbind(eventType,listener)
unbing(event)
——为包装集中的所有元素删除由可选的传入参数指定的事件处理器。如果没有提供参数，则会从元素上删除所有的监听器
例：$(‘*’).unbind(‘.fred’);——删除命名空间fred下的所有事件监听器
3、event实例
jQuery定义了一个传入浏览器的jQuery.Event类型的对象，并复制了大部分的原始Event属性，但是其维护了一套规范化的值和方法，独立于浏览器使用它们。
独立于浏览器的jQuery.Event属性:
altKey\ctrlkey\currentTarget\data\metaKey\pageX\pageY\relatedTarget\screenX\screenY\shiftKey\result\target\timestamp\type\which；
方法：
preventDefault()\stopPropagation()\stopImmediatePropagation()\isDefaultPrevented()\isPropagationStopped()\isImmediatePropagationStopped()。
4、预先管理事件处理器
（1）创建“live”事件处理
live(eventType,data,listener)——当指定类型的事件在元素（任何用来创建包装集的与选择器相匹配的元素）上发生时，会将传入的监听器作为处理器调用，而无论在调用live方法时这些元素是否已经存在
eventType—和bind()不同，不能指定空格分隔的事件类型列表
注：a.“live”事件不是原生的“普通”事件。当类似于单击的事件发生时，它会沿着DOM元素向上传播，并调用每一个已经创建的事件处理器。一旦事件到达用来创建包装集的上下文，上下文会在子节点中检查匹配“live”选择器的元素。“live”事件处理器会在每个匹配的元素上触发，并且这个已触发的事件不能继续传播。
b.live()方法只能应用于选择器，不能应用于衍生而来的包装集。比如$(‘img’).closest(‘div’).live(…)就是不合法的。
（2）删除“live”事件处理
die(eventType,listener)——删除由live()创建的“live”事件处理器，并且阻止在将来创建的元素上调用处理器
5、触发时间处理器
jQuery提供了在脚本控制下自动触发事件处理器的方法。
trigger(eventType,data)——在所有匹配元素上调用为传入的事件类型创建的处理器
data——将要作为第二个参数传入处理器的数据，将作为参数传入监听器
triggerHandler(eventType,data)——在所有匹配元素上调用为传入的事件类型创建的处理器，不会冒泡、不会执行语义动作，也不会触发“live”事件
便捷方法：
eventName()——在所有匹配元素上调用为命名事件类型创建的处理器。支持的方法如下：blur\change\click\dbclick\focus\focusin\focusout\keydown\keypress\keyup\load\mousedown\mouseenter\mouseleave\mousemove\mouseout\mouseover\resize\scroll\select\submit\unload
6、其他事件相关的方法
（1）起切换作用的监听器
toogle(listener1,listener2,…)——将传入的函数创建为包装集中所有元素的单击事件处理器的循环列表。处理器将依次在随后的单击事件中被调用
例：单击一次图片，会伸展到下一个更大的尺寸，循环。

$(‘img[src*=small]’).toggle(
        function(){
    $(this).attr(‘src’,$(this).attr(‘src’).replace(/small/,’medium’));
},
function(){
    $(this).attr(‘src’,$(this).attr(‘src’).replace(/medium/,’large’));
},
function(){
    $(this).attr(‘src’,$(this).attr(‘src’).replace(/large/,’samll’));
}
);

（2）在元素上悬停鼠标
hover(enterHandler,leaveHandler)
hover(handler)——为匹配元素创建mouseenter和mouseleave事件处理器。这些处理器只会在鼠标进入或者离开元素覆盖区域时被触发，而忽略移动到子元素的转变
enterHandler——将要成为mouseenter处理器的函数
leaveHandler——将要成为mouseleave处理器的函数
handler——mouseenter和mouseleave事件发生时都会调用的单个处理器
三、更多的事件
1、通过模板复制创建元素
clone()
希望在某个元素的末尾添加模板实例，而这个元素的变量名whatever

$(‘div.template.filterChooser’).children().clone().appendTo(whatever);

选择要复制的模板容器（使用放置于模板标记中的类），选择模板容器的子元素（不需要复制

，只需要复制它的内容），复制这些子节点，然后将它们添加到由whatever识别的元素内容的末尾。
2、建立主体标记

——放置过滤器的容器

——接收结果的容器 3、添加新的过滤器 为AddFilter按钮建立单击处理器：

$(‘#addFilterButton’).click(function(){
var filterItem=$(‘div’).addClass(‘filterItem’).appendTo(‘#filterPane’).data(‘suffix’,’.’+(filterCount++)); //创建过滤//器项目快
$(‘div.template.filterChooser’).children().clone().appendTo(filterItem)
.trigger(‘adjustName’);  //出发自定义事件
})

4、添加限定控件

$(‘select.filterChooser’).live(‘change’,function(){  //建立改变处理器
var  filterType=$(‘:selected’,this).attr(‘data-filter-type’);
var  filterItem=$(this).closest(‘.filterItem’);
$(‘.qualifier’,filterItem).remove();   //删除任何旧的控件
$(‘div.template.’+filterType)
     .children().clone().addClass(‘qualifier’)  //复制合适的控件
     .appendTo(filterItem)
     .trigger(‘adjustName’);
$(‘option[value=””]’,this).remove();   //删除过时的选项
})

5、删除不需要的过滤器和其他任务
当单击删除按钮时，需要找出最近的父级过滤器并删除它

$(‘button.filterRemover’).live(‘click’,function(){
    $(this).closest(‘div.filterItem’).remove();
});

注：初始的过滤器，可以在页面加载后，模拟一次Add Filter按钮的单击行为：

   $(‘#addFilterButton’).click();