Resumo do evento JavaScript

Três Elementos de um Evento

1. fonte do evento
2. tipo de evento
3. manipulador de eventos

Origem do evento de ligação de evento de nível 0 do DOM.on + tipo de evento = função de processamento de evento
Desvantagens: não é possível vincular vários eventos do mesmo tipo, e novos eventos gravados posteriormente substituirão os eventos originais

Ligação de evento de nível 2 do DOM (escuta de evento) event source.addEventListener('tipo de evento', manipulador de evento)
1.

<script>
       oDiv.onclick = function () {
      
        //0级点击事件
       console.log('绑定给 div 的第一个事件')
      }
       oDiv.onclick = function () {
      
      
       console.log('绑定给 div 的第二个事件')
</script>
}

<script>
        oDiv.addEventListener('click', function () {
      
        //2级事件绑定(事件监听)
            console.log('绑定给 div 的第一个事件')
        })

        oDiv.addEventListener('click', function () {
      
      
            console.log('绑定给 div 的第二个事件')
        })
</script>

2. Evento do navegador
window.onload = function () {}

<script>
window.onload = function () {
      
      }  //当页面所有资源加载完毕才执行
</script>

3. Eventos do mouse

<script>
       // JS 的鼠标事件

        var oDiv = document.querySelector('div')

        // 1. 左键单击
        oDiv.onclick = function () {
      
      
            console.log('单击元素时触发')
        }

        // 2. 双击事件      300ms 内连续点击两次鼠标
        oDiv.ondblclick = function () {
      
      
            console.log('双击元素时触发')
        }

        // 3. 右键事件      鼠标右键单击
        oDiv.oncontextmenu = function () {
      
      
            console.log('鼠标右键单击时触发')
        }

        // 4. 鼠标按下事件      鼠标左键按下的时候会触发的(哪怕鼠标没有抬起)
        oDiv.onmousedown = function () {
      
      
            console.log('鼠标按下时触发')
        }

        // 5. 鼠标抬起事件      鼠标左键抬起的时候会触发的
        oDiv.onmouseup = function () {
      
      
            console.log('鼠标抬起时触发')
        }

        // 6. 鼠标移入事件      鼠标的移动到元素内部时触发
        oDiv.onmouseover = function () {
      
      
            console.log('onmouseover 鼠标移入时触发')
        }

        // 7. 鼠标移出事件      鼠标移动出元素内部时触发
        oDiv.onmouseout = function () {
      
      
            console.log('onmouseout 鼠标移出时触发')
        }

        // 8. 鼠标移动事件          鼠标在元素内部移动时触发
        oDiv.onmousemove = function () {
      
      
            // console.log('鼠标移动时触发')
        }

        // 9. 鼠标移入事件2
        oDiv.onmouseenter = function () {
      
      
            console.log('onmouseenter 鼠标移入事件2')
        }

        // 10. 鼠标移出事件2
        oDiv.onmouseleave = function () {
      
      
            console.log('onmouseleave 鼠标移出事件2')
        }

        // onmouseover onmouseout 两个方法 移入元素和移入元素子盒子时都会触发
        // onmouseenter onmouseleave 两个方法 只会在移入元素时触发

</script>

4. Evento de teclado
Evento de teclado: documento ou
documento de entrada.on tipo de evento de evento de teclado = função () {}

<script>
       // 1. 键盘抬起事件
        document.onkeyup = function () {
      
      
            console.log('键盘按键抬起')
        }

        // 2. 键盘按下事件
        document.onkeydown = function () {
      
      
            console.log('键盘某个按键被按下')
        }

        // 3. 键盘按下抬起事件
        document.onkeypress = function () {
      
      
            console.log('键盘按下抬起时触发')
</script>

5. Eventos de formulário

 文本框: <input type="text" id="inp">
    <script>
        // 表单事件
        var inp = document.querySelector('#inp')


        // 1. 获得焦点事件
        inp.onfocus = function () {
      
      
            console.log('当前文本框获得焦点')
        }

        // 2. 失去焦点事件
        inp.onblur = function () {
      
      
            console.log('当前文本框失去焦点')
        }

        // 3. 文本框内容改变时触发
        inp.onchange = function () {
      
      
            console.log('当前文本框内容被更改')
        }

        // 4. 文本框输入内容时触发
        inp.oninput = function () {
      
      
            console.log('当前文本框正在输入内容')
        }

    </script>