SlideShare a Scribd company logo

Eventos en las páginas

•
•
Quique Fdez Guerra
Quique Fdez Guerra
1 of 5
Eventos en las páginas - Introducción - Gestor de eventos en el BOM - DOM Level 2 - Eventos del DOM - Programación orientada a eventos
Presentación Quique Fdez. Guerra Desarrollador frontend en Beezy @CKGrafico - www.ckgrafico.com
Introducción “Cómo actuar cuando el usuario reacciona sobre alguna cosa” Se consideran dos modelos - Tradicional: - Moderno/Avanzado:
Gestor de eventos en el BOM Es genial porque todos los navegadores los implementan igual… ¡NO! El famoso es onload pero tenemos unos cuantos más DOM Level 2 Da un sistema de eventos genéricos. Introduce conceptos de cómo captura y cancelación. Métodos como addEventListener Etc.. Nota: No incluye interfaz para eventos de teclado (Level 3)
Eventos del DOM Cliclo de vida de los Eventos Eventos de teclado Eventos de ratón Eventos Touch Otros Eventos Programación Orientada a Eventos Lo vamos a ver muy por encima con MicroEvent.js

Recommended

Apuntes: manejo de eventos en javascript
Apuntes: manejo de eventos en javascriptApuntes: manejo de eventos en javascript
Apuntes: manejo de eventos en javascriptFrancisco Javier Arce Anguiano
 
Java script
Java script Java script
Java script Pidusa
 
Introduccion css
Introduccion cssIntroduccion css
Introduccion cssdaniks20
 
Conceptos y definiciones de poo. alumno.juan manuel osorio baruch
Conceptos y definiciones de poo. alumno.juan manuel osorio baruchConceptos y definiciones de poo. alumno.juan manuel osorio baruch
Conceptos y definiciones de poo. alumno.juan manuel osorio baruchJuan Osorio Baruch
 
Java script
Java scriptJava script
Java scriptCarlos Solano
 
RESUMEN DE JAVASCRIPT
RESUMEN DE JAVASCRIPTRESUMEN DE JAVASCRIPT
RESUMEN DE JAVASCRIPTAlejito Laaz
 
Javascript
JavascriptJavascript
JavascriptEstephanie AYa
 
Presentación JavaScript
Presentación JavaScriptPresentación JavaScript
Presentación JavaScriptLorenzo Morillas Tomás
 

Recommended

Apuntes: manejo de eventos en javascript
Apuntes: manejo de eventos en javascriptApuntes: manejo de eventos en javascript
Apuntes: manejo de eventos en javascriptFrancisco Javier Arce Anguiano
 
Java script
Java script Java script
Java script Pidusa
 
Introduccion css
Introduccion cssIntroduccion css
Introduccion cssdaniks20
 
Conceptos y definiciones de poo. alumno.juan manuel osorio baruch
Conceptos y definiciones de poo. alumno.juan manuel osorio baruchConceptos y definiciones de poo. alumno.juan manuel osorio baruch
Conceptos y definiciones de poo. alumno.juan manuel osorio baruchJuan Osorio Baruch
 
Java script
Java scriptJava script
Java scriptCarlos Solano
 
RESUMEN DE JAVASCRIPT
RESUMEN DE JAVASCRIPTRESUMEN DE JAVASCRIPT
RESUMEN DE JAVASCRIPTAlejito Laaz
 
Javascript
JavascriptJavascript
JavascriptEstephanie AYa
 
Presentación JavaScript
Presentación JavaScriptPresentación JavaScript
Presentación JavaScriptLorenzo Morillas Tomás
 
JavaScript
JavaScriptJavaScript
JavaScripttutorialsruby
 
Manual de java script practico
Manual de java script practicoManual de java script practico
Manual de java script practicoUniversidad,Capitan,General Gerardo, Barrios
 
Repaso conceptos básicos de JavaScript
Repaso conceptos básicos de JavaScriptRepaso conceptos básicos de JavaScript
Repaso conceptos básicos de JavaScriptQuique Fdez Guerra
 
Javascript
JavascriptJavascript
Javascriptguest044583b
 
Javascript OOP
Javascript OOPJavascript OOP
Javascript OOPGabriel Chertok
 
Introduction to Javascript
Introduction to JavascriptIntroduction to Javascript
Introduction to JavascriptAmit Tyagi
 
JavaScript desde Cero
JavaScript desde CeroJavaScript desde Cero
JavaScript desde CeroJuan Seguí Moreno
 
Introducción a JavaScript 2
Introducción a JavaScript 2Introducción a JavaScript 2
Introducción a JavaScript 2Lorenzo Alejo
 
Javascript
JavascriptJavascript
Javascriptguest03a6e6
 
Manual Tutorial Javascript Con Ejemplos
Manual Tutorial Javascript Con EjemplosManual Tutorial Javascript Con Ejemplos
Manual Tutorial Javascript Con EjemplosSteven Gomez
 
JavaScript para desarrolladores c#
JavaScript para desarrolladores c#JavaScript para desarrolladores c#
JavaScript para desarrolladores c#Luis Ruiz Pavón
 
Introduccion a la programacion (Pseudocódigo + JavaScript)
Introduccion a la programacion (Pseudocódigo + JavaScript)Introduccion a la programacion (Pseudocódigo + JavaScript)
Introduccion a la programacion (Pseudocódigo + JavaScript)Quique Fdez Guerra
 
Dom JavaScript
Dom JavaScriptDom JavaScript
Dom JavaScriptJorge García C.
 
Javascript
JavascriptJavascript
JavascriptNaser Romero
 
Javascript 1
Javascript 1Javascript 1
Javascript 1Juan C
 
Introducción a la Programación en Javascript. Clase 1
Introducción a la Programación en Javascript. Clase 1Introducción a la Programación en Javascript. Clase 1
Introducción a la Programación en Javascript. Clase 1xjordi
 
Introducción a JavaScript 1
Introducción a JavaScript 1Introducción a JavaScript 1
Introducción a JavaScript 1Lorenzo Alejo
 
Resumen Java Script
Resumen Java ScriptResumen Java Script
Resumen Java Scriptjlgomezri
 
Programacion Avanzada JavaScript
Programacion Avanzada JavaScriptProgramacion Avanzada JavaScript
Programacion Avanzada JavaScripttovi27
 
02 Ejercicios Resueltos diagramas de flujo
02 Ejercicios Resueltos diagramas de flujo02 Ejercicios Resueltos diagramas de flujo
02 Ejercicios Resueltos diagramas de flujoTete Alar
 
Aplicaciones de escritorio con base de datos
Aplicaciones de escritorio con base de datosAplicaciones de escritorio con base de datos
Aplicaciones de escritorio con base de datosmariluruizramirez97
 
Aplicaciones de escritorio con base de datos
Aplicaciones de escritorio con base de datosAplicaciones de escritorio con base de datos
Aplicaciones de escritorio con base de datosteresanorato
 

More Related Content

Viewers also liked

Repaso conceptos básicos de JavaScript
Repaso conceptos básicos de JavaScriptRepaso conceptos básicos de JavaScript
Repaso conceptos básicos de JavaScriptQuique Fdez Guerra
 
Introduction to Javascript
Introduction to JavascriptIntroduction to Javascript
Introduction to JavascriptAmit Tyagi
 
Introducción a JavaScript 2
Introducción a JavaScript 2Introducción a JavaScript 2
Introducción a JavaScript 2Lorenzo Alejo
 
Manual Tutorial Javascript Con Ejemplos
Manual Tutorial Javascript Con EjemplosManual Tutorial Javascript Con Ejemplos
Manual Tutorial Javascript Con EjemplosSteven Gomez
 
JavaScript para desarrolladores c#
JavaScript para desarrolladores c#JavaScript para desarrolladores c#
JavaScript para desarrolladores c#Luis Ruiz Pavón
 
Introduccion a la programacion (Pseudocódigo + JavaScript)
Introduccion a la programacion (Pseudocódigo + JavaScript)Introduccion a la programacion (Pseudocódigo + JavaScript)
Introduccion a la programacion (Pseudocódigo + JavaScript)Quique Fdez Guerra
 
Javascript 1
Javascript 1Javascript 1
Javascript 1Juan C
 
Introducción a la Programación en Javascript. Clase 1
Introducción a la Programación en Javascript. Clase 1Introducción a la Programación en Javascript. Clase 1
Introducción a la Programación en Javascript. Clase 1xjordi
 
Introducción a JavaScript 1
Introducción a JavaScript 1Introducción a JavaScript 1
Introducción a JavaScript 1Lorenzo Alejo
 
Resumen Java Script
Resumen Java ScriptResumen Java Script
Resumen Java Scriptjlgomezri
 
Programacion Avanzada JavaScript
Programacion Avanzada JavaScriptProgramacion Avanzada JavaScript
Programacion Avanzada JavaScripttovi27
 
02 Ejercicios Resueltos diagramas de flujo
02 Ejercicios Resueltos diagramas de flujo02 Ejercicios Resueltos diagramas de flujo
02 Ejercicios Resueltos diagramas de flujoTete Alar
 

Viewers also liked (20)

JavaScript
JavaScriptJavaScript
JavaScript
 
Manual de java script practico
Manual de java script practicoManual de java script practico
Manual de java script practico
 
Repaso conceptos básicos de JavaScript
Repaso conceptos básicos de JavaScriptRepaso conceptos básicos de JavaScript
Repaso conceptos básicos de JavaScript
 
Javascript
JavascriptJavascript
Javascript
 
Javascript OOP
Javascript OOPJavascript OOP
Javascript OOP
 
Introduction to Javascript
Introduction to JavascriptIntroduction to Javascript
Introduction to Javascript
 
JavaScript desde Cero
JavaScript desde CeroJavaScript desde Cero
JavaScript desde Cero
 
Introducción a JavaScript 2
Introducción a JavaScript 2Introducción a JavaScript 2
Introducción a JavaScript 2
 
Javascript
JavascriptJavascript
Javascript
 
Manual Tutorial Javascript Con Ejemplos
Manual Tutorial Javascript Con EjemplosManual Tutorial Javascript Con Ejemplos
Manual Tutorial Javascript Con Ejemplos
 
JavaScript para desarrolladores c#
JavaScript para desarrolladores c#JavaScript para desarrolladores c#
JavaScript para desarrolladores c#
 
Introduccion a la programacion (Pseudocódigo + JavaScript)
Introduccion a la programacion (Pseudocódigo + JavaScript)Introduccion a la programacion (Pseudocódigo + JavaScript)
Introduccion a la programacion (Pseudocódigo + JavaScript)
 
Dom JavaScript
Dom JavaScriptDom JavaScript
Dom JavaScript
 
Javascript
JavascriptJavascript
Javascript
 
Javascript 1
Javascript 1Javascript 1
Javascript 1
 
Introducción a la Programación en Javascript. Clase 1
Introducción a la Programación en Javascript. Clase 1Introducción a la Programación en Javascript. Clase 1
Introducción a la Programación en Javascript. Clase 1
 
Introducción a JavaScript 1
Introducción a JavaScript 1Introducción a JavaScript 1
Introducción a JavaScript 1
 
Resumen Java Script
Resumen Java ScriptResumen Java Script
Resumen Java Script
 
Programacion Avanzada JavaScript
Programacion Avanzada JavaScriptProgramacion Avanzada JavaScript
Programacion Avanzada JavaScript
 
02 Ejercicios Resueltos diagramas de flujo
02 Ejercicios Resueltos diagramas de flujo02 Ejercicios Resueltos diagramas de flujo
02 Ejercicios Resueltos diagramas de flujo
 

Similar to Eventos en las páginas

Aplicaciones de escritorio con base de datos
Aplicaciones de escritorio con base de datosAplicaciones de escritorio con base de datos
Aplicaciones de escritorio con base de datosmariluruizramirez97
 
Aplicaciones de escritorio con base de datos
Aplicaciones de escritorio con base de datosAplicaciones de escritorio con base de datos
Aplicaciones de escritorio con base de datosteresanorato
 
Cómo colaborar en GNOME
Cómo colaborar en GNOMECómo colaborar en GNOME
Cómo colaborar en GNOMEJuanjo Marin
 
Programación del lado del cliente
Programación del lado del clienteProgramación del lado del cliente
Programación del lado del clienteGabriel Mondragón
 
Programacion Orientada a Eventos
Programacion Orientada a EventosProgramacion Orientada a Eventos
Programacion Orientada a EventosLaura
 
Pres3 (menu)
Pres3 (menu)Pres3 (menu)
Pres3 (menu)rogelopez
 
Bpm forum 2013 WebRatio - BPMN & IFML
Bpm forum 2013 WebRatio - BPMN & IFMLBpm forum 2013 WebRatio - BPMN & IFML
Bpm forum 2013 WebRatio - BPMN & IFMLMatteo Silva
 
Lenguajes de ProgramaciónLenguajes de Programación.pdf.pdf
Lenguajes de ProgramaciónLenguajes de Programación.pdf.pdfLenguajes de ProgramaciónLenguajes de Programación.pdf.pdf
Lenguajes de ProgramaciónLenguajes de Programación.pdf.pdfLorenaElizabethChuld
 
Mc silverlight2 dia1
Mc silverlight2 dia1Mc silverlight2 dia1
Mc silverlight2 dia1YEK1702
 
Librovisual basic 4to final2 2014
Librovisual basic 4to final2 2014Librovisual basic 4to final2 2014
Librovisual basic 4to final2 2014UNIVERSIDAD
 
Presentacion FreePubliDisplay para el III Hackathon de Software Libre
Presentacion FreePubliDisplay para el III Hackathon de Software LibrePresentacion FreePubliDisplay para el III Hackathon de Software Libre
Presentacion FreePubliDisplay para el III Hackathon de Software LibrerubenRuvic
 
Elder Proyecto 2 Presentacion 3
Elder Proyecto 2 Presentacion 3Elder Proyecto 2 Presentacion 3
Elder Proyecto 2 Presentacion 3ELDER GAMALIEL
 

Similar to Eventos en las páginas (20)

Aplicaciones de escritorio con base de datos
Aplicaciones de escritorio con base de datosAplicaciones de escritorio con base de datos
Aplicaciones de escritorio con base de datos
 
Aplicaciones de escritorio con base de datos
Aplicaciones de escritorio con base de datosAplicaciones de escritorio con base de datos
Aplicaciones de escritorio con base de datos
 
Topicos Avanzados de Programacion Unidad 1 Eventos
Topicos Avanzados de Programacion Unidad 1 EventosTopicos Avanzados de Programacion Unidad 1 Eventos
Topicos Avanzados de Programacion Unidad 1 Eventos
 
Cómo colaborar en GNOME
Cómo colaborar en GNOMECómo colaborar en GNOME
Cómo colaborar en GNOME
 
Programación del lado del cliente
Programación del lado del clienteProgramación del lado del cliente
Programación del lado del cliente
 
Programacion Orientada a Eventos
Programacion Orientada a EventosProgramacion Orientada a Eventos
Programacion Orientada a Eventos
 
Pres3 (menu)
Pres3 (menu)Pres3 (menu)
Pres3 (menu)
 
Bpm forum 2013 WebRatio - BPMN & IFML
Bpm forum 2013 WebRatio - BPMN & IFMLBpm forum 2013 WebRatio - BPMN & IFML
Bpm forum 2013 WebRatio - BPMN & IFML
 
Lenguajes de ProgramaciónLenguajes de Programación.pdf.pdf
Lenguajes de ProgramaciónLenguajes de Programación.pdf.pdfLenguajes de ProgramaciónLenguajes de Programación.pdf.pdf
Lenguajes de ProgramaciónLenguajes de Programación.pdf.pdf
 
Mc silverlight2 dia1
Mc silverlight2 dia1Mc silverlight2 dia1
Mc silverlight2 dia1
 
Asdasdas
AsdasdasAsdasdas
Asdasdas
 
Com521
Com521Com521
Com521
 
Presentacion3
Presentacion3Presentacion3
Presentacion3
 
Presentacion3
Presentacion3Presentacion3
Presentacion3
 
Presentacion3
Presentacion3Presentacion3
Presentacion3
 
Presentacion 3
Presentacion 3Presentacion 3
Presentacion 3
 
Librovisual basic 4to final2 2014
Librovisual basic 4to final2 2014Librovisual basic 4to final2 2014
Librovisual basic 4to final2 2014
 
Presentacion FreePubliDisplay para el III Hackathon de Software Libre
Presentacion FreePubliDisplay para el III Hackathon de Software LibrePresentacion FreePubliDisplay para el III Hackathon de Software Libre
Presentacion FreePubliDisplay para el III Hackathon de Software Libre
 
Elder Proyecto 2 Presentacion 3
Elder Proyecto 2 Presentacion 3Elder Proyecto 2 Presentacion 3
Elder Proyecto 2 Presentacion 3
 
Eventos
EventosEventos
Eventos
 

More from Quique Fdez Guerra

Frontend 101 Initializing a Frontend Project using React
Frontend 101 Initializing a Frontend Project using ReactFrontend 101 Initializing a Frontend Project using React
Frontend 101 Initializing a Frontend Project using ReactQuique Fdez Guerra
 
YOU CAN INJECT DEPENDENCIES IN YOUR COMPONENTS, LET'S DO IT.
YOU CAN INJECT DEPENDENCIES IN YOUR COMPONENTS, LET'S DO IT. YOU CAN INJECT DEPENDENCIES IN YOUR COMPONENTS, LET'S DO IT.
YOU CAN INJECT DEPENDENCIES IN YOUR COMPONENTS, LET'S DO IT.Quique Fdez Guerra
 
Empowering Vue with Typescript, Inversify, Vuex and some other super tools
Empowering Vue with Typescript, Inversify, Vuex and some other super toolsEmpowering Vue with Typescript, Inversify, Vuex and some other super tools
Empowering Vue with Typescript, Inversify, Vuex and some other super toolsQuique Fdez Guerra
 
Real and scalable applications with Nuxt, Vuex and TypeScript
Real and scalable applications with Nuxt, Vuex and TypeScriptReal and scalable applications with Nuxt, Vuex and TypeScript
Real and scalable applications with Nuxt, Vuex and TypeScriptQuique Fdez Guerra
 
Lord of the codes: Visual Studio y todo lo que puedes hacer con él
Lord of the codes: Visual Studio y todo lo que puedes hacer con élLord of the codes: Visual Studio y todo lo que puedes hacer con él
Lord of the codes: Visual Studio y todo lo que puedes hacer con élQuique Fdez Guerra
 
Más productivos con Apache Cordova e Ionic
Más productivos con Apache Cordova e IonicMás productivos con Apache Cordova e Ionic
Más productivos con Apache Cordova e IonicQuique Fdez Guerra
 
Mejora de la atención odontológica para países en desarrollo
Mejora de la atención odontológica para países en desarrolloMejora de la atención odontológica para países en desarrollo
Mejora de la atención odontológica para países en desarrolloQuique Fdez Guerra
 
HTML5 en el universo Windows (Apps universales)
HTML5 en el universo Windows (Apps universales)HTML5 en el universo Windows (Apps universales)
HTML5 en el universo Windows (Apps universales)Quique Fdez Guerra
 
#Win8JSApps | 4.- Métodos de desarrollo
#Win8JSApps | 4.- Métodos de desarrollo#Win8JSApps | 4.- Métodos de desarrollo
#Win8JSApps | 4.- Métodos de desarrolloQuique Fdez Guerra
 
Pasado, presente y Futuro de las aplicaciones en HTML5
Pasado, presente y Futuro de las aplicaciones en HTML5Pasado, presente y Futuro de las aplicaciones en HTML5
Pasado, presente y Futuro de las aplicaciones en HTML5Quique Fdez Guerra
 

More from Quique Fdez Guerra (18)

Frontend 101 Initializing a Frontend Project using React
Frontend 101 Initializing a Frontend Project using ReactFrontend 101 Initializing a Frontend Project using React
Frontend 101 Initializing a Frontend Project using React
 
YOU CAN INJECT DEPENDENCIES IN YOUR COMPONENTS, LET'S DO IT.
YOU CAN INJECT DEPENDENCIES IN YOUR COMPONENTS, LET'S DO IT. YOU CAN INJECT DEPENDENCIES IN YOUR COMPONENTS, LET'S DO IT.
YOU CAN INJECT DEPENDENCIES IN YOUR COMPONENTS, LET'S DO IT.
 
Empowering Vue with Typescript, Inversify, Vuex and some other super tools
Empowering Vue with Typescript, Inversify, Vuex and some other super toolsEmpowering Vue with Typescript, Inversify, Vuex and some other super tools
Empowering Vue with Typescript, Inversify, Vuex and some other super tools
 
Why TypeScript?
Why TypeScript?Why TypeScript?
Why TypeScript?
 
Real and scalable applications with Nuxt, Vuex and TypeScript
Real and scalable applications with Nuxt, Vuex and TypeScriptReal and scalable applications with Nuxt, Vuex and TypeScript
Real and scalable applications with Nuxt, Vuex and TypeScript
 
Lord of the codes: Visual Studio y todo lo que puedes hacer con él
Lord of the codes: Visual Studio y todo lo que puedes hacer con élLord of the codes: Visual Studio y todo lo que puedes hacer con él
Lord of the codes: Visual Studio y todo lo que puedes hacer con él
 
Microsoft Student Partner
Microsoft Student PartnerMicrosoft Student Partner
Microsoft Student Partner
 
Reconnect
ReconnectReconnect
Reconnect
 
Cordova Productivity Tools
Cordova Productivity ToolsCordova Productivity Tools
Cordova Productivity Tools
 
Más productivos con Apache Cordova e Ionic
Más productivos con Apache Cordova e IonicMás productivos con Apache Cordova e Ionic
Más productivos con Apache Cordova e Ionic
 
Los bots son las nuevas apps
Los bots son las nuevas appsLos bots son las nuevas apps
Los bots son las nuevas apps
 
Gitflow Workflow
Gitflow WorkflowGitflow Workflow
Gitflow Workflow
 
Yo solo te pedí un plátano
Yo solo te pedí un plátanoYo solo te pedí un plátano
Yo solo te pedí un plátano
 
Mejora de la atención odontológica para países en desarrollo
Mejora de la atención odontológica para países en desarrolloMejora de la atención odontológica para países en desarrollo
Mejora de la atención odontológica para países en desarrollo
 
HTML5 en el universo Windows (Apps universales)
HTML5 en el universo Windows (Apps universales)HTML5 en el universo Windows (Apps universales)
HTML5 en el universo Windows (Apps universales)
 
Nos vamos de SPA
Nos vamos de SPANos vamos de SPA
Nos vamos de SPA
 
#Win8JSApps | 4.- Métodos de desarrollo
#Win8JSApps | 4.- Métodos de desarrollo#Win8JSApps | 4.- Métodos de desarrollo
#Win8JSApps | 4.- Métodos de desarrollo
 
Pasado, presente y Futuro de las aplicaciones en HTML5
Pasado, presente y Futuro de las aplicaciones en HTML5Pasado, presente y Futuro de las aplicaciones en HTML5
Pasado, presente y Futuro de las aplicaciones en HTML5
 

Eventos en las páginas

  • 1. Eventos en las páginas - Introducción - Gestor de eventos en el BOM - DOM Level 2 - Eventos del DOM - Programación orientada a eventos
  • 2. Presentación Quique Fdez. Guerra Desarrollador frontend en Beezy @CKGrafico - www.ckgrafico.com
  • 3. Introducción “Cómo actuar cuando el usuario reacciona sobre alguna cosa” Se consideran dos modelos - Tradicional: - Moderno/Avanzado:
  • 4. Gestor de eventos en el BOM Es genial porque todos los navegadores los implementan igual… ¡NO! El famoso es onload pero tenemos unos cuantos más DOM Level 2 Da un sistema de eventos genéricos. Introduce conceptos de cómo captura y cancelación. Métodos como addEventListener Etc.. Nota: No incluye interfaz para eventos de teclado (Level 3)
  • 5. Eventos del DOM Cliclo de vida de los Eventos Eventos de teclado Eventos de ratón Eventos Touch Otros Eventos Programación Orientada a Eventos Lo vamos a ver muy por encima con MicroEvent.js