在今天的网络浏览器处理事件是有点困难的一部分,不同的浏览器以不同的方式处理事件。因此,要克服这些跨浏览器的问题,人们可以利用jQuery的事件处理API。
jQuery是一个小的JavaScript库,提供了广大的API来处理不同的浏览器事件和效果和更大量。阅读更多有关处理使用JavaScript浏览器的用户界面效果。在本教程中,我们将探讨不同的API jQuery来处理不同的浏览器事件。
Page Load事件
就绪(FN),
这是所有类型的事件,jQuery的支持的基础上。你可能想设置形式的焦点,当页面被载入或做一些UI效果。
$(document).ready(
function
() {
$(
"p"
).text(
"The DOM is now loaded and can be manipulated."
);
});
事件处理
绑定(类型,数据,FN),
您可能要绑定一个处理一个或多个事件的任何元素(单击/双击等)。使用此功能结合custome任何元素的事件处理程序。
$(
"p"
).bind(
"click"
,
function
(e)
{
var
str =
"( "
+ e.pageX +
", "
+
e.pageY +
" )"
;
$(
"span"
).text(
"Click happened! "
+ str);
});
$(
"p"
).bind(
"dblclick"
,
function
()
{
$(
"span"
).text(
"Double-click happened in "
+
this
.tagName);
});
$(
"p"
).bind(
"mouseenter mouseleave"
,
function
(e)
{
$(
this
).toggleClass(
"over"
);
});
触发(事件,资料)
触发每一个匹配的元素上的事件,
这也将导致浏览器具有相同的名称(如果存在的话)要执行的默认操作。例如,通过触发()的功能也将导致浏览器提交表单的“提交”。返回绑定到事件的职能之一虚假的默认行为是可以预防的。
触发的事件并不局限于基于浏览器的事件,你也可以自定义事件触发绑定注册。
$(
"button:first"
).click(
function
() {
update($(
"span:first"
));
});
$(
"button:last"
).click(
function
() {
$(
"button:first"
).trigger(
'click'
);
update($(
"span:last"
));
});
function
update(j) {
var
n = parseInt(j.text(), 10);
j.text(n + 1);
}
交互辅助活动
在今天的Web 2.0应用程序,用户intraction处理是非常重要的。jQuery提供了一些API,可以用来处理这些相互作用。悬停(多出)此功能提供了悬停功能,即当鼠标光标移动到一个匹配的元素,第一个指定的功能被解雇。当鼠标移动的元素,第二个指定的功能火灾。此外,检查的地方看到,如果鼠标仍然是在指定的元素(例如,一个div里面的图像),如果是这样,它会继续“徘徊”,并没有迁出(一种常见的在使用mouseout事件处理程序)的错误。
$(
"li"
).hover(
function
() {
$(
this
).append($(
"<span> ***</span>"
));
},
function
() {
$(
this
).find(
"span:last"
).remove();
}
);
辅助其他活动
以下是功能,可用于处理不同类型的事件清单。
模糊()
:触发??每一个匹配元素的blur事件。
$(
"input"
).blur(
function
() {
$(
this
).next(
"span"
).css(
'display'
,
'inline'
).fadeOut(1000);
});
模糊(FN)
:每一个匹配元素的blur事件中绑定一个处理函数。
$(
"input"
).blur(
function
() {
$(
this
).next(
"span"
).css(
'display'
,
'inline'
).fadeOut(1000);
});
(FN)
:每一个匹配元素的change事件中绑定一个功能。
$(
"select"
).change(
function
() {
var
str =
""
;
$(
"select option:selected"
).each(
function
()
{
str += $(
this
).text() +
" "
;
});
$(
"div"
).text(str);
})
.change();
点击(FN)
:绑定到每一个匹配元素的click事件的功能。
$(
"p"
).click(
function
() {
$(
this
).slideUp();
});
$(
"p"
).hover(
function
() {
$(
this
).addClass(
"hilite"
);
},
function
() {
$(
this
).removeClass(
"hilite"
);
});
双击(FN)
:触发??每一个匹配元素的DblClick事件。
var
divdbl = $(
"div:first"
);
divdbl.dblclick(
function
() {
divdbl.toggleClass(
'dbl'
);
});
按键(FN)
:每一个匹配元素的keypress事件中绑定一个功能。
$(
"input"
).keypress(
function
(e) {
if
(e.which == 32 || (65 <= e.which & e.which <= 65 + 25)
|| (97 <= e.which && e.which <= 97 + 25)) {
var
c = String.fromCharCode(e.which);
$(
"p"
).append($(
"<span/>"
))
.children(
":last"
)
.append(document.createTextNode(c));
}
else
if
(e.which == 8) {
// backspace in IE only be on keydown
$(
"p"
).children(
":last"
).remove();
}
$(
"div"
).text(e.which);
});
的mousedown(FN)
:绑定到每一个匹配元素的mousedown事件的功能。
$(
"p"
).mouseup(
function
(){
$(
this
).append(
'<span style="color:#F00;">Mouse up.</span>'
);
}).mousedown(
function
(){
$(
this
).append(
'<span style="color:#00F;">Mouse down.</span>'
);
});
滚动(FN)
:每一个匹配元素的scroll事件中绑定一个处理函数。
$(
"p"
).clone().appendTo(document.body);
$(
"p"
).clone().appendTo(document.body);
$(
"p"
).clone().appendTo(document.body);
$(window).scroll(
function
() {
$(
"span"
).css(
"display"
,
"inline"
).fadeOut(
"slow"
);
});
站长行业门户(www.software8.co)文章,希望大家可以留言建议