在DOM中DOM0级绑定事件的方式是直接给事件属性赋值,但是这样有个缺点就是每次指定的事件处理程序会把之前的覆盖掉。
jQuery简单绑定事件的方式,可以让我绑定多个事件处理程序跟DOM2级绑定事件的方式一样.
如果需要了解DOM的教程参考地址:https://chuanke.baidu.com/v5508922-239160-1771112.html
click([[data],fn])
// 例如:
$('#btn').click(function(){});
DOM0级绑定事件的方式
var btn = document.getElementById('btn');
btn.onclick = function(e) {
console.log(1);
}
// 第二次赋值会把之前的覆盖掉。
btn.onclick = function(e) {
console.log(2);
}
jQuery简单绑定事件的方式
var btn = $('#btn');
btn.click(function(){
console.log(1);
});
// 多次绑定click不会覆盖。
btn.click(function(){
console.log(2);
})
总结:DOM0级绑定事件的方式只能指定一个事件处理程序,不能指定多个。jQuery的可以绑定多次,而且相互不干扰。
方法名 | 实例 | 说明 |
---|---|---|
blur([[data],fn]) | $("p").blur(); | 当元素失去焦点时触发 blur 事件,这个函数会调用执行绑定到blur事件的所有函数,包括浏览器的默认行为。可以通过返回false来防止触发浏览器的默认行为。blur事件会在元素失去焦点的时候触发,既可以是鼠标行为,也可以是按tab键离开的 |
focus([[data],fn]) | $("p").focus(); | 当元素获得焦点时,触发 focus 事件。 |
focusin([data],fn) | $("p").focusin(); | 当元素获得焦点时,触发 focusin 事件。当元素获得焦点时,触发 focusin 事件。 |
focusout([data],fn) | $("p").focusout(); | 当元素失去焦点时触发 focusout 事件。focusout事件跟blur事件区别在于,他可以在父元素上检测子元素失去焦点的情况 |
change([[data],fn]) | $('p').change(); | 当元素的值发生改变时,会发生 change 事件该事件仅适用于文本域(text field),以及 textarea 和 select 元素。当用于 select 元素时,change 事件会在选择某个选项时发生。当用于 text field 或 text area 时,该事件会在元素失去焦点时发生 |
mousedown([[data],fn]) | $("p").mousedown(fn); | 当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件mousedown 与 click 事件不同,mousedown 事件仅需要按键被按下,而不需要松开即可发生 |
mouseleave([[data],fn]) | $("p").mouseleave(fn) | 当鼠标指针离开元素时,会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用。与 mouseout 事件不同,只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。如果鼠标指针离开任何子元素,同样会触发 mouseout 事件。 |
resize([[data],fn]) | $('p').resize(fn) | 当调整浏览器窗口的大小时,发生 resize 事件。 |
scroll([[data],fn]) | $('p').scroll(fn) | 当用户滚动指定的元素时,会发生 scroll 事件。scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口) |
submit([[data],fn]) | $("form").submit(); | 当提交表单时,会发生 submit 事件。该事件只适用于表单元素。 |
keydown([[data],fn]) | $('p').keydown(fn); | 当键盘或按钮被按下时,发生 keydown 事件。注释:如果在文档元素上进行设置,则无论元素是否获得焦点,该事件都会发生。 |
keyup([[data],fn]) | $('p').keyup(fn); | 当按钮被松开时,发生 keyup 事件。它发生在当前获得焦点的元素上。注释:如果在文档元素上进行设置,则无论元素是否获得焦点,该事件都会发生。 |
keypress([[data],fn]) | $('p').keypress(fn); | 当键盘或按钮被按下时,发生 keypress 事件。keypress 事件与 keydown 事件类似。当按钮被按下时,会发生该事件。它发生在当前获得焦点的元素上。 不过,与 keydown 事件不同,每插入一个字符,就会发生 keypress 事件。注释:如果在文档元素上进行设置,则无论元素是否获得焦点,该事件都会发生。 |
load([[data],fn]) | $(window).load(fn); | 当页面加载完成 |
unload([[data],fn]) | $(window).unload(fn); | 当页面卸载完成后,离开页面时。 |
所有的简单事件的返回值都是调用此方法的jQuery包装对象。
$('#btn').click(); // 触发点击事件
$('#btn').dbclick(); // 触发双击事件
$('#btn').focus(); // 触发获取焦点事件
$('#btn').blur(); // 触发失去焦点事件
$('#btn').submit(); // 触发失去焦点事件
包装对象的trigger(type,[data])
方法,可以帮助开发人员通过代码触发事件的执行,跟正常触发一样,会进行事件冒泡。
//提交第一个表单,但不用submit()
$("form:first").trigger("submit")
//给一个事件传递参数
$("p").click( function (event, a, b) {
// 一个普通的点击事件时,a和b是undefined类型
// 如果用下面的语句触发,那么a指向"foo",而b指向"bar"
} ).trigger("click", ["foo", "bar"]);
触发事件处理程序执行函数:riggerHandler(type, [data])
$("input").triggerHandler("focus");
语法:bind(type,[data],fn)
,这个也是包装对象的方法。
含义:为每个匹配元素的特定事件绑定事件处理函数。在绑定事件之前,一定要确保页面中的DOM元素已经就绪。如果没有就绪或者后面动态添加的DOM元素则不会动态更新事件处理程序。
参数:
实例:
$("form").bind("submit", function() {
return false; // 取消默认操作。
})
// 同时绑定多个事件
$('#foo').bind('mouseenter mouseleave', function() {
$(this).toggleClass('entered');
});
//同时绑定多个事件类型/处理程序
$("button").bind({
click: function(){
$("p").slideToggle();
},
mouseover: function(){
$("body").css("background-color","red");
},
mouseout: function(){
$("body").css("background-color","#FFFFFF");
}
});
语法:$dom.one(type,[data],fn)
说明:为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数。在每个对象上,这个事件处理函数只会被执行一次。其他规则与bind()函数相同。这个事件处理函数会接收到一个事件对象,可以通过它来阻止(浏览器)默认的行为。如果既想取消默认的行为,又想阻止事件起泡,这个事件处理函数必须返回false.
参数:
实例:
// 当所有段落被第一次点击的时候,显示所有其文本。
$("p").one("click", function(){
alert( $(this).text() );
});
语法: $dom.live(type, [data], fn)
说明:jQuery 给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效。这个方法是基本是的 .bind() 方法的一个变体。使用 .bind() 时,选择器匹配的元素会附加一个事件处理函数,而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行。
参数:
实例:
// 先绑定事件
$('.clickme').live('click', function() {
alert("Live handler called.");
});
// 然后再添加一个新元素:
$('body').append('<div class="clickme">Another target</div>');
语法: $dom.delegate(selector,[type],[data],fn)
说明:指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)在选择元素上绑定一个或多个事件的事件处理函数。on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。on汇总了bind和live两种绑定事件的方式。可以支持一般的bind方法或者委托的方法。
参数:
实例:
<!-- HTML 代码 -->
<div style="background-color:red">
<p>这是一个段落。</p>
<button>请点击这里</button>
</div>
// jQuery 代码:
$("div").delegate("button","click",function(){
$("p").slideToggle();
});
以后推荐大家使用on的方式
语法: $dom.on(events,[selector],[data],fn)
说明:在选择元素上绑定一个或多个事件的事件处理函数。on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。on汇总了bind和live两种绑定事件的方式。可以支持一般的bind方法或者委托的方法。
参数:
实例:
// �bind绑定事件
$("p").on("click", function(){
alert( $(this).text() );
});
// 事件委托
$('div').on('click', 'p', function(e){
console.log(this.innerHTML);
})
以后推荐大家使用on的方式
语法:$dom.unbind(type,[fn])
实例:
// 解绑所有事件
$("p").unbind()
// 将段落的click事件取消绑定
$("p").unbind( "click" )
// 删除特定函数的绑定,将函数作为第二个参数传入
var foo = function () {
// 处理某个事件的代码
};
$("p").bind("click", foo); // ... 当点击段落的时候会触发 foo
$("p").unbind("click", foo); // ... 再也不会被触发 foo
语法: $dom.die(type, [fn])
元素中删除先前用.live()绑定的所有事件.(此方法与live正好完全相反。)
参数说明:
实例:
function aClick() {
$("div").show().fadeOut("slow");
}
$("#unbind").click(function () {
$("#theone").die("click", aClick)
});
语法: undelegate([selector,[type],fn])
删除由 delegate() 方法添加的一个或多个事件处理程序。
参数说明:
实例:
// 从p元素删除由 delegate() 方法添加的所有事件处理器:
$("p").undelegate();
// 从p元素删除由 delegate() 方法添加的所有click事件处理器:
$("p").undelegate( "click" )
// 从form元素删除由 delegate() 方法添加的".whatever"命名空间:
var foo = function () {
//.....
};
//用delegate() 方法给click事件增加".whatever"命名空间
$("form").delegate(":button", "click.whatever", foo);
$("form").delegate("input[type='text']", "keypress.whatever", foo);
语法:off(events,[selector],[fn])
如果一个简单的事件名称,比如提供"click",所有 这种类型的事件(包括直接和委派)从jQuery设置的元素上删除。
要删除特定的委派事件处理程序,提供一个selector 的参数。选择器字符串必须是完全匹配递到.on()事件处理程序附加的选择器。要删除非委托元素上的所有事件,使用特殊值 "**" 。
处理程序也可以删除handler参数指定名称的函数。
实例:
// 解绑所有的on的事件
$("p").off()
// 解绑所有的p的委托click事件,所有子元素都被取消绑定
$("p").off( "click", "**" )
// 解绑具体的某个事件处理程序
var foo = function () {
// code to handle some kind of event
};
$("body").on("click", "p", foo);
// ... foo will no longer be called.
$("body").off("click", "p", foo);
在DOM学习的时候我们很痛的一点就是早期的ie版本的浏览器和最新标准的浏览器的事件对象的获取及事件对象的属性直接都有些兼容问题。
事件对象获取兼容。
window.event
e = e || window.event;
在jQuery的事件处理程序中,可以直接获取�事件对象,所有浏览器都兼容。
event.type
获取到事件的类型event.target
获取到触发事件的元素。jQuery对其封装后,避免了各个浏览器不同标准的差异。event.currentTarget
在事件冒泡阶段中的当前DOM元素event.delegateTarget
此属性是最经常有用是通过过.delegate() 或.on()附加委派的事件,事件处理程序附加在正在处理的元素的祖先上。event.data
当前执行的处理程序被绑定的时候传递的参数。event.pageX和event
.pageY 该方法的作用是获取光标相对于页面的x坐标和y坐标。event.result
这个属性包含了当前事件事件最后触发的那个处理函数的返回值,除非值是 undefinedevent.which
针对键盘和鼠标事件,这个属性能确定你到底按的是哪个键或按钮。event.which
将 event.keyCode
和 event.charCode
标准化了。推荐用 event.which
来监视键盘输入。值是unicode编码。event.preventDefault()
阻止默认事件行为的触发。
event.stopPropagation()
防止事件冒泡到DOM树上,也就是不触发的任何前辈元素上的事件处理函数。
jQuery对象的的on方法不仅仅能绑定DOM中已经定义的事件,而且还可以注册和触发非标准事件也就是自定义的事件。
绑定自定义事件:
var $btn = $('#btn');
// 绑定自定义事件myevent
$btn.on('myevent', function(e, a, b, c){
console.log(e.type, a, b, c);
});
// 触发自定义事件,并给自定义事件传递参数
$btn.trigger('myevent', [1, 2, 3]);
// =>myevent 1 2 3
如果一个dom标签上添加的事件非常多的时候,有时候需要进行对这些事件做一些分类和统一处理。那么对绑定的事件分类就需要用到事件的命名空间。
$(function () {
// 给按钮绑定多个jQuery的事件
// 给按钮绑定点击事件,后面的.和demo就是命名空间
$('#btn').on('click.demo', function (e) {
console.log('click.demo');
});
// 绑定点击事件不带命名空间
$('#btn').on('click', function (e) {
console.log('click');
});
// 绑定blur事件带demo命名空间
$('#btn').on('blur.demo', function (e) {
console.log('blur.demo');
});
// $('#btn').off('.demo'); // 解绑所有的demo命名空间的事件 click.demo 和blur.demo
// $('#btn').trigger('click'); // 触发所有的click事件,包括所有的命名空间的
// $('#btn').trigger('click.demo'); // 只触发click.demo命名空间的事件
});
jQuery为鼠标进入和离开提供了一个简便的绑定事件的方法hover(enter, leave)
。hover方法接受两个参数,第一个参数是鼠标进入的事件处理程序,第二个是鼠标离开的事件处理程序。
用法:
$(function(){
$('tr').hover(function(e){
$(this).css('backgroundColor', '#ccc');
},function(e){
$(this).css('backgroundColor', '#fff');
});
})