jquery学习手记（10）事件简介

 1. 使用jquery监听的方法有许多种：

// The many ways to bind events with jQuery // Attach an event handler directly to the button using jQuery's // shorthand `click` method. $( "#helloBtn" ).click(function( event ) {alert( "Hello." ); });// Attach an event handler directly the to button using jQuery's // `bind` method, passing it an event string of `click` $( "#helloBtn" ).bind( "click", function( event ) {alert( "Hello." ); });// As of jQuery 1.7, attach an event handler directly to the button // using jQuery's `on` method. $( "#helloBtn" ).on( "click", function( event ) {alert( "Hello." ); });// As of jQuery 1.7, attach an event handler to the `body` element that // is listening for clicks, and will respond whenever *any* button is // clicked on the page. $( "body" ).on({click: function( event ) {alert( "Hello." );} }, "button" );// An alternative to the previous example, using slightly different syntax. $( "body" ).on( "click", "button", function( event ) {alert( "Hello." ); });

2. 事件对象

// Preventing a default action from occurring and stopping the event bubbling $( "form" ).on( "submit", function( event ) {// Prevent the form's default submission. event.preventDefault();// Prevent event from bubbling up DOM tree, prohibiting delegation event.stopPropagation();// Make an AJAX request to submit the form data });

 3.事件处理

jquery的.on()方法提供了一些有用的特点：

 3.1 一对一的事件绑定

// When any <p> tag is clicked, we expect to see '<p> was clicked' in the console. $( "p" ).on( "click", function() {console.log( "<p> was clicked" ); });

 3.2 一对多的事件绑定

// When a user focuses on or changes any input element, we expect a console message // bind to multiple events $( "div" ).on( "mouseenter mouseleave", function() {console.log( "mouse hovered over or left a div" ); });

 3.3 多对多的事件绑定

$( "div" ).on({mouseenter: function() {console.log( "hovered over a div" );},mouseleave: function() {console.log( "mouse left a div" );},click: function() {console.log( "clicked on a div" );} });

 3.4  事件对象

$( "div" ).on( "click", function( event ) {console.log( "event object:" );console.dir( event ); });

3.5 向事件处理中传入数据

$( "p" ).on( "click", {foo: "bar" }, function( event ) {console.log( "event data: " + event.data.foo + " (should be 'bar')" ); });

3.6 事件代理

$( "ul" ).on( "click", "li", function() {console.log( "Something in a <ul> was clicked, and we detected that it was an <li> element." ); });

3.7 只运行一次的事件

// Switching handlers using the `.one()` method $( "p" ).one( "click", function() {console.log( "You just clicked this for the first time!" );$( this ).click(function() {console.log( "You have clicked this before!" );}); });

3.8 关闭事件

// Unbinding 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 );// foo will stay bound to the click event $( "p" ).off( "click", bar );

 

 

 

转载于:https://www.cnblogs.com/davidwang456/archive/2013/05/12/3073803.html

《新程序员》：云原生和全面数字化实践50位技术专家共同创作，文字、视频、音频交互阅读

总结

以上是生活随笔为你收集整理的jquery学习手记（10）事件简介的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。