JavaScript:事件绑定与监听

事件绑定与监听

事件是JavaScript应用程序的核心，是所有内容的驱动。

事件的绑定与解绑

事件的实现在主流浏览器之间存在较大差异，但是了解事件的机制仍然非常重要，以W3C中的事件模型作为研究对象。

1. 事件监听的绑定函数：

函数签名：addEventListener(eventType, callback, useCapture)

参数说明：eventType：事件类型，例如：click、blur等

callback：事件被触发时执行这个函数

useCapture：事件传播机制：如果为true时，事件处理程序以捕捉（capturing）模式触发，反之，事件处理

以冒泡模式触发，可以使用event对象中的stopPropagation()函数终止冒泡。

通过调用event对象的preventDefault()函数来阻止默认行为，同样也可以通过在回调中返回false来实现同样的效果。

2.事件监听的解绑函数：

函数签名：removeEventListener(eventType, callbackListenerl)

参数说明：eventType：移除事件的类型，例如：click、blur等；如果监听的函数是匿名函数，没有任何引用指向它，在

不销毁目标元素的前提下，这个监听是无法被移除的。

事件库

处理众多浏览器的差异性需要借助第三方JavaScript类库来支持，例如：jQuery、MooTools、YUI等。
jQuery的API提供了bind()函数来跨浏览器绑定事件监听，传人事件名称和回调函数，例如：
jQuery('#elementId').bind(eventName, handler);还提供了快捷方式：jQuery('#elementId').click(callback);
需要保证DOM元素存在并被已被加载。

切换上下文

new function(){
this.appName = 'ucfpay';
document.body.addEventListener('click', function(event){
// 上下文发生改变，因此appName是undefined
alert(this.appName);
}, false);
};
要想保持原有的上下文，需要将回调函数包装进一个匿名函数，然后定义一个引用指向它。
使用代理函数来保持当前的上下文。jQuery中提供了proxy()函数，只需将指定的上下文传人函数即可：
$('signinForm').submit($.proxy(function(){/* ... */}), this);

委托事件

从事件冒泡时开始就发生了事件委托，我们可以直接给父元素绑定事件监听，用来检测在其子元素内
发生的事件，用来建设应用
中的事件监听的数量：
// 在ul列表上座了事件委托
list.addEventListener('click', function(e){
if (e.currentTarget.tagName == 'li'){
/* ... */
return alse;
}
}, false);
jQuery提供了delegate()函数，可以减少事件监听的数量，改善代码性能：
$('ul li').click(function(){/* ... */});
$('ul').delegate('li','click',function(){/* ... */}); // 事件委托，所有为元素添加的子元素都具有事件监听。

自定义事件

jQuery中可以使用trigger()函数来触发自定义事件。可以通过命名空间形式来管理事件名称。
// 绑定自定义事件
$('.className').bind('refresh.widget', function(){});

// 触发自定义事件

$('.className').trigger('refresh.widget');

通过给trigger()传人一个额外的参数来给事件处理程序传人数据。数据会员附加参数的形式带人回调：

$('.class').bind('frob.widget', function(event, dataNumber){

console.log(dataNumber);

});

$('.class').trigger('frob.widget', 5);

和内置事件一样，自定义事件同样会沿着DOM树做冒泡。

自定义事件和jQuery插件

DOM无关事件