.on()
和 .off()
分别用来绑定和解除事件。这两个函数可以取代之前版本中所有的事件处理函数。现在事件绑定和解除更简单了,下面是新旧版本事件处理代码的对比:
$('a').bind('click', myHandler);
$('a').on('click', myHandler);
$('form').bind('submit', { val: 42 }, fn);
$('form').on('submit', { val: 42 }, fn);
$(window).unbind('scroll.myPlugin');
$(window).off('scroll.myPlugin');
$('.comment').delegate('a.add', 'click', addNew);
$('.comment').on('click', 'a.add', addNew);
$('.dialog').undelegate('a', 'click.myDlg');
$('.dialog').off('click.myDlg', 'a');
$('a').live('click', fn);
$(document).on('click', 'a', fn);
$('a').die('click');
$(document).off('click', 'a');
另外想说一下jQuery中的事件对象(Event Object):
jQuery的事件系统规范化了事件对象(根据W3C标准)。jQuery保证事件对象被传递给事件处理程序。大部分的属性从原来的事件中复制和规范化给新的事件对象。
jQuery保证下列属性是事件对象的成员,尽管它们中的一些值可能是undefined(依赖于具体的事件):
altKey, attrChange, attrName, bubbles, button, cancelable,
charCode, clientX, clientY, ctrlKey, currentTarget, data, detail,
eventPhase, fromElement, handler, keyCode, layerX, layerY,
metaKey, newValue, offsetX, offsetY, originalTarget,
pageX, pageY, prevValue, relatedNode, relatedTarget,
screenX, screenY, shiftKey, srcElement, target,
toElement, view, wheelDelta, which
为了跨浏览器兼容,jQuery 对下列属性进行了规范化:
target
relatedTarget
pageX
pageY
which
metaKey
特别注意,并不是所有原始事件的属性都被复制给jQuery的事件对象。这时可以用 event.originalEvent 来获取原始事件对象。比如在HTML5文件拖放操作时需要用到drop事件的dataTransfer属性,可以像下面这样做:
$('body').on('drop',function(e){
var file = e.originalEvent.dataTransfer.files[0];//获取一组拖放文件中的第一个文件
reader = new FileReader();//创建FileReader对象来读取文件内容
reader.onload = function(e){//读取完成时将内容显示于body中
$('body').text(e.target.result);
};
reader.readAsText(file,'utf-8');//开始读取文件
//相当于同时调用e.stopPropagation() 和 e.preventDefault()
return false;//阻止事件冒泡和浏览器的默认行为
});
没有评论:
发表评论