JS中的事件

80 阅读1分钟

鼠标事件

<h1 style="background-color: bisque;">点我一下</h1>
<script>
    let h1 = document.querySelector('h1');
    /* 鼠标双击 */
    // h1.ondblclick = function(){
    //     alert('我双击了')
    // }
    // h1.addEventListener('dblclick',function(){
    //     alert('我双击了')
    // })
    /* 鼠标在指定的区域内移动事件 */
    // h1.onmousemove = function (){
    //     console.log('我移动了');
    // }
    // h1.addEventListener('mousemove',function(){
    //     console.log('我移动了');
    // })
    
    
        用户名:<input type="text" id="t">
<script>
    let t = document.getElementById('t');

    t.onkeydown = function (e){
        /* 兼容写法 */
        let eobj = e||event;
        /* 事件源对象 */
        console.log(eobj);
        if(eobj.keyCode == 13){
            // alert(this.value)
            alert(eobj.target.value)
        }
    }
    /* 在输入框中输入 字符 按下回车的时候 把输入的字 alert出来 */

键盘事件

    /* 键盘按下的时候触发 */
    // t.onkeydown = function (){
    //     console.log('键盘我按下了');
    // }
    // /* 连续敲击的时候触发 */
    // t.onkeypress = function (){
    //     console.log('连续按下键盘并抬起的时候触发');
    // }
    // /* 键盘抬起的时候触发 */
    // t.onkeyup = function (){
    //     console.log('键盘我抬起了');
    // }
    /* 顺序 onkeydown > onkeypress > onkeyup */
</script>