前端基础（二十一、DOM 绑定事件）

我们可以为DOM元素绑定一些事件，当事件发生时，执行对应的代码，常用事件如下：

对鼠标操作

• onclick事件：鼠标左键点击完成时触发
• oncontextmenu事件：鼠标右键点击时触发
  • event.preventDefault()：用来阻止默认行为，如阻止右键点击浏览器出现浏览器默认的菜单

    <div id="div1">
        测试鼠标点击事件
    </div>
    <script>
        var oDiv = document.getElementById("div1");

        oDiv.onclick = function () {
            oDiv.innerText = "鼠标左键点击";
            //oDiv.style.backgroundColor = "lightblue";
        }
        oDiv.oncontextmenu = function(){
            oDiv.innerText = "鼠标右键点击";
            event.preventDefault();//阻止默认行为
        }

    </script>

当分别用左键和右键完成点击结束后：

• onmouseover事件：鼠标移入时触发
• onmouseout 事件：鼠标移出时触发
  • 与 onmouseover事件 是相对应的

        oDiv.onmouseover = function () {
            oDiv.innerText = "鼠标移入";
            oDiv.style.backgroundColor = "lightblue";
        }
        oDiv.onmouseout = function () {
            oDiv.innerText = "鼠标移出";
            oDiv.style.backgroundColor = "lightpink";
        }

当鼠标移入或移出时：

• onmousedown事件：鼠标按下时触发
• onmouseup事件：鼠标抬起时触发
  • 与 onmousedown事件 是相对应的

        oDiv.onmousedown = function () {
            oDiv.innerText = "鼠标按下";
            oDiv.style.backgroundColor = "lightblue";
        }
        oDiv.onmouseup = function () {
            oDiv.innerText = "鼠标抬起";
            oDiv.style.backgroundColor = "lightpink";
        }

• onmousemove事件：鼠标移动时触发

        var i = 0;
        oDiv.onmousemove = function () {
            oDiv.innerText = "鼠标移动" + i + "次";
            oDiv.style.backgroundColor = "lightblue";
            i++;
        }

当鼠标不断移动时：

对键盘操作

• onkeydown：某个键盘按键被按下时触发
  • event.keyCode可以返回键盘码
• onkeyup：某个键盘按键被松开时触发
  • 与 onkeydown 相对应
• onkeypress：某个键盘按键被按下并松开时触发
  • 无法识别功能键（如F1)

    <input type="text">
    <script>
        var oInp = document.getElementsByTagName("input")[0];
        var oDiv = document.getElementById("oDiv");

        oInp.onkeydown = function(e){
            console.log(e.keyCode);
            oInp.style.backgroundColor = "lightblue";
            console.log("onkeydown");
        }
        oInp.onkeyup = function(){
            oInp.style.backgroundColor = "lightpink";
            console.log("onkeyup");
        }
        oInp.onkeypress = function(){
            oInp.style.backgroundColor = "lightsalmon";
            console.log("onkeypress");
        }
    </script>

当按下普通键时：

当按下功能键F2时：

其他

• onfocus：当元素获得焦点时触发
• onblur：当元素失去焦点时触发
  • 与 onfocus 相对应
• onload：当一张页面或一幅图像完成加载时触发
• onselect：当文本被选中时触发
• onsubmit：当提交按钮被点击时触发
  • 该事件仅在<form>表单标签中被支持，因为提交按钮出现在表单元素中

以上为本萌新个人总结，如有不当之处望指正，有问题可以联系
邮箱：yuna_03@163.com或
QQ：2635591841

更于2021.2.17