SlideShare una empresa de Scribd logo
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

Más contenido relacionado

Destacado

JavaScript
JavaScriptJavaScript
JavaScript
tutorialsruby
 
Manual de java script practico
Manual de java script practicoManual de java script practico
Manual de java script practico
Universidad,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 JavaScript
Quique Fdez Guerra
 
Javascript
JavascriptJavascript
Javascript
guest044583b
 
Javascript OOP
Javascript OOPJavascript OOP
Javascript OOP
Gabriel Chertok
 
Introduction to Javascript
Introduction to JavascriptIntroduction to Javascript
Introduction to Javascript
Amit Tyagi
 
JavaScript desde Cero
JavaScript desde CeroJavaScript desde Cero
JavaScript desde Cero
Juan Seguí Moreno
 
Introducción a JavaScript 2
Introducción a JavaScript 2Introducción a JavaScript 2
Introducción a JavaScript 2
Lorenzo Alejo
 
Javascript
JavascriptJavascript
Javascript
guest03a6e6
 
Manual Tutorial Javascript Con Ejemplos
Manual Tutorial Javascript Con EjemplosManual Tutorial Javascript Con Ejemplos
Manual Tutorial Javascript Con Ejemplos
Steven 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 JavaScript
Jorge García C.
 
Javascript
JavascriptJavascript
Javascript
Naser Romero
 
Javascript 1
Javascript 1Javascript 1
Javascript 1
Juan 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 1
xjordi
 
Introducción a JavaScript 1
Introducción a JavaScript 1Introducción a JavaScript 1
Introducción a JavaScript 1
Lorenzo Alejo
 
Resumen Java Script
Resumen Java ScriptResumen Java Script
Resumen Java Script
jlgomezri
 
Programacion Avanzada JavaScript
Programacion Avanzada JavaScriptProgramacion Avanzada JavaScript
Programacion Avanzada JavaScript
tovi27
 
02 Ejercicios Resueltos diagramas de flujo
02 Ejercicios Resueltos diagramas de flujo02 Ejercicios Resueltos diagramas de flujo
02 Ejercicios Resueltos diagramas de flujo
Tete Alar
 

Destacado (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 a 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 datos
mariluruizramirez97
 
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
teresanorato
 
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
José Antonio Sandoval Acosta
 
Cómo colaborar en GNOME
Cómo colaborar en GNOMECómo colaborar en GNOME
Cómo colaborar en GNOME
Juanjo Marin
 
Programación del lado del cliente
Programación del lado del clienteProgramación del lado del cliente
Programación del lado del cliente
Gabriel Mondragón
 
Programacion Orientada a Eventos
Programacion Orientada a EventosProgramacion Orientada a Eventos
Programacion Orientada a Eventos
Laura
 
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 & IFML
Matteo 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.pdf
LorenaElizabethChuld
 
Mc silverlight2 dia1
Mc silverlight2 dia1Mc silverlight2 dia1
Mc silverlight2 dia1
YEK1702
 
Asdasdas
AsdasdasAsdasdas
Asdasdas
jaiversanchez
 
Com521
Com521Com521
Presentacion 3
Presentacion 3Presentacion 3
Presentacion 3
doriscalderas
 
Presentacion3
Presentacion3Presentacion3
Presentacion3
doriscalderas
 
Presentacion3
Presentacion3Presentacion3
Presentacion3
doriscalderas
 
Presentacion3
Presentacion3Presentacion3
Presentacion3
doriscalderas
 
Librovisual basic 4to final2 2014
Librovisual basic 4to final2 2014Librovisual basic 4to final2 2014
Librovisual basic 4to final2 2014
UNIVERSIDAD
 
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
rubenRuvic
 
Elder Proyecto 2 Presentacion 3
Elder Proyecto 2 Presentacion 3Elder Proyecto 2 Presentacion 3
Elder Proyecto 2 Presentacion 3
ELDER GAMALIEL
 
Eventos
EventosEventos

Similar a 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
 
Presentacion 3
Presentacion 3Presentacion 3
Presentacion 3
 
Presentacion3
Presentacion3Presentacion3
Presentacion3
 
Presentacion3
Presentacion3Presentacion3
Presentacion3
 
Presentacion3
Presentacion3Presentacion3
Presentacion3
 
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
 

Más de 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 React
Quique 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 tools
Quique Fdez Guerra
 
Why TypeScript?
Why TypeScript?Why TypeScript?
Why TypeScript?
Quique 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 TypeScript
Quique 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 él
Quique Fdez Guerra
 
Microsoft Student Partner
Microsoft Student PartnerMicrosoft Student Partner
Microsoft Student Partner
Quique Fdez Guerra
 
Reconnect
ReconnectReconnect
Cordova Productivity Tools
Cordova Productivity ToolsCordova Productivity Tools
Cordova Productivity Tools
Quique 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 Ionic
Quique Fdez Guerra
 
Los bots son las nuevas apps
Los bots son las nuevas appsLos bots son las nuevas apps
Los bots son las nuevas apps
Quique Fdez Guerra
 
Gitflow Workflow
Gitflow WorkflowGitflow Workflow
Gitflow Workflow
Quique Fdez Guerra
 
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
Quique 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 desarrollo
Quique 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
 
Nos vamos de SPA
Nos vamos de SPANos vamos de SPA
Nos vamos de SPA
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 desarrollo
Quique 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 HTML5
Quique Fdez Guerra
 

Más de 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