js事件类型-绑定事件

<script type="text/javascript">
    //整个页面窗口加载完成之后（所有标签加载完成）
    window.onload = function(){
        //防止  js在前，标签在后的情况，js执行 时 标签没有加载完成
        // alert(‘我加载完啦‘);
        // 
    }
</script>

<script>
    var d = document.getElementById(‘d‘);

    // mouseenter   mouseleave  不区分子元素（鼠标从父元素移动到子元素，不触发）
        d.onmouseenter = function(){
            console.log(‘enter‘);
        }
        d.onmouseleave = function(){
            console.log(‘leave‘);
        }
    //当鼠标悬浮时触发
    d.onmouseover = function(){
        console.log(‘来了?‘);
    }
    //当鼠标离开时触发
        d.onmouseout = function(){
            console.log(‘不要啊‘);
        }
    //当鼠标按下时触发
        d.onmousedown = function(){
            console.log(‘用力啊‘);            
        }
    //当鼠标弹起时触发
        d.onmouseup = function(){
            console.log(‘再来‘);            
        }
    //当鼠标移动时触发
        d.onmousemove = function(){
            console.log(‘别乱动‘);            
        }
        
        //当点击右键时
        d.oncontextmenu = function(){
            console.log(‘你想干什么？‘);
            return false;//不让菜单出来
        }
        
        // 当复制内容时
        d.oncopy = function(){
            console.log(‘你敢复制我？‘);
            return false;
        }
    
</script>

    <input id="demo" type="text" value="">
    

    <script>
    
        var k = document.getElementById(‘demo‘);
    
        k.onkeydown = function(){
            console.log(‘键盘被按下时触发‘);
        }

        k.onkeypress = function(){
            console.log(‘键盘被按下时触发，晚于down‘);
        }
 
        k.onkeyup = function(){
            console.log(‘键盘被松开触发‘);
        }

    </script>

<input type="text" id="t" value="">
<script>
    var d = document.getElementById(‘t‘);
    //当内容改变且失去焦点时触发
    d.onchange = function(){
        console.log(‘内容改变了且失去焦点触发‘);
    }
    //当内容改变时触发
    d.oninput = function(){
        console.log(‘内容改变时触发‘);
    }

    //更多看手册
</script>

<script type="text/javascript">
    //绑定事件思路&步骤
    //1.找标签 
    var d = document.getElementById(‘t‘);
    //2.绑定事件  标签.on事件名称 = 函数
    d.onchange = function(){
        //3.具体的处理 --触发事件后要做的事情
    }
</script>