JS event

Usually a mouse or hotkeys action we call events (Event)

By JS event, we can complete the assigned special effects page.

A, JS brief event-driven mechanism

The police catch the thief

Event Source thief

Event stealing

Listeners police

Register / binding listener police staring thief

Event Source: specially produced component events.

Event: theEvents generated by the sourceAction or thing.

Listener: special handling events generated by the sourceevent。

Register / binding listener: let the listener time to listenEvent SourceIs there a specified event occurs, if the event source generates the specified event, call the listener process

Second, the common JS event

1. Click on the event (onclock)

When click the trigger element assembly by a mouse or hotkeys

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

2, the focus of the event

a, get focus events (onfocus)

Focus: focus the whole page

The default maximum of one page a normal focus

For example: flashing text box small vertical line

Get focus events: Fires when the element component gets focus

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

b, lost focus event (nobler)

When triggered loses focus

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

3, the field contents change events (onchange)

Element assemblyChange in valueTrigger

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

4, loaded event (onload)

When the assembly is loaded trigger element

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

5, a form is submitted (on submit)

FormsSubmit button is clickedtrigger

Checking for the form - form submission control

allow true form submission

false preventing form submission


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

6, keys up events (onkeyup)

When something in the input assembly, the keyboard keysWhen the bounceFires

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

7, common mouse events

a, move the mouse event (onmouseover)

Mouse moved event: when the mouse into a trigger element assembly

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

b, mouse out events (onmouseout)

Mouse out events: an element when the mouse out of the trigger assembly

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

Third, the two binding way JS events

1, binding element event handlers

The event is written in the manner of element attributes inside the tag, and then bind the corresponding function

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

advantage:

Develop fast

Convenient parameter passing

You can bind multiple functions

Disadvantages:

JS and HTML height blend together, is not conducive to developing and maintaining multi-sectoral project

2, DOM bindings way

Use DOM attribute way binding properties

<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"/>