evento JS

Por lo general, una acción de ratón o teclas de acceso rápido que llamamos eventos (Event)

Por caso JS, podemos completar la página de efectos especiales asignado.

A, JS breve mecanismo orientado a eventos

La policía atrapar al ladrón

Origen del suceso ladrón

robo evento

Los oyentes de la policía

Registro / oyente vinculante ladrón de miradas de la policía

Origen del suceso: eventos de componente especialmente producidos.

Evento: laLos eventos generados por la fuenteAcción o cosa.

Oyente: eventos especiales de manipulación generados por la fuenteevento.

Registro / oyente vinculante: dejar que el tiempo de escucha para escucharOrigen del suceso¿Hay ocurre un evento especificado, si el origen de evento genera el evento especificado, llame al proceso de escucha

En segundo lugar, el evento común JS

1. Haga clic en el evento (onclock)

Cuando haga clic en el elemento desencadenante de montaje por un ratón o teclas de acceso rápido

<script>
    function run1(){
        alert("弹出")
    }
</script>
<body>
    <input type="text" value = "点击“ οnclick="run1()"/>
</body>

2, el enfoque del evento

una, obtener eventos de foco (onfocus)

Enfoque: enfocar toda la página

El máximo predeterminado de una página de un enfoque normal

Por ejemplo: parpadeo pequeño cuadro de texto línea vertical

Recibe eventos de foco: Se activa cuando la componente de elemento obtiene el foco

<script>
    function run1(){
        alert("获取焦点了")
    }
</script>
<body>
    <input type="text" onfocus="run1()"/>
</body>

b, perdió evento de foco (noble)

Cuando se dispara pierde el foco

<script>
    function run1(){
        alert("失去焦点了")
    }
</script>
<body>
    <input type="text" onblur="run1()"/>
</body>

3, los eventos de cambio de contenido del campo (onchange)

conjunto de elementosCambio en el valorgatillo

<select onchange="run1()">
    <option value="bj">北京</option>
    <option value="sh">上海</option>
    <option value="gz">广州</option>
</select>

4, evento cargado (proceso de carga)

Cuando el conjunto es elemento de gatillo cargado

<body onload="run1()">
    
</body>

5, se envía un formulario (en el presente)

formasse hace clic en botón de envíogatillo

Comprobación de la forma - el control de formulario de envío

permitir cierto envío del formulario

falsa presentación forma que impida


<script>
	function run1(){
        ....;
        return true;
    }
</script>
<form onsubmit="return run1()">		
    <input type="text" name="uname" /></form><br />
    
    <input type="submit" value="提交" />
</form>

6, teclas arriba eventos (onkeyup)

Cuando algo en el conjunto de entrada, las teclas del tecladoCuando el reboteincendios

<input type="text" onkeyup="run1()"/>

7, eventos de ratón común

a, mover el evento de ratón (onmouseover)

Ratón movido evento: cuando el ratón en un elemento de gatillo conjunto

<input type="text" onmouseover="run1()"/>

b, ratón cabo eventos (onmouseout)

Ratón fuera eventos: un elemento cuando el cabo del ratón del gatillo conjunto

<input type="text" onmouseout="run1()"/>

En tercer lugar, la unión de dos vías JS eventos

1, elemento de unión controladores de eventos

El evento está escrito en la forma de atributos de los elementos dentro de la etiqueta, y luego se unen la función correspondiente

<input type="text" onmouseout="run1()"/>
//传这个文本框对象
<input type="text" onmouseout="run1(this)"/>
//绑定多个事件,绑定顺序就是执行顺序
<input type="text" onmouseout="run1(),run2(),run3()"/>

ventajas:

desarrollar rápida

el paso de parámetros conveniente

Puede enlazar múltiples funciones

desventajas:

JS y HTML junto mezcla altura, no es propicio para el desarrollo y mantenimiento del proyecto multisectorial

2, forma DOM fijaciones

Uso de DOM atributo propiedades de unión a modo

<script>
	window.onload=run1;		//一次绑定一个函数，不能传参
    window.onload=function(){	//匿名函数，可以绑定多个参数，可以传递参数
        run1();
        run2();
        run3();
    };
</script>

<script>
	function run1(){
        
    }
    function run2(){
        
    }
    window.onload=function(){
        //使用DOM方式获取到元素对象
        var t1 = document.getElementById("t1");
        //改变这个元素的属性
        ti.onclick=function(){
            run1();
            run2();
        }
    }
</script>

<input type="text" id="t1"/>