Events ,详细教程http://api.jquery.com/category/events/
一、jQuery Event Basics jQ基本事件
1.给DOM元素设置响应事件方法
.click(),.blur(),.change(),.focus()............................. ,也可简便的使用on
$( "p" ).click(function() {
console.log( "You clicked a paragraph!" );
$( "p" ).on( "click", function() {
console.log( "click" );
2.给新页面的元素设置事件---on
只会给已存在的元素才能设置到监听事件
$( document ).ready(function(){
// Sets up click behavior on all button elements with the alert class
// that exist in the DOM when the instruction was executed
$( "button.alert" ).on( "click", function() {
console.log( "A button with the alert class was clicked!" );
});
// Now create a new button element with the alert class. This button
// was created after the click listeners were applied above, so it
// will not have the same click behavior as its peers
$( "<button class='alert'>Alert!</button>" ).appendTo( document.body );
});
3.Inside the Event Handler Function --事件函数的内部
1).事件内部有很多属性,例如.preventDefault()阻止默认的响应
(1).pageX,pageY
(2).type
(3).which
(4).data
(5).target
(6).namespace
(7).timeStamp
(8).preventDefault()
(9).stopPropagation()
2).DOM元素对象转jQuery对象,通过this关键字
var element = $( this );
// Preventing a link from being followed
$( "a" ).click(function( eventObject ) {
var elem = $( this );
if ( elem.attr( "href" ).match( /evil/ ) ) {
eventObject.preventDefault();
elem.addClass( "evil" );
}
});
4.设置多个事件响应
1).如果多个事件的响应相同,可以通过.on()方法,事件类型之间用空格
$( "input" ).on(
"click change", // Bind handlers for multiple events
function() {
console.log( "An input was clicked or changed!" );
}
);
2).如果有多个事件,每个事件不同,即用键值对的形式。
$( "p" ).on({
"click": function() { console.log( "clicked!" ); },
"mouseover": function() { console.log( "hovered!" ); }
});
5.命名空间事件
在复杂的程序和写插件有用
$( "p" ).on( "click.myNamespace", function() { /* ... */ } );
$( "p" ).off( "click.myNamespace" );
$( "p" ).off( ".myNamespace" ); // Unbin
6.解除事件绑定 .off()
// Tearing down all click handlers on a selection
$( "p" ).off( "click" );
// Tearing down a particular click handler, using a reference to the function
var foo = function() { console.log( "foo" ); };
var bar = function() { console.log( "bar" ); };
$( "p" ).on( "click", foo ).on( "click", bar );
$( "p" ).off( "click", bar ); // foo is still bound to the click event
7.设置事件只运行一次 .one()
1).one()方法
// Switching handlers using the `.one()` method
$( "p" ).one( "click", firstClick );//所有的p都有一次点击机会,而不是一个点击了,其他没有的点击事件了
function firstClick() {
console.log( "You just clicked this for the first time!" );
// Now set up the new handler for subsequent clicks;
// omit this step if no further click responses are needed
$( this ).click( function() { console.log( "You have clicked this before!" ); } );
}
2.one()方法也可以绑定多个事件
$( "input[id]" ).one( "focus mouseover keydown", firstEvent);
function firstEvent( eventObject ) {
console.log( "A " + eventObject.type + " event occurred for the first time on the input with id " + this.id );
}
二、Event Helpers帮助函数
1.hover()
$("button.alert").hover(function(){
$( this ).toggleClass( "hover" );
console.log("button ");
})
三、Triggering Event Handlers
1.trigger() 不可以模拟浏览器原生事件
2.trigger() 和.triggerhandler()
四、自定义事件
五、jQ事件扩展