Event --JavaScript

Events Overview

JavaScript gives us the ability to create dynamic pages, and JavaScript events can be detected behavior.

Simple to understand: --- trigger response mechanism.

网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个 事件，然后去执行某些操作。

Event three elements

Element that triggered the event: event source (who)
Event type (what event): for example, click click event
Event handler (Zuosha): Code (functional form) to be executed after the triggering event, the event handler

Case Code

<body>
    <button id="btn">唐伯虎</button>
    <script>
        // 点击一个按钮，弹出对话框
        // 1. 事件是有三部分组成  事件源  事件类型  事件处理程序   我们也称为事件三要素
        //(1) 事件源 事件被触发的对象   谁  按钮
        var btn = document.getElementById('btn');
        //(2) 事件类型  如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
        //(3) 事件处理程序  通过一个函数赋值的方式 完成
        btn.onclick = function() {
            alert('点秋香');
        }
    </script>
</body>

Step 3 events

1, access to the event source
2, registration event (binding event)
3, add an event handler (take the function assignment form)

Example:

<body>
    <div>123</div>
    <script>
        // 执行事件步骤
        // 点击div 控制台输出 我被选中了
        // 1. 获取事件源
        var div = document.querySelector('div');
        // 2.绑定事件 注册事件
        // div.onclick 
        // 3.添加事件处理程序 
        div.onclick = function() {
            console.log('我被选中了');
        }
    </script>
</body>

4 common mouse events

 鼠标事件         触发条件  
onclick     鼠标点击左键触发

onmouseover rollover trigger
onmouseout mouse leaves the trigger
onfocus get the mouse focus trigger
onblur loses focus using the mouse
onmouseup mouse up trigger
onmousemove mouse movements trigger
onmousedown mouse to press the trigger

Guess you like