on()的多事件绑定，基本用法：.on( events ,[ selector ] ,[ data ] )

$("#elem").click(function(){}) //快捷方式

$("#elem").on('click',function(){}) //on方式

也可以多事件绑定 $("#elem").on("mouseover mouseout",function(){ });

多个事件绑定不同函数

$("#elem").on({

mouseover:function(){},

mouseout:function(){}

});

例：$("#test1").on('click', function(e) {

$(this).text('触发事件：' + e.type)

})//事件绑定

on（）的委托机制 用法：.on( events ,[ selector ] ,[ data ], handler(eventObject) )

例：$("div").on("click","p",fn) 当用户触发在a元素上，事件将往上冒泡，一直会冒泡在div元素上。如果提供了第二参数，那么事件在往上冒泡的过程中遇到了选择器匹配的元素，将会触发事件回调函数

例： $('body').on('click', 'a', function(e) {

alert(e.target.textContent)

})

解释：给body绑定一个click事件，没有直接a元素绑定点击事件，通过委托机制，点击a元素的时候，事件触发

卸载事件off()方法

例：$("elem").off("mousedown")移除一个mousedown事件！

$("elem").off() 表示移除该节点上的所有事件

例： $(".aaron:first").off('mousedown')

})

jQuery事件对象的作用

事件对象是用来记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生，并且只能是事件处理函数内部访问，在所有事件处理函数运行结束后，事件对象就被销毁。在不同浏览器之间事件对象的获取, 以及事件对象的属性都有差异。jQuery根据 W3C 标准规范了事件对象，所以在jQuery事件回调方法中获取到的事件对象是经过兼容后处理过的一个标准的跨浏览器对象

event.target

target 属性可以是注册事件时的元素，或者它的子元素。通常用于比较 event.target 和 this 来确定事件是不是由于冒泡而触发的。经常用于事件冒泡时处理事件委托

简单来说：event.target代表当前触发事件的元素，可以通过当前元素对象的一系列属性来判断是不是我们想要的元素

例：$("ul").on('click',function(e){

alert('触发的元素是内容是: ' + e.target.textContent)

})//多事件绑定一

解释：this指的就是$("ul")中的ul，而e.target指的是触发事件的元素li

jQuery事件对象的属性和方法

（1）event.type：获取事件的类型

（2）event.pageX 和 event.pageY：获取鼠标当前相对于页面的坐标

（3）event.preventDefault() 方法：阻止默认行为 （ event.isDefaultPrevented() 来确定这个方法是否(在那个事件对象上)被调用过了）

（4）event.stopPropagation() 方法：阻止事件冒泡，也就是不触发的任何前辈元素上的事件处理函数

（5）event.which：获取在鼠标单击时，单击的是鼠标的哪个键 ；event.which也将正常化的按钮按下(mousedown 和 mouseupevents)，左键报告1，中间键报告2，右键报告3

（6）event.currentTarget : 在事件冒泡过程中的当前DOM元素，冒泡前的当前触发事件的DOM对象, 等同于this

（7）this和event.target的区别：js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；

例：$("#content").click(function(event) {

$("#msg").html($("#msg").html() + "<p>外层div元素被单击</p>");

event.stopPropagation(); //阻止事件冒泡

});

jQuery自定义事件之trigger事件

trigger() 方法触发被选元素的指定事件类型。$('#elem').trigger('click');

先给元素绑定一个事件，然后通过trigger来触发改事件！

trigger除了能够触发浏览器事件，同时还支持自定义事件，并且自定义时间还支持传递参数

例：$('#elem').on('Aaron', function(event,arg1,arg2) {

alert("自触自定义时间")

});

$('#elem').trigger('Aaron',['参数1','参数2'])

例：$(document).ready(function(){

$("input").select(function(){

$("input").after("文本被选中！");

});

$("button").click(function(){

$("input").trigger("select");

});

});

jQuery自定义事件之triggerHandler事件

triggerHandler() 方法触发被选元素的指定事件类型。但不会执行浏览器默认动作，也不会产生事件冒泡。

triggerHandler() 方法与 trigger() 方法类似。不同的是它不会触发事件（比如表单提交）的默认行为，而且只影响第一个匹配元素。

（1）它不会引起事件（比如表单提交）的默认行为

（2）.trigger() 会操作 jQuery 对象匹配的所有元素，而 .triggerHandler() 只影响第一个匹配元素。

由 .triggerHandler() 创建的事件不会在 DOM 树中冒泡；如果目标元素不直接处理它们，则不会发生任何事情。

（3）该方法的返回的是事件处理函数的返回值，而不是具有可链性的 jQuery 对象。此外，如果没有处理程序被触发，则这个方法返回 undefined。

例子：//给input绑定一个聚焦事件

$("input").on("focus",function(event,title) {

$(this).val(title)

});

$("#accident").on("click",function() {

alert("trigger触发的事件会在 DOM 树中向上冒泡");

});

//trigger触发focus

$("button:first").click(function() {

$("a").trigger("click");

$("input").trigger("focus");

});

//triggerHandler触发focus

$("button:last").click(function() {

$("a").triggerHandler("click");

$("input").triggerHandler("focus","没有触发默认聚焦事件");

});

jQuery的其他常用方法：

bind() 方法

bind() 方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。语法：

$(selector).bind(event,data,function)替代语法：$(selector).bind({event:function, event:function, ...})

例1：

$("button").bind("click",function(){

$("p").slideToggle();

});

例2： $("button").bind({

click:function(){$("p").slideToggle();},

mouseover:function(){$("body").css("background-color","red");},

mouseout:function(){$("body").css("background-color","#FFFFFF");}

});

jQuery 事件 - live() 方法

live() 方法为被选元素附加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）。

例：$("button").live("click",function(){

$("p").slideToggle();

});//当点击按钮时，隐藏或显示 p 元素：

jQuery 事件 - load() 方法

当指定的元素（及子元素）已加载时，会发生 load() 事件。该事件适用于任何带有 URL 的元素（比如图像、脚本、框架、内联框架）。根据不同的浏览器（Firefox 和 IE），如果图像已被缓存，则也许不会触发 load 事件。

语法：$(selector).load(function)

例：$("img").load(function(){

$("div").text("Image loaded");

});

jQuery 事件 - one() 方法

one() 方法为被选元素附加一个或多个事件处理程序，并规定当事件发生时运行的函数。当使用 one() 方法时，每个元素只能运行一次事件处理器函数。

语法：$(selector).one(event,data,function)

例：$("p").one("click",function(){

$(this).animate({fontSize:"+=6px"});

});//当点击 p 元素时，增加该元素的文本大小：

jQuery 事件 - ready() 方法

当 DOM（文档对象模型） 已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。

由于该事件在文档就绪后发生，因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。正如上面的例子中那样。ready() 函数规定当 ready 事件发生时执行的代码。ready() 函数仅能用于当前文档，因此无需选择器。

三种语法：（1）$(document).ready(function) （2）$().ready(function) （3）$(function)

注意：提示：ready() 函数不应与 <body onload=""> 一起使用。

jQuery 事件 - resize() 方法

当调整浏览器窗口的大小时，发生 resize 事件。resize() 方法触发 resize 事件，或规定当发生 resize 事件时运行的函数。

语法：$(selector).resize()及$(selector).resize(function)

例：$(window).resize(function() {

$('span').text(x+=1);

});

jQuery 事件 - scroll() 方法

当用户滚动指定的元素时，会发生 scroll 事件。scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。scroll() 方法触发 scroll 事件，或规定当发生 scroll 事件时运行的函数。

语法：$(selector).scroll()

例：$("div").scroll(function() {

$("span").text(x+=1);

});//对元素滚动的次数进行计数：

jQuery 事件 - toggle() 方法

toggle() 方法用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。

语法：$(selector).toggle(function1(),function2(),functionN(),...)

例：$("p").toggle(

function(){

$("body").css("background-color","green");},

function(){

$("body").css("background-color","red");},

function(){

$("body").css("background-color","yellow");}

);

jQuery 事件 - unbind() 方法

unbind() 方法移除被选元素的事件处理程序。该方法能够移除所有的或被选的事件处理程序，或者当事件发生时终止指定函数的运行。

语法：$(selector).unbind(event,function)

例：$("button").click(function(){

$("p").unbind();

});

jQuery 事件 - delegate() 方法

delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。

语法：$(selector).delegate(childSelector,event,data,function)

例：$("div").delegate("button","click",function(){

$("p").slideToggle();

});//当点击鼠标时，隐藏或显示 p 元素：

jQuery 事件 - undelegate() 方法

undelegate() 方法删除由 delegate() 方法添加的一个或多个事件处理程序。

语法：$(selector).undelegate(selector,event,function)

例：$("body").undelegate(); //从所有元素删除由 delegate() 方法添加的所有事件处理器：

jQuery 事件 - unload 属性

当用户离开页面时，会发生 unload 事件。

语法：event.unload(function)

例：$(window).unload(function(){

alert("Goodbye!");

});//当用户点击链接离开本页时，弹出一个消息框：

jQuery 事件 - die() 方法

die() 方法移除所有通过 live() 方法向指定元素添加的一个或多个事件处理程序。

语法：$(selector).die(event,function)

例：$("p").die();//移除所有通过 live() 方法向 p 元素添加的事件处理程序：

jQuery 事件 - error() 方法

该方法是 bind('error', handler) 的简写方式。

当元素遇到错误（没有正确载入）时，发生 error 事件。error() 方法触发 error 事件，或规定当发生 error 事件时运行的函数。

语法：$(selector).error() 及绑定函数：$(selector).error(function)

例：$("img").error(function(){

$("img").replaceWith("

Missing image!

");

});//如果图像不存在，则用一段预定义的文本取代它：