{"id":6942,"date":"2018-03-15T09:44:42","date_gmt":"2018-03-15T09:44:42","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=6942"},"modified":"2018-03-15T09:44:42","modified_gmt":"2018-03-15T09:44:42","slug":"capturar-eventos-con-bind-y-eliminarlos-con-unbind","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/capturar-eventos-con-bind-y-eliminarlos-con-unbind\/","title":{"rendered":"Capturar eventos con bind() y eliminarlos con unbind()"},"content":{"rendered":"

jQuery es mi framework favorito para desarrollar p\u00e1ginas y aplicaciones Web que requieran de interacci\u00f3n con el usuario de forma din\u00e1mica y no requiera actualizar la p\u00e1gina para mostrar otro contenido. Los eventos en jQuery son imprescindibles en este caso y saber capturarlos es clave para poder conseguir tu objetivo.<\/p>\n

Existen muchos eventos para capturar acciones del usuario de las que hablaremos en un pr\u00f3ximo tutorial de una forma m\u00e1s extendida. En este art\u00edculo quiero hacer hincapi\u00e9 en la posibilidad de usar el evento bind()<\/strong> para definir cualquier tipo de evento.<\/p>\n

El m\u00e9todo bind()<\/strong> se utiliza para definir eventos de forma gen\u00e9rica y de cualquier tipo. Dispones del m\u00e9todo contrario unbind()<\/strong> que permite eliminar el controlador del evento.<\/p>\n

Necesitar\u00e1s incluir en la p\u00e1gina al menos la librer\u00eda jQuery para poder usar estos m\u00e9todos. Para probar puedes a\u00f1adir lo siguiente dentro de la etiqueta <head>:<\/p>\n

<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<script<\/span><\/a> src<\/span>=<\/span>"https:\/\/code.jquery.com\/jquery-3.2.1.slim.min.js"<\/span>><\/<\/span>script<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
En el ejemplo en funcionamiento vamos a tener 2 botones o enlaces que definimos dentro del <body> de la siguiente forma:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> class<\/span>=<\/span>"btn btn-primary boton1"<\/span>><\/span>Boton 1<\/<\/span>a<\/span><\/a>><\/span>\n<a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> class<\/span>=<\/span>"btn btn-secondary boton2"<\/span>><\/span>Boton 2<\/<\/span>a<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Para el bot\u00f3n 1 hemos creado un controlador para el evento \u00abclick\u00bb del mismo que tan solo abrir\u00e1 una alerta al ser ejecutado.<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>'.boton1'<\/span>)<\/span>.bind<\/span>(<\/span>'click'<\/span>,<\/span> function<\/span>(<\/span>)<\/span>{<\/span>\n    alert<\/span>(<\/span>'Has hecho click en el boton 1.'<\/span>)<\/span>;<\/span>\n    return<\/span> false<\/span>;<\/span>\n}<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
Para nuestro bot\u00f3n 1 estamos usando la funci\u00f3n bind()<\/strong> para definir el evento click.<\/p>\n
Al pulsar en el bot\u00f3n 2 queremos que el bot\u00f3n 1 pierda su manejador del evento o acci\u00f3n. Lo conseguimos con el siguiente c\u00f3digo que captura el evento del bot\u00f3n 2:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>'.boton2'<\/span>)<\/span>.bind<\/span>(<\/span>'click'<\/span>,<\/span> function<\/span>(<\/span>)<\/span>{<\/span>\n    $(<\/span>'.boton1'<\/span>)<\/span>.unbind<\/span>(<\/span>'click'<\/span>)<\/span>;<\/span>\n    alert<\/span>(<\/span>'Has deshabilitado el boton 1. Prueba a hacer click ahora!'<\/span>)<\/span>;<\/span>\n    return<\/span> false<\/span>;<\/span>\n}<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
Capturar los eventos con bind()<\/strong> tiene m\u00e1s ventajas ya que podr\u00edas capturar varios eventos en el mismo controlador. Por ejemplo:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>'.boton3'<\/span>)<\/span>.bind<\/span>(<\/span>'click, dbclick'<\/span>,<\/span> function<\/span>(<\/span>)<\/span>{<\/span>\n   \/\/Your code here<\/span>\n}<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
Para el controlador del evento del bot\u00f3n 3 deber\u00e1s imaginar que en la p\u00e1gina tendremos un enlace o bot\u00f3n\u00a0 que al hacer click o doble click, podr\u00edamos hacer alguna acci\u00f3n.<\/p>\n
El ejemplo en funcionamiento es una tonter\u00eda pero estas funciones se podr\u00edan emplear en multitud de situaciones e incluso podr\u00edan sacarte de un apuro.<\/p>\n
Ver ejemplo en funcionamiento<\/a><\/p>\n
Ver m\u00e1s informaci\u00f3n sobre bind()<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
jQuery es mi framework favorito para desarrollar p\u00e1ginas y aplicaciones Web que requieran de interacci\u00f3n con el usuario de forma din\u00e1mica y no requiera actualizar la p\u00e1gina para mostrar otro contenido. Los eventos en jQuery son imprescindibles en este caso y saber capturarlos es clave para poder conseguir tu objetivo. Existen muchos eventos para capturar […]<\/p>\n","protected":false},"author":1,"featured_media":6943,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[167],"class_list":["post-6942","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-eventos"],"yoast_head":"\nCapturar eventos con bind() y eliminarlos con unbind() - Jose Aguilar Blog<\/title>\n<meta name=\"description\" content=\"Captura todo tipo de eventos con las funci\u00f3n bind() y elim\u00ednalos con la funci\u00f3n unbind(). Para la interacci\u00f3n din\u00e1mica de los usuario, los eventos en jQuery son imprescindibles en este caso y saber capturarlos es clave para poder conseguir tu objetivo.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Capturar eventos con bind() y eliminarlos con unbind() - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Captura todo tipo de eventos con las funci\u00f3n bind() y elim\u00ednalos con la funci\u00f3n unbind(). Para la interacci\u00f3n din\u00e1mica de los usuario, los eventos en jQuery son imprescindibles en este caso y saber capturarlos es clave para poder conseguir tu objetivo.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/capturar-eventos-con-bind-y-eliminarlos-con-unbind\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2018-03-15T09:44:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2018\/03\/jquery-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"800\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/capturar-eventos-con-bind-y-eliminarlos-con-unbind\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/capturar-eventos-con-bind-y-eliminarlos-con-unbind\/\",\"name\":\"Capturar eventos con bind() y eliminarlos con unbind() - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/capturar-eventos-con-bind-y-eliminarlos-con-unbind\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/capturar-eventos-con-bind-y-eliminarlos-con-unbind\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2018\/03\/jquery-1.png\",\"datePublished\":\"2018-03-15T09:44:42+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"description\":\"Captura todo tipo de eventos con las funci\u00f3n bind() y elim\u00ednalos con la funci\u00f3n unbind(). Para la interacci\u00f3n din\u00e1mica de los usuario, los eventos en jQuery son imprescindibles en este caso y saber capturarlos es clave para poder conseguir tu objetivo.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/capturar-eventos-con-bind-y-eliminarlos-con-unbind\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/capturar-eventos-con-bind-y-eliminarlos-con-unbind\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/capturar-eventos-con-bind-y-eliminarlos-con-unbind\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2018\/03\/jquery-1.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2018\/03\/jquery-1.png\",\"width\":800,\"height\":800},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/capturar-eventos-con-bind-y-eliminarlos-con-unbind\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Capturar eventos con bind() y eliminarlos con unbind()\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Capturar eventos con bind() y eliminarlos con unbind() - Jose Aguilar Blog","description":"Captura todo tipo de eventos con las funci\u00f3n bind() y elim\u00ednalos con la funci\u00f3n unbind(). Para la interacci\u00f3n din\u00e1mica de los usuario, los eventos en jQuery son imprescindibles en este caso y saber capturarlos es clave para poder conseguir tu objetivo.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Capturar eventos con bind() y eliminarlos con unbind() - Jose Aguilar Blog","og_description":"Captura todo tipo de eventos con las funci\u00f3n bind() y elim\u00ednalos con la funci\u00f3n unbind(). Para la interacci\u00f3n din\u00e1mica de los usuario, los eventos en jQuery son imprescindibles en este caso y saber capturarlos es clave para poder conseguir tu objetivo.","og_url":"https:\/\/www.jose-aguilar.com\/blog\/capturar-eventos-con-bind-y-eliminarlos-con-unbind\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2018-03-15T09:44:42+00:00","og_image":[{"width":800,"height":800,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2018\/03\/jquery-1.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/capturar-eventos-con-bind-y-eliminarlos-con-unbind\/","url":"https:\/\/www.jose-aguilar.com\/blog\/capturar-eventos-con-bind-y-eliminarlos-con-unbind\/","name":"Capturar eventos con bind() y eliminarlos con unbind() - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/capturar-eventos-con-bind-y-eliminarlos-con-unbind\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/capturar-eventos-con-bind-y-eliminarlos-con-unbind\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2018\/03\/jquery-1.png","datePublished":"2018-03-15T09:44:42+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"description":"Captura todo tipo de eventos con las funci\u00f3n bind() y elim\u00ednalos con la funci\u00f3n unbind(). Para la interacci\u00f3n din\u00e1mica de los usuario, los eventos en jQuery son imprescindibles en este caso y saber capturarlos es clave para poder conseguir tu objetivo.","breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/capturar-eventos-con-bind-y-eliminarlos-con-unbind\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/capturar-eventos-con-bind-y-eliminarlos-con-unbind\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/capturar-eventos-con-bind-y-eliminarlos-con-unbind\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2018\/03\/jquery-1.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2018\/03\/jquery-1.png","width":800,"height":800},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/capturar-eventos-con-bind-y-eliminarlos-con-unbind\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Capturar eventos con bind() y eliminarlos con unbind()"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/6942","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=6942"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/6942\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/6943"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=6942"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=6942"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=6942"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}