转自个人博客

在JavaScript 有一个异常重要的功用，就是事宜驱动。假如你的网页须要与用户举行交互的话，就不能够不用到事宜。它在页面完整加载后，用户经由历程鼠标或键盘触发页面中绑定事宜的元素即可触发。jQuery为开辟者更有用力的编写事宜行动，封装了大批事宜要领供我们运用。

基本事宜

一. 绑定事宜

假如你进修过原生的javascript事宜，比方经常使用的事宜：click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout等等。假如正好你运用的是事宜绑定的体式格局举行触发的话，肯定会晓得它有何等难处置惩罚，种种浏览器的兼容性，this的指向等等，然则在jQuery中，一切都不再是题目了。

jQuery 经由历程.bind()要领来为元素绑定这些事宜。能够通报三个参数：.bind(eventType [,eventData ],handler(event))

1. eventType：示意一个或多个DOM事宜范例，比方click mouseover。

2. eventData：可选参数，示意一个对象，它包含的数据键值对映照将被通报给事宜处置惩罚顺序。

3. handler(event)：示意绑定到指定元素的处置惩罚函数。event示意事宜对象。

下面就是绑定的几种体式格局：

1. 点击按钮后实行匿名函数

$('button').bind('click', function() {
    alert('点击！');//运用点击事宜
});

1. 实行平常函数式不必圆括号

$('button').bind('click', fn); 
function fn() {//平常处置惩罚函数
    alert('点击！');
}

1. 能够同时绑定多个事宜

$('button').bind('mouseout mouseover', function() { 
    $('div').html(function(index, value) {
        return value + '1';//移入和移出离别实行一次
    });
});

1. 另一种体式格局：通报一个对象

$('button').bind({ 
    'mouseout': function() { //事宜名的引号能够省略
        alert('移出');
    },
    'mouseover': function() {
        alert('移入');
    }
});

删除绑定函数：

删除绑定函数.unbind( eventType [, handler ] )有三种差别的用法:

$('button').unbind(); //删除当前元素的一切事宜,包含匿名实行的，在js中匿名实行的事宜函数没法删除。

$('button').unbind('click'); //删除当前元素的click事宜，使unbind参数删除指定范例事宜

$('button').unbind('click', fn1); //只删除click事宜的fn1处置惩罚函数。

二. 简写事宜

固然jQuery为开辟者不简简朴单供应了事宜绑定的要领就不论别的了，为了使开辟者越发轻易的绑定事宜，jQuery 封装了经常使用的事宜以便勤俭更多的代码。我们称它为简写事宜。

大部分事宜都犹如上面表格中的形貌平常比较简朴，也比较好明白。

下面着重讲几个须要注重的处所：

1. unload(fn)、resize(fn)、scroll(fn)，运用$(window)对象触发。

2. change(fn)：触发的前提是，输入框的值有转变，且落空核心。

3. submit(fn)：必须在form中，而且运用$("form")作为事宜触发元素，不然无效。

4. .mouseover()和.mouseout()示意鼠标移入和移出的时刻触发。那末 jQuery 还封装了别的一组：.mouseenter()和.mouseleave()示意鼠标穿过和穿出的时刻触发。那末这两组实质上有什么区分呢？
   手册上的申明是：.mouseenter()和.mouseleave()这组穿过子元素不会触发，而.mouseover()和.mouseout()则会触发。

经由试验，代码以下：

<div style="width:100px;height:100px;background:blue;">
<p style="width:100px;height:50px;background:red;"></p>
</div>
<strong></strong>
<script>
    $('div').mouseover(function () { //移入 div 会触发，移入 p 再触发
        $('strong').html(function (index, value) {
            return value+'1';
        });
    });
</script>

能够看到，鼠标在div内挪动时，会不断触发事宜函数，输出值。而mouseenter则不会有这个题目。

1. .keydown()、.keyup()返回的是键码，而.keypress()返回的是字符编码。

$('input').keydown(function(e) {
    alert(e.keyCode); //按下 a 返回 229
});
$('input').keypress(function(e) {
    alert(e.charCode); //按下 a 返回 97
});

1. .focus()和.blur()离别示意光标激活和丧失，事宜触发机遇是当前元素。而.focusin()
   和.focusout()也示意光标激活和丧失，然则当子元素聚焦或丧失机也触发事宜。

 <div style=style="width:100px;height:50px;background:blue;">
    <input type="text">
 </div>
<script>
    $('div').focusin(function(e) {
        alert("激活"); //绑定的是 div 元素，子类input触发
    });
    $('div').focusout(function(e) {
        alert("丧失"); 
    });
</script>

三. 复合事宜

jQuery 供应了许多最经常使用的事宜结果，组合一些功用完成了一些复合事宜，比方切换功
能、智能加载等。

$('div').hover(function () {//背景移入移出切换结果
    $(this).css('background', 'black'); //mouseenter 结果
}, function () {
    $(this).css('background', 'red'); //mouseleave 结果，可省略
});

注重：.hover()要领是连系了.mouseenter()要领和.mouseleva()要领，并不是.mouseover()
和.mouseout()要领。

.toggle()有两层寄义，一层就如表格中所说（1.9版移除），一层在动画中会用到，在这里不举行报告，若想完成表格中的结果也迥殊简朴，能够举行以下推断：

var flag = 1; //计数器,标记
$('div').click(function () {
    if (flag == 1) { //第一次点击
        $(this).css('background', 'black');
        flag = 2;
    } else if (flag == 2) { //第二次点击
        $(this).css('background', 'blue');
        flag = 3;
    } else if (flag == 3) { //第三次点击
        $(this).css('background', 'red');
        flag = 1;
    }
});

event对象

JavaScript 在事宜处置惩罚函数中默许通报了 event 对象，也就是事宜对象。但因为浏览器

的兼容性，开辟者老是会做兼容方面的处置惩罚。jQuery 在封装的时刻，处理了这些题目，而且
还建立了一些异常好用的属性和要领。

一. 事宜对象

处置惩罚函数的e就是event事宜对象（JS中需做兼容处置惩罚），event 对象有许多可用的属性和要领，这里先演示一下：

//经由历程处置惩罚函数通报事宜对象
$('input').bind('click', function (e) { //接收事宜对象参数
    alert(e.type);//打印出click
});

下面是一些经常使用的属性：

注重：

target：是猎取触发元素的DOM，就是你点了哪一个就是哪一个。
currentTarget：是猎取监听元素的DOM，你把事宜绑定在谁身上就是谁。

<div style="width:100px;height:100px;background:#999">
    <p style="width:50px;height:50px;background:#333"></p>
</div>
<script>
    $('div').bind('click', function (e) { 
    alert(e.target);//点击p时返回p
    });
    $('div').bind('click', function (e) { 
        alert(e.currentTarget);//不管什么时候都返回div，同等this
    });
</script>

经由历程 event.data 猎取分外数据，能够是数字、字符串、数组、对象

$('input').bind('click', 123, function () { //通报 data 数据
    alert(e.data); //猎取数字数据123
});

猎取鼠标的左中右键

$(document).mousedown(function (e) {
    alert(e.which);
});

猎取键盘的按键

$('input').keyup(function (e) {
    alert(e.which);
});

//猎取触发元素鼠标当前的位置

$(document).click(function (e) {
    alert(e.screenY+ ',' + e.pageY + ',' + e.clientY);
});

二. 冒泡和默许行动

假如看我的百度前端技术学院task0002的笔记的话，应当都晓得事宜冒泡是怎样的，事宜代办就是依据它来完成的。这里我轻微说一下事宜冒泡是什么样的，事宜冒泡实在就是在点击一个元素时，会一层一层的向父元素递进当点击一个div时实际上是如许的div -> body -> html -> document。

下面来看一下冒泡和默许行动的一些要领：

这些要领都是event对象的一些要领，须要注重的是：
先来看到末了两个，名字都长到让人记不住的要领，，如代码中所示：

$("div").click(function(e) {
    e.stopImmediatePropagation() ;
    alert("div1");//只弹出div1
});
$("div").click(function(e) {
    alert("div2");//因第一个点击事宜作废了该事宜的后续处置惩罚函数，这里将不被实行
});

同时作废默许行动以及事宜冒泡：

<a href="http://guowenfh.github.io">三省吾身丶丶</a>
<script >
    $("a").click(function(e) {
        // e.preventDefault();//阻挠默许行动
        // e.stopPropagation();//阻挠事宜冒泡
        alert("a");
        return false;
    });
    $(document).click(function(e) {
        alert("document");
    });
</script>

注重这段代码中，我们能够看到a被弹出来了，然则链接并没有跳转，而且document也没有被弹出，因为return false相当于同时了这两件事变，只不过，在运用表格中的检测要领时，返回的false。
而运用event对象的要领完成阻挠时，检测返回true。

高等事宜

jQuery 不只封装了大批经常使用的事宜处置惩罚，还供应了不少高等事宜轻易开辟者运用。比

如模仿用户触发事宜、事宜托付事宜、和一致整合的 on 和 off，以及仅实行一次的 one 方
法。这些要领大大降低了开辟者难度，提升了开辟者的开辟体验。

一. 模仿操纵

在事宜触发的时刻，偶然我们须要一些模仿用户行动的操纵。比方：当网页加载终了后自行点击一个按钮触发一个事宜，而不是用户去点击。

1. .trigger()

先来一个最机器的.trigger()：
<button>点击</button>

$("button").click(function() {
    alert("这里是第一次点击来自模仿！");
});
$("button").trigger('click');

翻开网页，能够看到内容并不须要被点击，就直接被弹了出来。
固然不会那末庞杂，来进阶一下吧，只须要把.trigger('click')连在click事宜今后就能够了，结果固然一样。
然则，如许彷佛照样有点贫苦，jQuery怎么能够让我们那末贫苦，把增加的字符串删除，增加.click()，如今就是如许的：

$('input').click(function () {
    alert('我的第一次点击来自模仿！');//结果和上面一样
}).click();

这类简朴的要领jQuery险些一切的经常使用事宜都供应了：

下面来引见一下.trigger()的一些进阶用法，固然假如要举行如许的参数通报的话，就不能运用上面的简朴要领了：
偶然在模仿用户行动的时刻，我们须要给事宜实行通报参数，这个参数相似与在事宜绑定中的event.data的分外数据，能够是数字、字符串、数组、对象。须要注重的是当通报一个值的时刻，直接通报即可。当两个值以上，须要在前后用中括号包含起来。

$("button").click(function (e, data1, data2) {
    alert(data1.a + "," + data2[1]);//加载后直接弹出1,456
}).trigger("click", [{"a" : "1", "b" : "2"}, ["123","456"]]);

在运用bind时，bind传入的分外数据经由历程event.data猎取，该数据传输情势稳定。

模仿用户行动时，除了经由历程 JavaScript 事宜名触发，也能够经由历程自定义的事宜触发，所谓自定义事宜实在就是一个被.bind()绑定的恣意函数。

$('input').bind('myEvent', function () {
alert('自定义事宜！');
}).trigger('myEvent');

2. .triggerHandler()

这是另一个模仿用户行动的要领，用法和trigger()要领一样。然则在某些状况下有以下区分：

1. .triggerHandler()要领并不会触发事宜的默许行动，而.trigger()会，比方：

$('form').trigger('submit'); //模仿用户实行提交，并跳转到实行页面
$('form').triggerHandler('submit'); //模仿用户实行提交，并阻挠的默许行动

1. .triggerHandler()要领只会影响第一个婚配到的元素，而.trigger()会影响一切。

2. .triggerHandler()要领会返回当前事宜实行的返回值，假如没有返回值，则返回
   undefined；而.trigger()则返回当前包含事宜触发元素的 jQuery 对象(轻易链式联缀挪用)。

3. .trigger()在建立事宜的时刻，会冒泡。但这类冒泡是自定义事宜才表现出来，是
   jQuery 扩大于 DOM 的机制，并不是 DOM 特征。而.triggerHandler()不会冒泡。

二. 定名空间

偶然，我们想对事宜举行移除。但关于同名同元素绑定的事宜移除每每比较贫苦，这个

时刻，能够运用事宜的定名空间处理。（主如果处置惩罚绑定匿名函数的状况）

$("button").bind('click.abc', function(e) {
    alert("abc");
});
$("button").bind('click.xyz', function(e) {
    alert("xyz");
});
$("button").unbind('click.abc' );//处置惩罚事后只弹出xyz。

注重：也能够直接运用('.abc')，如许的话，能够移除雷同定名空间的差别事宜。关于模仿操纵.trigger()和.triggerHandler()，用法也是一样的。$('input').trigger('click.abc')

三.事宜托付

事宜托付也就是事宜代办。我在task0002（二）- DOM + 事宜已谈过了。而且也本身完成了一下事宜代办，这里轻微再引见一下:

1. “事宜代办” 的实质是应用了事宜冒泡的特征。当一个元素上的事宜被触发的时刻，比方说鼠标点击了一个按钮，一样的事宜将会在谁人元素的一切先人元素中被触发。这一历程被称为事宜冒泡；

2. 这个事宜从原始元素最先一向冒泡到DOM树的最上层。任何一个事宜的目的元素都是最最先的谁人元素，在我们的这个例子中也就是按钮，而且它在我们的元素对象中以属性的情势涌现。

3. 运用事宜代办，我们能够把事宜处置惩罚器增加到一个元素上，守候一个事宜从它的子级元素里冒泡上来，而且能够得知这个事宜是从哪一个元素最先的。

4. 关于动态天生的节点一样有用。

完成以下：

<div>
    <button>点击</button>
    <button>点击</button>
</div>
<script>
    $("div").delegate('button',"click", function() {
        alert("点击了");//不管点击哪一个都能够弹出
        $("<button>天生</button>").appendTo('div');//点击同时天生节点，一样能够点击弹出
    });
    //$("div").undelegate('button', 'click');//作废事宜代办
</script>

注重：.delegate()须要指定父元素，然后第一个参数是当前元素，第二个参数是事宜体式格局，第三个参数是实行函数。和.bind()要领一样，能够通报分外参数。.undelegate()和.unbind()要领一样能够直接删除一切事宜，比方：.undelegate('click')。也能够删除定名空间的事宜，比方：.undelegate('click.abc')。

开胃菜完了，下面才是重点！

壮大的on 、off 和one

现在绑定事宜息争绑的要领有三组共六个。因为这三组的共存能够会形成肯定的杂沓，为此 jQuery1.7 今后推出了.on()和.off()要领完全摒弃前面三组。（临时未移除）

一. on

1. 替换.bind()体式格局

$('button').on('click', function () {
    alert('替换.bind()');
});

1. 替换.bind()体式格局，并运用分外数据和事宜对象

$('.button').on('click', {user : 'Lee'}, function (e) {
    alert('替换.bind()' + e.data.user);//lee
});

1. 替换.bind()体式格局，并绑定多个事宜

$('.button').on('mouseover mouseout', function () {
    alert('替换.bind()移入移出！');
});
$('.button').on({//以对象情势绑定多个事宜
    mouseover : function () {
        alert('替换.bind()移入！');
    },
    mouseout : function () {
        alert('替换.bind()移出！');
    }
});

1. 替换.bind()体式格局，阻挠默许行动并作废冒泡

$('form').on('submit', function () {
    return false;
});
$('form').on('submit', false);//在function中只要阻挠事宜存在时，如许写能够简化代码，结果雷同

$('form').on('submit', function (e) {//固然运用事宜对象也是能够的
    e.preventDefault();//阻挠默许行动
    e.stopPropagation();//作废冒泡
});

1. 替换.delegate()，事宜托付

$('div').on('click', 'button', function () {
    $(this).clone().appendTo('div');//每次点击都复制一个button
});

迥殊注重：.on()和.delegate()之间的选择器和事宜称号的位置！因为便于多种事宜处置惩罚体式格局，将选择器与事宜称号调换了位置

二.off

1. 替换.unbind()体式格局，移除事宜

$('.button').off('click');
$('.button').off('click', fn);
$('.button').off('click.abc');

1. 替代.undelegate()，作废事宜托付
   $('#box').off('click', '.button');

注重：和之前体式格局一样，事宜托付和作废事宜托付也有种种搭配体式格局，比方分外数据、定名空间等等。

三. one

不论是.bind()照样.on()，绑定事宜后都不是自动移除事宜的，须要经由历程.unbind()和.off()来手工移除。jQuery 供应了.one()要领，绑定元素实行终了后自动移除事宜，能够要领仅触发一次的事宜。

1. 相似于.bind()只触发一次

$('button').one('click', function () {
    alert('one 仅触发一次！');
});

1. 相似于.delegate()只触发一次

$('div').one('click', 'button', function (){
    $(this).clone().appendTo('div');//只复制一次
});

所以前面的一系列报告，都是为了举一反三，如今在jQuery中关于事宜的处置惩罚直接用on 、off 和one这三个就好了！