目录
1 事件处理
1.1 事件绑定的简便方法
jQuery提供一系列方法，允许直接为常见事件绑定回调函数。比如，click方法可以为一个元素绑定click事件的回调函数。
$('li').click(function (e){
console.log($(this).text());
});
上面代码为li元素绑定click事件的回调函数，点击后在控制台显示li元素包含的文本。
这样绑定事件的简便方法有如下一些：
- click
- keydown
- keypress
- keyup
- mouseover
- mouseout
- mouseenter
- mouseleave
- scroll
- focus
- blur
- resize
- hover
如果不带参数调用这些方法，就是触发相应的事件，从而引发回调函数的运行。
$('li').click()
上面代码将触发click事件的回调函数。
需要注意的是，通过这种方法触发回调函数，将不会引发浏览器对该事件的默认行为。比如，对a元素调用click方法，将只触发事先绑定的回调函数，而不会导致浏览器将页面导向href属性指定的网址。
下面是一个捕捉用户按下escape键的函数。
$(document).keyup(function(e) {
if (e.keyCode == 27) {
$('body').toggleClass('show-nav');
// $('body').removeClass('show-nav');
}
});
上面代码中，用户按下escape键，jQuery就会为body元素添加/去除名为show-nav的class。
hover方法需要特别说明。它接受两个回调函数作为参数，分别代表mouseenter和mouseleave事件的回调函数。
$(selector).hover(handlerIn, handlerOut)
// 等同于
$(selector).mouseenter(handlerIn).mouseleave(handlerOut)
下面是一个例子，当按钮发生hover事件，添加一个class样式，当hover事件结束时，再取消这个class。
$('.btn').hover(function () {
$(this).addClass('hover');
}, function () {
$(this).removeClass('hover');
});
使用toggleClass可以简化上面的代码。
$('.btn').hover(function () {
$(this).toggleClass('hover');
});
1.2 on方法，trigger方法，off方法
除了简便方法，jQuery还提供事件处理的通用方法。
1.2.1 on方法
on方法是jQuery事件绑定的统一接口。事件绑定的那些简便方法，其实都是on方法的简写形式。
on方法接受两个参数，第一个是事件名称，第二个是回调函数。
$('li').on('click', function (e){
console.log($(this).text());
});
上面代码为li元素绑定click事件的回调函数。
注意，在回调函数内部，
this关键字指的是发生该事件的DOM对象。为了使用jQuery提供的方法，必须将DOM对象转为jQuery对象，因此写成$(this)。
on方法允许一次为多个事件指定同样的回调函数。
$('input[type="text"]').on('focus blur', function (){
console.log('focus or blur');
});
上面代码为文本框的focus和blur事件绑定同一个回调函数。
下面是一个例子，当图片加载失败，使用error事件，替换另一张图片。
$('img').on('error', function () {
if(!$(this).hasClass('broken-image')) {
$(this).prop('src', 'img/broken.png').addClass('broken-image');
}
});
下面是检查用户是否切换浏览器tab的例子。
$(document).on('visibilitychange', function (e) {
if (e.target.visibilityState === "visible") {
console.log('Tab is now in view!');
} else if (e.target.visibilityState === "hidden") {
console.log('Tab is now hidden!');
}
});
on方法还可以为当前元素的某一个子元素，添加回调函数。
$('ul').on('click', 'li', function (e){
console.log(this);
});
上面代码为ul的子元素li绑定click事件的回调函数。采用这种写法时，on方法接受三个参数，子元素选择器作为第二个参数，夹在事件名称和回调函数之间。
这种写法有两个好处。首先，click事件还是在ul元素上触发回调函数，但是会检查event对象的target属性是否为li子元素，如果为true，再调用回调函数。这样就比为li元素一一绑定回调函数，节省了内存空间。其次，这种绑定的回调函数，对于在绑定后生成的li元素依然有效。
on方法还允许向回调函数传入数据。
$("ul" ).on("click", {name: "张三"}, function (event){
console.log(event.data.name);
});
上面代码在发生click事件之后，会通过event对象的data属性，在控制台打印出所传入的数据（即“张三”）。
1.2.2 trigger方法
trigger方法用于触发回调函数，它的参数就是事件的名称。
$('li').trigger('click')
上面代码触发li元素的click事件回调函数。与那些简便方法一样，trigger方法只触发回调函数，而不会引发浏览器的默认行为。
1.2.3 off方法
off方法用于移除事件的回调函数。
$('li').off('click')
上面代码移除li元素所有的click事件回调函数。
1.2.4 事件的名称空间
同一个事件有时绑定了多个回调函数，这时如果想移除其中的一个回调函数，可以采用“名称空间”的方式，即为每一个回调函数指定一个二级事件名，然后再用off方法移除这个二级事件的回调函数。
$('li').on('click.logging', function (){
console.log('click.logging callback removed');
});
$('li').off('click.logging');
上面代码为li元素定义了二级事件click.logging的回调函数，click.logging属于click名称空间，当发生click事件时会触发该回调函数。将click.logging作为off方法的参数，就会移除这个回调函数，但是对其他click事件的回调函数没有影响。
trigger方法也适用带名称空间的事件。
$('li').trigger('click.logging')
1.3 bind方法，unbind方法
1.3.1 bind()
在jQuery中，为元素绑定事件可以使用bind()方法，语法如下：
bind(type,[data],fn)
type:用于指定事件的类型
data:可选参数，作为event.data属性值传递给对象的额外数据对象
fn:绑定到每个匹配元素的事件上的函数例如：
$("input:button").bind("click",function(){
alert("你点击了按钮");
});1.3.2 unbind()
在jQuery中，为元素解除事件可以使用unbind()方法，语法如下：
bind([type],[data])
type:可选参数,用于指定事件的类型
data:可选参数，作为event.data属性值传递给对象的额外数据对象
注意：unbind()方法两个参数都是可选的，若不填，那么会移除元素上所有绑定的事件
$("input:button").unbind("click")1.4 bind方法和on方法区别
jquery的bind跟on绑定事件的区别：主要是事件冒泡；
jquery文档中bind和on函数绑定事件的用法：
.bind(events [,eventData], handler)
.on(events [,selector] [,data], handler)从文档中可以看出，.on方法比.bind方法多一个参数'selector'
.on的selector参数是筛选出调用.on方法的dom元素的指定子元素，如：
$('ul').on('click', 'li', function(){console.log('click');})
就是筛选出ul下的li给其绑定click事件；那么这个selector参数的好处是什么?
好处在于.on方法：原理是事件冒泡，进行事件委托，子元素把事件委托给父元素进行事件处理；
这样的好处
1.万一子元素非常多，给每个子元素都添加一个事件，会影响到性能；
2.为动态添加的元素也能绑上指定事件；
另外：相应的事件请用相应的移除方法来移除事件，比如：on——>off，bind——>unbind
1.5 event对象
当回调函数被触发后，它们的参数通常是一个事件对象event。
$(document).on('click', function (e){
// ...
});
上面代码的回调函数的参数e，就代表事件对象event。
1.5.1 event对象有以下属性
- type：事件类型，比如click。
- which：触发该事件的鼠标按钮或键盘的键。
- target：事件发生的初始对象。
- data：传入事件对象的数据。
- pageX：事件发生时，鼠标位置的水平坐标（相对于页面左上角）。
- pageY：事件发生时，鼠标位置的垂直坐标（相对于页面左上角）。
1.5.2 event对象有以下方法：
- preventDefault：取消浏览器默认行为。
- stopPropagation：阻止事件向上层元素传播。
1.6 一次性事件
基本语法：
one(type,[data],fn)
type:用于指定事件的类型
data:可选参数，作为event.data属性值传递给对象的额外数据对象
fn:绑定到每个匹配元素的事件上的函数one方法指定一次性的回调函数，即这个函数只能运行一次。这对提交表单很有用。
$("#button").one( "click", function() { return false; } );
one方法本质上是回调函数运行一次，即解除对事件的监听。
document.getElementById("#button").addEventListener("click", handler);
function handler(e) {
e.target.removeEventListener(e.type, arguments.callee);
return false;
}
上面的代码在点击一次以后，取消了对click事件的监听。如果有特殊需要，可以设定点击2次或3次之后取消监听，这都是可以的。
1.7 模拟用户操作
1.7.1 模拟用户操作触发事件
trigger():在每一个匹配的元素上触发某类事件。
triggerHandler():这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。
看似两个非常相似，但是表同里不同！
下面就是他们之间的三大区别：
第一：trigger会导致浏览器同名的默认行为的执行，如：trigger('submit');不但会执行submit()函数的效果，也会执行表单提交的效果；而triggerHandler就不会导致默认行为的执行
第二：triggerHandler只会触发JQ对象集合中第一个元素的事件处理函数，也不会产生事件冒泡。而trigger不同
第三：这个方法的返回时事件处理函数的返回值，而不是具有可链性的JQ对象，此外，如果最开始的JQ对象集合为空，则返回undefined.
$(function(){
$("input:button").bind("click",function(e,msg1,msg2){
alert(msg1+msg2);
}).trigger("click",["hello","world"]);
});1.7.2 模仿悬停事件
模仿悬停事件是指模仿鼠标移动到一个对象上面，又从该对象上面移出的事件，可以通过jQuery提供的hover（）方法实现
hover(over,out)
over:用于指定当鼠标在移动到匹配元素上时触发的函数
out：用于指定当鼠标在移出匹配元素上时触发的函数例如：
$("a.main").hover(function(){
window.status="123";//设定状态文本
return true;
},function(){
window.status="456";
return true;
});1.7.3 模仿鼠标连续单击事件
模拟鼠标单击事件实际上是为每次单击鼠标时设置一个不同的函数，从而实现用户每次单击鼠标时，都会得到不同的效果。
toggle(odd,even)
odd:用于指定当奇数次单击按钮时触发的函数
even:用于指定当偶数次单击按钮时触发的函数例如：要实现单击页面上的工具图片
$("tool").toggle(
function(){$("#ip").css("display","");},
function(){$("#ip").css("display","none");}
);1.8 阻止事件和浏览器默认行为
1.8.1 阻止事件冒泡
stopPropagation()方法只能阻止事件冒泡，它相当于传统的JavaScript中操作原始的event事件对象的event.cancelBubble=true来取消冒泡
$("test1").mouseover(function(event){
......
event.stopPropagtion();//阻止事件冒泡
});1.8.2 阻止浏览器的默认行为
在表单验证时，表单的某些内容没有通过验证，但是在单击了提交按钮后，还是会提交，这时就需要阻止浏览器的默认操作。在jQuery中使用preventDefault（）可以阻止浏览器的默认行为
event.preventDefault();//阻止浏览器的默认操作1.8.3 同时阻止事件和浏览器的默认行为
如果想同时阻止事件冒泡(event.stopPropagation())和阻止浏览器行为(event.preventDefault())
return false;这个是同时调用阻止事件冒泡和阻止浏览器行为的简要写法
扫一扫
328
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
