|
| 1 | +--- |
| 2 | +chapter : events |
| 3 | +section : 2 |
| 4 | +title : Connecting Events to Elements |
| 5 | +attribution: jQuery Fundamentals |
| 6 | +--- |
| 7 | +## Connecting Events to Elements |
| 8 | + |
| 9 | +jQuery offers convenience methods for most common events, and these are the methods you will see used most often. |
| 10 | +These methods — including `$.fn.click`, `$.fn.focus`, `$.fn.blur`, `$.fn.change`, etc. — are shorthand for jQuery's `$.fn.bind` method. |
| 11 | +The bind method is useful for binding the same handler function to multiple events, when you want to provide data to the event hander, when you are working with custom events, or when you want to pass an object of multiple events and handlers. |
| 12 | + |
| 13 | +<div class="example" markdown="1"> |
| 14 | +Event binding using a convenience method |
| 15 | + |
| 16 | + $('p').click(function() { |
| 17 | + console.log('click'); |
| 18 | + }); |
| 19 | +</div> |
| 20 | + |
| 21 | +<div class="example" markdown="1"> |
| 22 | +Event biding using the `$.fn.bind` method |
| 23 | + |
| 24 | + $('p').bind('click', function() { |
| 25 | + console.log('click'); |
| 26 | + }); |
| 27 | +</div> |
| 28 | + |
| 29 | +<div class="example" markdown="1"> |
| 30 | +Event binding using the `$.fn.bind` method with data |
| 31 | + |
| 32 | + $('input').bind( |
| 33 | + 'click change', // bind to multiple events |
| 34 | + { foo : 'bar' }, // pass in data |
| 35 | + |
| 36 | + function(eventObject) { |
| 37 | + console.log(eventObject.type, eventObject.data); |
| 38 | + // logs event type, then { foo : 'bar' } |
| 39 | + } |
| 40 | + ); |
| 41 | +</div> |
| 42 | + |
| 43 | +### Connecting Events to Run Only Once |
| 44 | + |
| 45 | +Sometimes you need a particular handler to run only once — after that, you may want no handler to run, or you may want a different handler to run. |
| 46 | +jQuery provides the `$.fn.one` method for this purpose. |
| 47 | + |
| 48 | +<div class="example" markdown="1"> |
| 49 | +Switching handlers using the `$.fn.one` method |
| 50 | + |
| 51 | + $('p').one('click', function() { |
| 52 | + console.log('You just clicked this for the first time!'); |
| 53 | + $(this).click(function() { console.log('You have clicked this before!'); }); |
| 54 | + }); |
| 55 | +</div> |
| 56 | + |
| 57 | +The `$.fn.one` method is especially useful if you need to do some complicated setup the first time an element is clicked, but not subsequent times. |
| 58 | + |
| 59 | +### Disconnecting Events |
| 60 | + |
| 61 | +To disconnect an event handler, you use the `$.fn.unbind` method and pass in the event type to unbind. |
| 62 | +If you attached a named function to the event, then you can isolate the unbinding to that named function by passing it as the second argument. |
| 63 | + |
| 64 | +<div class="example" markdown="1"> |
| 65 | +Unbinding all click handlers on a selection |
| 66 | + |
| 67 | + $('p').unbind('click'); |
| 68 | +</div> |
| 69 | + |
| 70 | +<div class="example" markdown="1"> |
| 71 | +Unbinding a particular click handler |
| 72 | + |
| 73 | + var foo = function() { console.log('foo'); }; |
| 74 | + var bar = function() { console.log('bar'); }; |
| 75 | + |
| 76 | + $('p').bind('click', foo).bind('click', bar); |
| 77 | + $('p').unbind('click', bar); // foo is still bound to the click event |
| 78 | +</div> |
| 79 | + |
| 80 | +### Namespacing Events |
| 81 | + |
| 82 | +For complex applications and for plugins you share with others, it can be useful to namespace your events so you don't unintentionally disconnect events that you didn't or couldn't know about. |
| 83 | + |
| 84 | +<div class="example" markdown="1"> |
| 85 | +Namespacing events |
| 86 | + |
| 87 | + $('p').bind('click.myNamespace', function() { /* ... */ }); |
| 88 | + $('p').unbind('click.myNamespace'); |
| 89 | + $('p').unbind('.myNamespace'); // unbind all events in the namespace |
| 90 | +</div> |
| 91 | + |
| 92 | +### Binding Multiple Events |
| 93 | + |
| 94 | +Quite often elements in your application will be bound to multiple events, each having a different function for handing the event. |
| 95 | +In these cases you can pass an object into `$.fn.bind` with one or more key/value pairs, with the key being the event name and the value being the function to handle the event. |
| 96 | + |
| 97 | +<div class="example" markdown="1"> |
| 98 | +Binding Multiple Events |
| 99 | + |
| 100 | + $('p').bind({ |
| 101 | + 'click': function() { console.log('clicked!'); }, |
| 102 | + 'mouseover': function() { console.log('hovered!'); } |
| 103 | + }); |
| 104 | +</div> |
| 105 | + |
| 106 | +<div class="note" markdown="1"> |
| 107 | +### Note |
| 108 | + |
| 109 | +The option to pass an object of multiple events and handlers to $.fn.bind was introduced in jQuery 1.4.4. |
| 110 | +</div> |
0 commit comments