Tag Archive for boton

Eventos en Javascript (onclick, onload, onmouseover,onmouseout)

Hola estimados lectores y bienvenidos a este tutorial, los eventos en JavaScript basicamente son una de las propiedades que nos acercan mas a crear páginas web totalmente dinamicas, esto se debe a que cuando hablamos de un evento, quiere decir que al “ocurrir una acción” en nuestro sitio web, nosotros podemos disparar una secuencia de codigo, a esto se le llama evento.

Ejemplos de eventos pueden ser dar click a un boton, poner el mouse sobre un elemento del nuestro sitio, o incluso cargar el que la página web se haya cargado completamente, los siguientes son algunos de los eventos mas comunes en javascript.

El evento onclick:

Se ejecuta cuando damos click a un elemento del DOM en nuestro sitio, no necesariamente este debe ser un boton, puede ser un <div> u otro tag de html. Para incorporarlo en HTML basta con utilizar el atributo “onclick” en un elemento HTML y especificar el codigo o funcion de javascript a ejecutar.

Ej:

<button value="esto es un boton" onclick="mi_funcion()"/>

Los eventos onmouseover y onmouseout:

Al diferencia de “onclick”, este evento se lanza cuando pasamos el mouse(puntero) sobre un elemento del html, para especificar gatillo de este evento en un elemento del DOM debe usarse el atributo “onmouseover”, respectivamente “onmouseout” se dispara cuando el puntero sale del area de un elemento del DOM.

Ej:

<div id="contenedor" onmouseover="alert('entraste en el area del contenedor')" onmouseout="alert('haz salido del area del contenedor')"/>

 

El evento onload:

Este evento se ejecuta cuando el DOM, es decir todos los elementos html del sitio web han sido cargados correctamente en el cliente, se usa mucho para asegurar la ejecución de codigo cuando se es necesario que la página este completamente cargada para la ejecución correcta de nuestros programas en javascript. Lo ideal es colocarlo unicamente en el tag “<body>” de nuestros sitios web.

Ej:

<body onload="mi_funcion()">
<!-- codigo html -->
</body>

 

 

Codigo de practica con eventos onclick, onload, onmouseover, onmouseout

<!DOCTYPE html>
<html>
	<head>
	<script type="text/javascript">
	//EVENTOS EN javascript

	function hacer_click()
	{
		alert("Me haz dado un click");
	}

	function hacer_hover()
	{
		alert("Estas sobre mi!");
	}

	function salir_del_hover()
	{
		alert("Adios!");
	}

	function cargar_pagina()
	{alert("Ya se ha cargado el sitio web");}
	</script>
	</head>

	<body onload="cargar_pagina()">
		<form>
			<input type="button" value="dame click!"  onmouseout="salir_del_hover()" onmouseover="hacer_hover()" onclick="hacer_click()"/>
		</form>
	</body>

</html>

 Video tutorial de eventos en Javascript:

Tutorial android 7: Eventos, OnClickListener para implementar un escuchador de eventos en un Boton

Tutorial Android: eventos con OnClickListener implementado en un boton

Los eventos los encontramos en muchos lenguajes de programación, para ello en Android tenemos disponibles un gran numero distinto de eventos que podemos tener, desde el touch o clicks, hasta eventos generados por movimientos en un accelerometro, termometro u otros sensores de los dispositivos Android.

En el siguiente video podras encontrar como poder implementar uno de los eventos mas simples, el OnClickListener, para escuchar eventos de clicks realizados sobre un boton.

Videotutorial:

Codigo de apoyo:

package com.practicaOnclick;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.TextView;

public class PracticaOnClickListenerActivity extends Activity implements OnClickListener{
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        View boton = findViewById(R.id.botonID); 
        boton.setOnClickListener(this);
    }

	@Override
	public void onClick(View v) {
		if(v.getId()==findViewById(R.id.botonID).getId())
		{
			TextView texto = (TextView)findViewById(R.id.textoID);
			texto.setText("Hola que tal, haz oprimido el boton");
		}
		
	}
}

XML del archivo main.xml(Layout)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textoID"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello" />

    <Button
        android:id="@+id/botonID"
        android:layout_width="164dp"
        android:layout_height="wrap_content"
        android:text="Button" />

</LinearLayout>