09 desarrollo de aplicaciones web con angular js eventos
-
Upload
christian-enrique-portilla-pauca -
Category
Technology
-
view
284 -
download
2
Transcript of 09 desarrollo de aplicaciones web con angular js eventos
![Page 1: 09 desarrollo de aplicaciones web con angular js eventos](https://reader035.fdocuments.net/reader035/viewer/2022062401/5879c1051a28abb42a8b511f/html5/thumbnails/1.jpg)
DESARROLLO DE APLICACIONES WEB CON ANGULARJS - EVENTOS
CHRISTIAN PORTILLA PAUCA
![Page 2: 09 desarrollo de aplicaciones web con angular js eventos](https://reader035.fdocuments.net/reader035/viewer/2022062401/5879c1051a28abb42a8b511f/html5/thumbnails/2.jpg)
CONTENIDOS
• INTRODUCCIÓN• EVENTOS• EVENTOS DE MOUSE• DIRECTIVA NG-CLICK• TOGGLE• OBJETO $EVENT
![Page 3: 09 desarrollo de aplicaciones web con angular js eventos](https://reader035.fdocuments.net/reader035/viewer/2022062401/5879c1051a28abb42a8b511f/html5/thumbnails/3.jpg)
INTRODUCCION
• ANGULARJS TIENE SUS PROPIAS DIRECTIVAS DE EVENTOS.
![Page 4: 09 desarrollo de aplicaciones web con angular js eventos](https://reader035.fdocuments.net/reader035/viewer/2022062401/5879c1051a28abb42a8b511f/html5/thumbnails/4.jpg)
EVENTOS
• NG-BLUR NG-CHANGE NG-CLICK NG-COPY NG-CUT NG-DBLCLICK NG-FOCUS NG-KEYDOWN NG-KEYPRESS
• NG-KEYUP NG-MOUSEDOWN NG-MOUSEENTER NG-MOUSELEAVE NG-MOUSEMOVE NG-MOUSEOVER NG-MOUSEUP NG-PASTE
![Page 5: 09 desarrollo de aplicaciones web con angular js eventos](https://reader035.fdocuments.net/reader035/viewer/2022062401/5879c1051a28abb42a8b511f/html5/thumbnails/5.jpg)
EVENTOS
• LAS DIRECTIVAS DE EVENTOS PERMITEN EJECUTAR CÓDIGO DE FUNCIONES.• UN EVENTO EN ANGULARJS NO SOBRESCRIBE
UN EVENTO DE HTML.
![Page 6: 09 desarrollo de aplicaciones web con angular js eventos](https://reader035.fdocuments.net/reader035/viewer/2022062401/5879c1051a28abb42a8b511f/html5/thumbnails/6.jpg)
EVENTOS DE MOUSE
• LOS EVENTOS DE MOUSE OCURREN CUANDO EL CURSOR SE MUEVE SOBRE UN ELEMENTO• SE PUEDE AÑADIR EVENTOS DE MOUSE EN
CUALQUIER ELEMENTO HTML.
![Page 7: 09 desarrollo de aplicaciones web con angular js eventos](https://reader035.fdocuments.net/reader035/viewer/2022062401/5879c1051a28abb42a8b511f/html5/thumbnails/7.jpg)
EVENTOS DE MOUSE
• NG-MOUSEENTER• NG-MOUSEOVER• NG-MOUSEMOVE• NG-MOUSELEAVE
• NG-MOUSEDOWN• NG-MOUSEUP• NG-CLICK
![Page 8: 09 desarrollo de aplicaciones web con angular js eventos](https://reader035.fdocuments.net/reader035/viewer/2022062401/5879c1051a28abb42a8b511f/html5/thumbnails/8.jpg)
LA DIRECTIVA NG-CLICK
• LA DIRECTIVA NG-CLICK ES EQUIVALENTE A CLICK COMO EVENTO.
![Page 9: 09 desarrollo de aplicaciones web con angular js eventos](https://reader035.fdocuments.net/reader035/viewer/2022062401/5879c1051a28abb42a8b511f/html5/thumbnails/9.jpg)
TOGGLE, TRUE/FALSE
• SI SE DESEA SE PUEDE MOSTRAR/OCULTAR UNA SECCIÓN DE CÓDIGO HTML
![Page 10: 09 desarrollo de aplicaciones web con angular js eventos](https://reader035.fdocuments.net/reader035/viewer/2022062401/5879c1051a28abb42a8b511f/html5/thumbnails/10.jpg)
EL OBJETO $EVENT
• SE PUEDE PASAR EL OBJETO $EVENT COMO UN ARGUMENTO DE LLAMADA LA FUNCION.• EL OBJETO $EVENT CONTIENE EL OBJETO DE
EVENTO DEL NAVEGADOR.
![Page 11: 09 desarrollo de aplicaciones web con angular js eventos](https://reader035.fdocuments.net/reader035/viewer/2022062401/5879c1051a28abb42a8b511f/html5/thumbnails/11.jpg)
FIN
• MAIL: [email protected] BLOG: HTTP://JAVASCRIPTX.WORDPRESS.COM• SITE: WWW.CHRISTIANPORTILLA.COM• VIDEO: HTTPS://YOUTU.BE/5Z6NS7TBAKE