jquery内核学习(11)--事件模型(下)

在事件模型中, 上一节介绍了原生的js事件模型. 但是在不同浏览器间规范还是有一定的区别(IE), 因此为了更好地兼容不同类型的浏览器, jquery在js的基础上进一步封装了不同的事件模型. 考虑到IE不支持捕获阶段触发; 且开发者也很少适用这个阶段, 故jquery事件流中也不支持该阶段, 除了这一点以外其它的功能都与DOM 2级事件模型相似.

绑定事件

bind()

bind('click', [data], fn);

与addEventListener类似, 第一个是无前缀on的事件类型, fn也是事件处理函数;data比较特殊, 可选参数. 在fn可通过event.data访问到传递的数据对象.

// 给处理函数传递参数$('p').bind('click', {a:'A', b:'B'}, function(event) {    $(this).text(event.data.a + event.data.b);  // AB});

若想阻止默认行为的发生, 或者是阻止事件冒泡. 在事件处理函数中返回false.

// 如上的例子$('p').bind('click', {a:'A', b:'B'}, function(event) {    $(this).text(event.data.a + event.data.b);  // AB    return false;});// 其它方法.event.stopPropagation();event.preventDefault();

除了bind以外, jquery还有20给快捷方法为特定的事件绑定事件处理程序.

$("p").bind('click', function() {    alert($(this).text());});// 更直接地$("p").click(function() {    alert($(this).text());});

注意: 当适用如上的快捷方式时, 无法想event.data属性传递额外的数据.

// 当不给这些方法传递处理函数时<div>test</div>$('div').bind('click', function() {    alert($(this).text());});$('div').click();   // 直接触发click事件.

使用one()绑定

使用方法和bind一样, 唯一的区别的one在执行一次后就自动销毁.

销毁事件

unbind方法用来销毁事件, 能够从每一个匹配的元素中删除绑定的事件. 若无参数则删除所有的绑定事件, 包括自定义事件.

// 为p绑定一堆事件<p>text</p>$("p").click(f);$('p').mouseover(f);$('p').mouseout(f);// 销毁绑定的所有事件$('p').dbclick(function() {    $('p').unbind();});function f(event) {    this.innerHTML = "event type: " + event.type;}// 删除某一类型的事件$('p').unbind('click'); // 只删除所有的点击事件$('p').unbind('click', f);  // 只删除某一类型事件的某一个处理函数

关于Event对象的更多属性和方法, 点击这里了解.

jquery事件触发

trigger('click', [data]);

即触发特定类型的事件, 而不需要用户真正的去点击什么的. 这样触发的事件会有冒泡过程, 并且也会触发浏览器的默认行为.

triggerHandler('click', [data]);

与上面的主要区别在于: 不会触发浏览器的默认行为, 只触发jquery对象集合中第一个元素的事件处理函数. 返回的是事件处理函数的返回值而不是jquery对象.

除了上面两个函数以外, jquery还提供了很多快捷触发方法.

事件切换

• toggle()

可包含多个处理函数, 当点击事件发生以后. 依次轮流执行这些函数.

$('input').toggle(    function() {        this.value = "first";    },    function() {        this.value = "second";    },    function() {        this.value = "third";    });//<input type="button" value="value">

hover()

包含两个参数, 第一个是鼠标移动到元素上要触发的函数, 第二个是鼠标移除时触发的函数.

// html<input type="button" value="hover">$('input').hover(    function() {        this.value = "mouseover";    },    function() {        this.value = "mouseout";    });

mouseout事件有个BUG, 即当鼠标移动到当前元素包含的子元素上时, 会触发当前元素的mouseout和mouseover事件. 故使用jquery的bind, mouseout(), mouseover()方法也会有相同的问题. 故使用hover()能有效避免上面情况的出现.

jquery事件委派

live()

用法和bind相同, 但是live()方法能够给当前以及未来将会匹配的元素绑定一个事件处理函数. 而bind则对后面加入的元素无效.

live()只支持使用选择器选择的元素, 如: $('li a').live(...), 但不支持类似于:$('a', someElement).live()或者$('a').parent().live()等.

live的事件冒泡和传统事件略有不同, 部分支持stopPropagation. 若内外元素都用live事件绑定, 则可以通过return false来阻止冒泡, 若外部父元素是不同事件而内部是live事件则无法通过return false阻止冒泡.

通过die来移除绑定, 使用方法和unbind类似.

jquery事件命名空间

可以给绑定的相同事件取别名, 方便后面的管理或者销毁. 如click.a. a就是click当前事件的别名, 即事件命名空间.

$('div').bind('click.a', function() {});$('div').bind('click.b', function() {});$('div').bind('dbclick.a', function() {});// 这样销毁特定的事件$('div').unbind('.a');  // 删除所有别名是a的事件// 对于trigger()方法$('div').trigger('click!'); // 加!, 表示触发没有命名空间的click事件

在js中自定义bind方法

// DOMextend的定义在前面第9讲有介绍DOMextend('bind', function(type, data, fn) {    var _this = this;    if ( _this.addEventListener ) { // 非IE        _this.addEventListener(type, function(event) {            event.datas = data; // 传递用户的自定义数据对象            fn(event);  // 执行事件处理函数        }, false);  // 冒泡阶段触发    } else { // IE        _this.attachEvent('on' + type, function() {            var event = window.event;            event.datas = data;            fn(event);        });    }    return _this;});// 在使用的时候使用event.datas获取用户传递的数据对象

自定义one方法

// DOMextend的定义在前面第9讲有介绍DOMextend('bind', function(type, data, fn) {    var _this = this;    if ( _this.addEventListener ) { // 非IE        _this.addEventListener(type, function(event) {            _this.removeEventListener(type, arguments.callee, false);   //            触发一次后就注销事件            event.datas = data; // 传递用户的自定义数据对象            fn(event);  // 执行事件处理函数        }, false);  // 冒泡阶段触发    } else { // IE        _this.attachEvent('on' + type, function() {            _this.detachEvent('on' + type, arguments.callee);   // 注销事件            var event = window.event;            event.datas = data;            fn(event);        });    }    return _this;});// 在使用的时候使用event.datas获取用户传递的数据对象

arguments.callee

function test() {    alert(arguments.callee);}test(); // 返回函数体/* function test() {     alert(arguments.callee); }*/