AW Tema 3-5 PDF

ndice:Tema3.
5
3.5 ElmodelodeeventosdeJavaScript
3.5.1 EventosenJavaScript 3.5.2 Manejadoresdeeventos 3.5.3 Elobjetoevent 3 5 4 Tipos 3.5.4 Ti d deeventos t
ndice:Tema3.5
3.5
3.5.1
ELMODELODEEVENTOSDEJAVASCRIPT
EVENTOSENJAVASCRIPT
ElmodelodeeventosdeJavaScript
JavaScript,ademsdeserunlenguajebasadoenobjetos,estambinunlenguaje deprogramacinconducidoporeventos.
LosscriptsdeJavaScript queaparecenenlaspginaswebsepuedenejecutarde dosformas:
Durantelainterpretacindelcdigodelapgina,amedidaquesevanencontrandolas instruccionesejecutables(incluyendoposiblementeinvocacionesdefunciones).
Alproducirsedeterminadoseventosparalosquesehanprevistoaccionesconcretas (scriptsdecdigoasociado).
Enelprimermtodoelcdigoseubicadentrodelaetiquetascriptsinestar asociado i d aningn i evento( (Ejercicio j i i 1). )
Vamosaanalizaraquconmsdetenimientoestesegundomtododeejecucin decdigo: ocurrenciadeeventos.
APLICACIONESWEB
TEMA3:PROGRAMACINENELLADODELCLIENTE
3.5
3.5.1
EVENTOSENJAVASCRIPT
Eventosymanejadoresdeeventos
Uneventoesunasealquesedisparaalproducirsealgncambio.
Loseventossonprovocadoslamayorpartedelasvecesporlasaccionesdelusuario(a medidaquemanejaelratnoelteclado).
Aunquetambinpuedenserprovocadosporotrostiposdecambiosenelentorno,como losqueocurrenduranteelprocesamientodeldocumentorecibido(findelacargadel d documento, t abandono b d de d l lapgina, i etc). t )
Cuandotienelugaruneventoseejecutaautomticamenteelscriptasociadoasu manejador (cadaeventotieneasociadounmanejador). manejador)
Pordefectolosmanejadoresdeeventosnotienenscriptsasociados,deformaque noseha hace enadacuando andoseprod producen. en
Somosnosotroslosquetenemosqueasociarscriptsalosmanejadoresdelos eventos t quequeramoscontrolar. t l
APLICACIONESWEB
3.5
3.5.1
EVENTOSENJAVASCRIPT
Tiposdeeventos(1)
Eventosderatn:Soportadosportodosloselementos.
click dblclick mousedown mousemove mouseout mouseover mouseup Pulsarysoltarelratn. Pinchardosvecesseguidasconelratn. Pulsarunbotndelratnynosoltarlo. Moverelratn. Elratnsaledelelemento. elemento Elratnentraenelelemento. Soltarelbotndelratn.
Eventosdeteclado:Soportadosportodosloselementosdeformularioy<body>.
keydown keypress keyup Pulsarunateclaynosoltarla. soltarla Pulsarunatecla. Soltarunateclapulsada.
APLICACIONESWEB
3.5
3.5.1
EVENTOSENJAVASCRIPT
Tiposdeeventos(2)
Eventosdecarga:<body>.
abort error load unload Interrumpirlacargadeunaimagenantesdesercargada. Produceunerrordurantelacargadeunaimagen. Terminarlacargadeldocumento. Abandonareldocumento.
Eventosdeventana: <body>.
move resize scroll Desplazarlaventana. Cambiareltamaodelaventana. Hacerscroll eneldocumento.
Eventosdeenfoque:<body>,<button>,<input>,<label>,<select>y<textarea>.
blur focus Deseleccionarelelemento. Seleccionarelelemento.
TEMA3:PROGRAMACINENELLADODELCLIENTE 6
APLICACIONESWEB
3.5
3.5.1
EVENTOSENJAVASCRIPT
Tiposdeeventos(3)
Eventosdeformulario
change reset t select submit Deseleccionarunelementoquesehamodificado(<input>,<select>y <textarea>). I i i li el Inicializar lf formulario l i (<f (<form>). >) Seleccionaruntexto(<input>y<textarea>). Enviarelformulario(<form>). ( )
Losmanejadoresdedichoseventossellamanigual,peroaadiendoelprefijo ondelante.Porejemplo:
onclick onblur onkeypress
APLICACIONESWEB
3.5
3.5.1
EVENTOSENJAVASCRIPT EJERCICIO28
Tiposdeeventos(4)
Probarellanzamientodediferenteseventosasociandoalcorrespondiente manejadordeleventounafuncinquemuestreelmensajeEventolanzado.
APLICACIONESWEB
3.5
3.5.1
EVENTOSENJAVASCRIPT
Propagacindeeventos(1)
Existendeterminadoseventosquesolosonrelevantesparaunoselementos determinados:
Porejemplo,eleventosubmit seproducesobreun<form>,peronoafectaaotras clasesdeobjetoscomo<textarea>,etc
Sinembargo,hayotroseventosquesonrelevantesavarioselementos.Entonces, quocurresiasociamosscriptsalosmismosmanejadoresdeeventodevarios elementosanidados?
Porejemplo,siseasociandistintosmanejadoresaleventoclick delcuerpoydeun prrafodentrodelcuerpo.Quocurrealhacerclick sobreelprrafo?
Respuesta:Pordefecto,loseventossevanpropagandohaciaarribaporla jerarquadecontenidosytodoslosobjetosantecesorestienenlaposibilidadde responderalevento(siemprequesearelevante)hastallegaralobjetoraz. raz
APLICACIONESWEB
3.5
3.5.1
EVENTOSENJAVASCRIPT EJERCICIO29
Propagacindeeventos(2)
Analizarcmosepropagaeleventoclick asociandounaalertadiciendodnde sehapulsadoalosmanejadoresonclick delcuerpo,losdosprrafosylos elementosnegritaycursivadelasiguientepginaweb.
APLICACIONESWEB
10
ndice:Tema3.5
3.5
3.5.2
MANEJADORESDEEVENTOS
Manejadoresdeeventos
Cadaeventosedisparacuandosedalacondicinasociadayseproducesobreun determinadoobjeto.
LoscomponentesdelapginawebdescritosensuarchivocomoelementosHTML tienenasociadounobjetoJavaScript durantelavisualizacindelapgina.
ParaqueelobjetodeunelementoHTMLreaccioneaundeterminadoeventoque seproduzcasobrel,hayqueasociaralcorrespondientemanejadorelscript adecuado.Estosepuedehacerdediferentesformas:
Comoatributos:CdigoJavaScript dentrodeunatributodelpropioelementoHTML.El cdigotambinsepuedeubicarenunafuncinexternayproporcionarsunombrecomo atributo. atributo
Manejadoressemnticos:AsignadosmedianteelDOMsinnecesidaddemodificarel g HTMLdelap pgina. g cdigo
APLICACIONESWEB
12
3.5
3.5.2
Manejadorescomoatributos(1)
Laformamssencilladeincluirunmanejadordeeventoesmedianteunatributo HTMLconelmismonombredelmanejadordeleventoquesequiereprocesar.
Elcontenidodelatributoesunacadenadetextoquecontienetodaslas instruccionesJavaScript queseejecutancuandoseproduceelevento.

<input type="button" value="Botn" onclick="alert('Hiciste click')" />
Cuandoelcdigodelafuncinmanejadoraesmscomplejo,esaconsejable agrupartodoelcdigoJavaScript enunafuncinexterna:

<script> function myfunc() { alert('Hiciste l t('Hi i t click'); li k') } </script> <input type="button" value="Botn" onclick="myfunc()" />
APLICACIONESWEB
13
3.5
3.5.2
EnloseventosdeJavaScript,sepuedeutilizarlapalabrareservadathis para referirsealelementoHTMLsobreelqueseestejecutandoelevento:

<div id="micaja" style="width:200px; height:200px; background-color:black" onmouseover = "document.getElementById('micaja').style.backgroundColor='red'" onmouseout </div> = "document.getElementById('micaja').style.backgroundColor='black'">
Medianteelusodethis,estecdigopuedereescribirsesinnecesidaddeutilizarlas f i funciones d del lDOMparaacceder d al lobjeto bj t correspondiente: di t

<div id="micaja" style="width:90px; height:90px; background-color:black" onmouseover = "this.style.backgroundColor "thi t l b k dC l = 'red'" ' d'" onmouseout </div> = "this.style.backgroundColor = 'black'">
APLICACIONESWEB
14
3.5
3.5.2
Enlasfuncionesexternasnoesposibleutilizarlavariablethis directamente,porlo quehayquepasarlacomoparmetroalafuncinmanejadora:

function funCaja(objmicaja) { switch(objmicaja.style.backgroundColor) { case 'black': case 'rgb(0,0,0)': case '#000000': objmicaja.style.backgroundColor = 'red'; break; case (('red')||('rgb(255,0,0)')||('#FF0000')): objmicaja.style.backgroundColor = 'black'; break; default: alert("El color inicial no es no rojo ni negro"); } } <div id="micaja" style="width:200px; height:200px; background-color:black" onmouseover = "funCaja(this)" onmouseout </div> = "funCaja(this)">
APLICACIONESWEB
15
3.5
3.5.2
MANEJADORESDEEVENTOS EJERCICIO30
Probarelcdigodelejemploanterior:
APLICACIONESWEB
16
3.5
3.5.2
Manejadoressemnticos(1)
Aligualqueserecomiendasepararloscontenidos(XHTML)delapresentacin (CSS),tambinserecomiendasepararloscontenidosdelaprogramacin(JS).
MezclarJavaScript yXHTMLcomplicaexcesivamenteelcdigofuentedelapgina, dificultasumantenimientoyreducelasemnticadeldocumentofinalproducido.
Afortunadamente,existeunmtodoalternativoparadefinirlosmanejadoresde eventosdeJavaScript sinusaratributos:losmanejadoressemnticos.
Estatcnicaconsisteenasignarlasfuncionesexternas,quecontienenelcdigoa ejecutar,alosmanejadoresdeeventoscorrespondientesmediantelas propiedadesDOMdeloselementosXHTML.Paraello:

SecreaunafuncindeJavaScript encargadademanejareleventocorrespondiente. SeasignaunidentificadornicoalelementoHTMLencuestinmedianteelatributoid. SeasignalafuncinauneventoconcretodelelementoHTMLmedianteDOM.

TEMA3:PROGRAMACINENELLADODELCLIENTE 17
APLICACIONESWEB
3.5
3.5.2
Debetenerseencuentaqueparaasignarlosmanejadoresdeeventosmediante lasfuncionesDOM,esnecesarioquelapginasehayacargadoporcompletopara queelDOMsehayacreadoantesdeaccederadichasfunciones.
Unadelasformasmssencillasdeasegurarqueciertocdigosevaaejecutar despusdequelapginasecargueporcompletoesutilizareleventoload del objeto bj window i d .As, A el lejemplo j l de d la l transparencia i 13, 13 quedara: d
<script> function myfunc() y () { alert("Hiciste click"); } window.onload = function() { document.getElementById("miboton").onclick = myfunc; } </script> <input id="miboton" type="button" value="Botn" />
APLICACIONESWEB
18
3.5
3.5.2
Ntenseunpardedetallesenelejemploanterior:
Laasignacinaleventoload delobjetowindow detodaslasinstruccionesquese quierenejecutartraslacargadelapginasehacemedianteunafuncinannima.
Laasignacindelafuncinmanejadora(myfunc)almanejadoronclick delelemento encuestinsehacesinincluirlosparntesis:
Ntesequeesunaasignacindelafuncinmyfunc almanejadorynounallamada alamisma.
Siseincluyesenlosparntesisendichaasignacinnoestaramosasignadodicha funcinalmanejadoronclick,sinoelresultadodeejecutarlafuncinmyfunc.
Veremosmsadelantecomosepuedenpasarargumentosalafuncin manejadora(encasodequelosnecesite)utilizandomanejadoressemnticos (objetoevent). )
APLICACIONESWEB
19
3.5
3.5.2
Probarelcdigodelejemplodelatransparencia18yverquefunciona correctamente.Adicionalmente,verqueocurresisetratadeaccederaDOM antesdecargarlapgina,osiseasignamyfunc utilizandomyfunc().
APLICACIONESWEB
20
3.5
3.5.2
Paraterminarconlosmanejadoressemnticos,veamoscmosepuedenasignar variasfuncionesmanejadorasaunmismomanejadordeeventos.
LaespecificacinDOMdefinelosmtodosaddEventListener() y removeEventListener() paraasociarydesasociarmanejadoresdeeventos.
Losmtodosrequierentresparmetros:

Elnombreentrecomillasdeleventoquesequieremanejar. Unareferenciaalafuncinencargadadeprocesarelevento. Sieltercerparmetroestrue,elmanejadorseempleaenelmodelodepropagacinde eventosdescendente(capturing),siesfalse enelascendente(bubbling).
EnversionesanterioresaIE9seempleanlosmtodosattachEvent() y detachEvent(),endondenoexisteeltercerparmetroyelprimeroesel manejadordeleventoencuestin.
APLICACIONESWEB
21
3.5
3.5.2
Ahora,elcdigodellatransparencia18sepuedereescribirparaasignardos funcionesmanejadorasaleventoclick delbotncomo:

<script> function myfunc1() { alert('Hiciste click - manejador 1'); } function myfunc2() { alert('Hiciste click - manejador 2'); } window.onload = function() { var objmiboton=document.getElementById("miboton") bj ib t d t tEl tB Id(" ib t ") objmiboton.addEventListener("click",myfunc1,false); objmiboton.addEventListener("click",myfunc2,false); // objmiboton.removeEventListener("click",myfunc2,false); para desasociar } </script> <input id="miboton" type="button" value="Botn" />
APLICACIONESWEB
22
3.5
3.5.2
Modificarelcdigodelejemploanteriorparaquefuncioneentodoslos navegadores:
APLICACIONESWEB
23
ndice:Tema3.5
3.5
3.5.3
ELOBJETOEVENT
Elobjetoevent
Enocasiones,cuandoseproduceunevento,noessuficienteconasignarleal manejadorcorrespondientelafuncinresponsabledeprocesareseevento.
Enestoscasos,lafuncinqueprocesaeleventonecesitainformacinrelativaal eventoproducido:
Lateclaquesehapulsado,laposicindelratn(coordenadasenpantalla)oelelemento quehaproducidoelevento.
Elobjetoevent eselmecanismodefinidoporlosnavegadoresparaproporcionar todaesainformacin.
Setratadeunobjetoquesecreaautomticamentecuandoseproduceunevento yquesedestruyedeformaautomticacuandosehanejecutadotodaslas funcionesasignadasalevento.
APLICACIONESWEB
25
3.5
3.5.3
ELOBJETOEVENT
Accesoalobjetoevent deunelemento
InternetExplorerpermiteelaccesoalobjetoevent atravsdelobjetowindow. As,dentrodelafuncinencargadadeprocesareleventosepuedeaccederal objetoevent mediante:

function funProcesadora() { var objevent = window.event; }
EnelestndarDOMelobjetoevent eselnicoparmetroquesedebepasara lasfuncionesencargadasdeprocesarloseventos.As,elaccesoalobjetoevent sepuedehacerdedosformasdiferentes:

function funProcesadora() { var objevent = arguments[0]; } function myfunc(objevent) { }
APLICACIONESWEB
26
3.5
3.5.3
ELOBJETOEVENT
Propiedadesdelobjetoevent enIE(1)
Lasiguientetablarecogelaspropiedadesdefinidasparaelobjetoevent enlos navegadoresdelafamiliaInternetExplorer.
Todaslaspropiedadessalvorepeat sondelectura/escriturayportanto,suvalor sepuedeleery/oestablecer.
APLICACIONESWEB
27
3.5
3.5.3
ELOBJETOEVENT
APLICACIONESWEB
28
3.5
3.5.3
ELOBJETOEVENT
APLICACIONESWEB
29
3.5
3.5.3
ELOBJETOEVENT
Propiedadesdelobjetoevent enDOM(1)
Lasiguientetablarecogelaspropiedadesdefinidasparaelobjetoevent enlos navegadoresquesiguenlosestndaresDOM.
AlcontrariodeloquesucedeconInternetExplorer,lamayoradepropiedadesdel objetoevent deDOMsondeslolectura.Enconcreto,solamentelassiguientes propiedadessondelecturayescritura:altKey,button ykeyCode.
APLICACIONESWEB
30
3.5
3.5.3
ELOBJETOEVENT
APLICACIONESWEB
31
3.5
3.5.3
ELOBJETOEVENT
APLICACIONESWEB
32
3.5
3.5.3
ELOBJETOEVENT EJERCICIO33
Accediendoalobjetoevent
RepetirelEjercicio30utilizandomanejadoressemnticos(IEyDOM):
APLICACIONESWEB
33
ndice:Tema3.5
3.5
3.5.4
TIPOSDEEVENTOS
Tiposdeeventos
Lalistacompletadeeventosquesepuedengenerarenunnavegadorsepuede dividirencuatrograndesgrupos:
Eventosderatn:seoriginancuandoelusuarioempleaelratnpararealizaralgunas acciones.
Eventosdeteclado:seoriginancuandoelusuariopulsasobrecualquiertecladesu teclado.
EventosHTML:seoriginancuandoseproducencambiosenlaventanadelnavegadoro cuandoseproducenciertasinteraccionesentreelclienteyelservidor. servidor
EventosDOM:seoriginancuandoseproduceuncambioenlaestructuraDOMdela pgina. pg a.Tambin a b sedenominan de o a "eventos e e tosdemutacin". utac .
APLICACIONESWEB
35
3.5
3.5.4
TIPOSDEEVENTOS
Eventosderatn(1)
Cuandosepulsaunbotndelratn,lasecuenciadeeventosqueseproduceesla siguiente:mousedown,mouseup,click.
Elobjetoevent contienelassiguientespropiedadesparaloseventosderatn:
Lascoordenadasdelratn(todaslascoordenadasdiferentesrelativasalosdistintos elementos) l )
Lapropiedadtype. LapropiedadsrcElement (IE)otarget (DOM). LaspropiedadesshiftKey,ctrlKey,altKey ymetaKey (sloDOM). Lapropiedadbutton (sloenloseventosmousedown,mousemove,mouseout, mouseover ymouseup).
APLICACIONESWEB
36
3.5
3.5.4
TIPOSDEEVENTOS EJERCICIO34
Eventosderatn(2)
Programarlasfuncionesaasociaralosmanejadoresdeeventoscorrespondientes delostresprrafossiguientesparaalternarentremaysculasyminsculasconun dobleclick enel1yarrastrarelcontenidodel2y3yviceversa.
APLICACIONESWEB
37
3.5
3.5.4
TIPOSDEEVENTOS
Eventosdeteclado(1)
Cuandosepulsaunateclacorrespondienteauncarcteralfanumrico,se producelasiguientesecuenciadeeventos:keydown,keypress,keyup.
Cuandosepulsaotrotipodetecla,seproducelasiguientesecuenciadeeventos: keydown,keyup.
Elobjetoevent contienelassiguientespropiedadesparaloseventosdeteclado:

LapropiedadkeyCode. LapropiedadcharCode (sloDOM). LapropiedadsrcElement (IE)otarget (DOM). LaspropiedadesshiftKey,ctrlKey,altKey ymetaKey (sloDOM).
APLICACIONESWEB
38
3.5
3.5.4
TIPOSDEEVENTOS EJERCICIO35
Eventosdeteclado(2)
Programarlasfuncionesaasociaralosmanejadoresdeeventoscorrespondientes delcuerpodeldocumentoparacambiarelcolordefondodelmismoenfuncin delapulsacindediferentesteclas.
APLICACIONESWEB
39

AW Tema 3-5 PDF

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

AW Tema 3-5 PDF

Caricato da

Copyright:

Formati disponibili

ndice:Tema3.

LosscriptsdeJavaScript queaparecenenlaspginaswebsepuedenejecutarde dosformas:

Enelprimermtodoelcdigoseubicadentrodelaetiquetascriptsinestar asociado i d aningn i evento( (Ejercicio j i i 1). )

Vamosaanalizaraquconmsdetenimientoestesegundomtododeejecucin decdigo: ocurrenciadeeventos.

Aunquetambinpuedenserprovocadosporotrostiposdecambiosenelentorno,como losqueocurrenduranteelprocesamientodeldocumentorecibido(findelacargadel d documento, t abandono b d de d l lapgina, i etc). t )

Cuandotienelugaruneventoseejecutaautomticamenteelscriptasociadoasu manejador (cadaeventotieneasociadounmanejador). manejador)

Pordefectolosmanejadoresdeeventosnotienenscriptsasociados,deformaque noseha hace enadacuando andoseprod producen. en

Somosnosotroslosquetenemosqueasociarscriptsalosmanejadoresdelos eventos t quequeramoscontrolar. t l

Porejemplo,eleventosubmit seproducesobreun<form>,peronoafectaaotras clasesdeobjetoscomo<textarea>,etc

Sinembargo,hayotroseventosquesonrelevantesavarioselementos.Entonces, quocurresiasociamosscriptsalosmismosmanejadoresdeeventodevarios elementosanidados?

Porejemplo,siseasociandistintosmanejadoresaleventoclick delcuerpoydeun prrafodentrodelcuerpo.Quocurrealhacerclick sobreelprrafo?

Respuesta:Pordefecto,loseventossevanpropagandohaciaarribaporla jerarquadecontenidosytodoslosobjetosantecesorestienenlaposibilidadde responderalevento(siemprequesearelevante)hastallegaralobjetoraz. raz

Analizarcmosepropagaeleventoclick asociandounaalertadiciendodnde sehapulsadoalosmanejadoresonclick delcuerpo,losdosprrafosylos elementosnegritaycursivadelasiguientepginaweb.

LoscomponentesdelapginawebdescritosensuarchivocomoelementosHTML tienenasociadounobjetoJavaScript durantelavisualizacindelapgina.

ParaqueelobjetodeunelementoHTMLreaccioneaundeterminadoeventoque seproduzcasobrel,hayqueasociaralcorrespondientemanejadorelscript adecuado.Estosepuedehacerdediferentesformas:

Comoatributos:CdigoJavaScript dentrodeunatributodelpropioelementoHTML.El cdigotambinsepuedeubicarenunafuncinexternayproporcionarsunombrecomo atributo. atributo

Manejadoressemnticos:AsignadosmedianteelDOMsinnecesidaddemodificarel g HTMLdelap pgina. g cdigo

Elcontenidodelatributoesunacadenadetextoquecontienetodaslas instruccionesJavaScript queseejecutancuandoseproduceelevento.

Cuandoelcdigodelafuncinmanejadoraesmscomplejo,esaconsejable agrupartodoelcdigoJavaScript enunafuncinexterna:

EnloseventosdeJavaScript,sepuedeutilizarlapalabrareservadathis para referirsealelementoHTMLsobreelqueseestejecutandoelevento:

Medianteelusodethis,estecdigopuedereescribirsesinnecesidaddeutilizarlas f i funciones d del lDOMparaacceder d al lobjeto bj t correspondiente: di t

Enlasfuncionesexternasnoesposibleutilizarlavariablethis directamente,porlo quehayquepasarlacomoparmetroalafuncinmanejadora:

MezclarJavaScript yXHTMLcomplicaexcesivamenteelcdigofuentedelapgina, dificultasumantenimientoyreducelasemnticadeldocumentofinalproducido.

Afortunadamente,existeunmtodoalternativoparadefinirlosmanejadoresde eventosdeJavaScript sinusaratributos:losmanejadoressemnticos.

Estatcnicaconsisteenasignarlasfuncionesexternas,quecontienenelcdigoa ejecutar,alosmanejadoresdeeventoscorrespondientesmediantelas propiedadesDOMdeloselementosXHTML.Paraello:

SecreaunafuncindeJavaScript encargadademanejareleventocorrespondiente. SeasignaunidentificadornicoalelementoHTMLencuestinmedianteelatributoid. SeasignalafuncinauneventoconcretodelelementoHTMLmedianteDOM.

Debetenerseencuentaqueparaasignarlosmanejadoresdeeventosmediante lasfuncionesDOM,esnecesarioquelapginasehayacargadoporcompletopara queelDOMsehayacreadoantesdeaccederadichasfunciones.

Laasignacinaleventoload delobjetowindow detodaslasinstruccionesquese quierenejecutartraslacargadelapginasehacemedianteunafuncinannima.

Laasignacindelafuncinmanejadora(myfunc)almanejadoronclick delelemento encuestinsehacesinincluirlosparntesis:

Ntesequeesunaasignacindelafuncinmyfunc almanejadorynounallamada alamisma.

Veremosmsadelantecomosepuedenpasarargumentosalafuncin manejadora(encasodequelosnecesite)utilizandomanejadoressemnticos (objetoevent). )

Probarelcdigodelejemplodelatransparencia18yverquefunciona correctamente.Adicionalmente,verqueocurresisetratadeaccederaDOM antesdecargarlapgina,osiseasignamyfunc utilizandomyfunc().

LaespecificacinDOMdefinelosmtodosaddEventListener() y removeEventListener() paraasociarydesasociarmanejadoresdeeventos.

Elnombreentrecomillasdeleventoquesequieremanejar. Unareferenciaalafuncinencargadadeprocesarelevento. Sieltercerparmetroestrue,elmanejadorseempleaenelmodelodepropagacinde eventosdescendente(capturing),siesfalse enelascendente(bubbling).

EnversionesanterioresaIE9seempleanlosmtodosattachEvent() y detachEvent(),endondenoexisteeltercerparmetroyelprimeroesel manejadordeleventoencuestin.

Ahora,elcdigodellatransparencia18sepuedereescribirparaasignardos funcionesmanejadorasaleventoclick delbotncomo:

Elobjetoevent eselmecanismodefinidoporlosnavegadoresparaproporcionar todaesainformacin.

Setratadeunobjetoquesecreaautomticamentecuandoseproduceunevento yquesedestruyedeformaautomticacuandosehanejecutadotodaslas funcionesasignadasalevento.

InternetExplorerpermiteelaccesoalobjetoevent atravsdelobjetowindow. As,dentrodelafuncinencargadadeprocesareleventosepuedeaccederal objetoevent mediante:

EnelestndarDOMelobjetoevent eselnicoparmetroquesedebepasara lasfuncionesencargadasdeprocesarloseventos.As,elaccesoalobjetoevent sepuedehacerdedosformasdiferentes:

Lasiguientetablarecogelaspropiedadesdefinidasparaelobjetoevent enlos navegadoresdelafamiliaInternetExplorer.

Todaslaspropiedadessalvorepeat sondelectura/escriturayportanto,suvalor sepuedeleery/oestablecer.

Lasiguientetablarecogelaspropiedadesdefinidasparaelobjetoevent enlos navegadoresquesiguenlosestndaresDOM.

AlcontrariodeloquesucedeconInternetExplorer,lamayoradepropiedadesdel objetoevent deDOMsondeslolectura.Enconcreto,solamentelassiguientes propiedadessondelecturayescritura:altKey,button ykeyCode.

EventosHTML:seoriginancuandoseproducencambiosenlaventanadelnavegadoro cuandoseproducenciertasinteraccionesentreelclienteyelservidor. servidor

EventosDOM:seoriginancuandoseproduceuncambioenlaestructuraDOMdela pgina. pg a.Tambin a b sedenominan de o a "eventos e e tosdemutacin". utac .

Programarlasfuncionesaasociaralosmanejadoresdeeventoscorrespondientes delostresprrafossiguientesparaalternarentremaysculasyminsculasconun dobleclick enel1yarrastrarelcontenidodel2y3yviceversa.

LapropiedadkeyCode. LapropiedadcharCode (sloDOM). LapropiedadsrcElement (IE)otarget (DOM). LaspropiedadesshiftKey,ctrlKey,altKey ymetaKey (sloDOM).

Programarlasfuncionesaasociaralosmanejadoresdeeventoscorrespondientes delcuerpodeldocumentoparacambiarelcolordefondodelmismoenfuncin delapulsacindediferentesteclas.

Potrebbero piacerti anche