HTML鼠标键盘事件和对象

最新推荐文章于 2022-08-31 10:26:47 发布

Tw368WJZ

最新推荐文章于 2022-08-31 10:26:47 发布

阅读量523

点赞数

分类专栏： html 函数元素事件对象

本文链接：https://blog.csdn.net/Tw368WJZ/article/details/79574766

版权

html 同时被 3 个专栏收录

14 篇文章 0 订阅

订阅专栏

函数

5 篇文章 0 订阅

订阅专栏

元素

3 篇文章 0 订阅

订阅专栏

HTML鼠标键盘事件和对象

1.事件

1.onclick--单击事件
2.ondblclick--双击事件
3.onmousedown--鼠标按下事件
4.onmouseup----鼠标抬起事件
5.onmousemove--鼠标移动事件
6.oncontextmenu--鼠标右击事件
7.onmouseover---鼠标移入事件
8.onmouseout----鼠标移出事件
9.onmouseenter---鼠标移入
10.onmouseleave---鼠标移除
11.onkeypress ----键盘按下
12.onkeydown-----键盘按下
13.onkeyup-------键盘抬起事件
14.onchange-------填入的位置选区发生变化后触发
15.oninput-----input内容发生变化触发
16.onfocus------聚焦
17.onblur ------失焦
18.onsubmit----提交
19.onreset------重置
20.window.onresize--窗口尺寸发生改变触发
21.window.onscroll--窗口内容滚动的时候触发
22.window.onload---窗口加载完毕之后触发

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>事件名称</title>
    <style type="text/css">
        .redDiv{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
<div class="redDiv"></div>
<form action="redDiv" id="reg">
    <input type="text" name="" id="uName">
    <input type="submit" name="" id="submit">
    <input type="reset" name="" id="reset">
</form>
</body>
<script type="text/javascript">


    var redDiv = document.getElementsByClassName('redDiv')[0];
    var reg = document.getElementById('reg');
    var uName = document.getElementById('uName');
    redDiv.onclick = function() {
        console.log("单击事件");
    }
    redDiv.ondblclick = function(){
        console.log("双击事件");
    }
    redDiv.onmousedown = function(){
        console.log("鼠标按下事件")
    }
    redDiv.onmouseup = function(){
        console.log("鼠标抬起事件")
    }
    redDiv.onmousemove = function(){
        console.log("鼠标移动的时候触发");
    }
    redDiv.oncontextmenu = function(){

        return  false;阻止默认事件    //     右击失败
        console.log("鼠标右击事件");
        //console.log("鼠标右击事件");
    }
    // over和out 会在鼠标从redDiv的父级移到子级的时候触发.先触发out 再触发Over
    // leave和enter从父级移到子级不会触发
    redDiv.onmouseover = function(){
        console.log("over鼠标移入");
    }
    redDiv.onmouseout = function(){
        console.log("out鼠标移出");
    }
    redDiv.onmouseenter = function(){
         console.log("鼠标移入");
    }
    redDiv.onmouseleave = function(){
        console.log("鼠标移出");
    }
    // 键盘事件
    document.onkeydown = function(){
        console.log("down键盘按下");
    }
    document.onkeypress = function(){
        console.log("press键盘按下");
    }
    document.onkeyup = function(){
        console.log("键盘抬起事件");
    }
    uName.onchange = function(){

        console.log("change内容选区位置发生改变之后触发");
    }
    uName.oninput = function(){
        console.log("input内容改变之后触发");
    }
    uName.onfocus = function(){
        console.log("聚焦");
    }
    uName.onblur = function(){
        console.log("失焦");
    }
    //给form表单绑定事件
    reg.onsubmit = function(){
        console.log("提交");
    }
    reg.onreset = function(){
        console.log("重置");
    }
    //window事件
    window.onresize = function(){
        console.log("窗口尺寸发生变化的时候触发");
    }
    window.onscroll = function(){
        console.log("窗口内容滚动的时候触发");
    }
    window.onload = function(){
        console.log("窗口加载完毕之后触发");
    }

</script>
</html>

2.对象

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>事件对象</title>
    <style type="text/css">
        .redDiv{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        p{

            height: 100px;
            margin-left: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="redDiv">
    <p></p>
</div>
</body>
<script type="text/javascript">
    var redDiv = document.getElementsByClassName('redDiv')[0];
    redDiv.onclick = function (ev) {
        // console.log(5 || 10);短路

        var evObj = window.event || ev ;
        // 触发事件元素(触发事件的元素不一定是绑定事件元素)
        // console.log(window.event);
        console.log(evObj.target);
        //鼠标距离窗口顶部的坐标
        console.log(evObj.clientY);
        //鼠标距离页面顶部坐标
        console.log(evObj.pageY);
        // 窗口距离target的顶部坐标
        console.log(evObj.offsetY);
    }
    // press区分大小写,但不支持特殊按键
    // down 不区分大小写,但支持特殊按键
    document.onkeypress = function(ev){
        console.log("press" + ev.keyCode);
    }
    document.onkeydown = function(ev){
        // keyCode标识哪一个按键
         console.log(ev.keyCode);
         if (ev.keyCode == 66 ) {
            console.log("按了 B");
         }
         if (ev.keyCode == 66 && ev.metaKey ) {
            console.log("按了 command + B");
         }
    }
</script>
</html>