JavaScript 事件类型

最新推荐文章于 2023-12-01 12:29:51 发布

benxiaohai888

最新推荐文章于 2023-12-01 12:29:51 发布

阅读量519

点赞数

分类专栏： web前端文章标签： JavaScript 事件类型 js键盘事件 js鼠标事件

本文链接：https://blog.csdn.net/benxiaohai888/article/details/78208777

版权

web前端专栏收录该内容

35 篇文章 0 订阅

订阅专栏

JavaScript 事件类型

JavaScript 可以处理的事件类型有很多，常见的有UI事件、焦点事件、鼠标事件、滚轮事件、文本事件、键盘事件。还有专门为触摸设备和移动设备准备的触摸事件、手势事件、屏幕方向改变等。

注：冒泡事件即：事件会从层级高的传递给层级低的。

具体事例解释如下：

1、onload事件
load事件会在页面或图像加载完成立即执行。
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
          //方法1：给window的onload属性设置函数
        window.onload = function () {    // 函数在页面执行完毕之后自动执行。
            alert("页面加载完毕")
        };
    </script>
</head >
<!--方法2： HTML事件处理： 给body 的onload属性直接设置 JavaScript代码， 也可以调用函数-->
<body οnlοad="alert('页面加载完毕！')">
<img src="test.jpg" οnlοad="{alert(' 图像加载完毕！')}">
</body>
</html>

2、onscroll事件

onscroll事件，当滚动条或滚动式触发。事件在window上面触发。由于滚动过程中，会重复多次调用，所以，处理逻辑和代码不能过于复杂，否则会影响用户滚动效果。

<script type="text/javascript">
     window.onscroll = function () {
         console.log("开始滚动...");
       //获取滚动距离。
       //document.body.scrollTop: 只支持chorme，火狐和ie不支持， document.documentElement.scrollTop ie和火狐支持 chrome不支持
         //得滚动的距离(兼容所有浏览器)
         console.log(document.documentElement.scrollTop || document.body.scrollTop);
    }
</script>

3、onresize事件
当浏览器窗口被调整到一个新的高度或宽度时，就会触发 resize 事件。这个事件在 window （窗
口）上面触发。所以也可以在body元素中使用 onresize 属性来指定事件处理程序

    <script type="text/javascript">
          //当窗口发生变化的时候，可以获取浏览器新的可视宽和高做相应的操作
          window.onresize = function () {
        var width = window.innerWidth || document.documentElement.clientWidth ;
        var height = window.innerHeight || document.documentElement.clientHeight;
        console.log("窗口发生了变化" + "宽：" + width + "；高：" + height);
          }
    </script>

4、onfocus(获得焦点)事件

当元素获得焦点时触发。这个事件可以发生在任何的元素上，但一般情况下只有输入框才有焦点。
这个事件不会冒泡( 也就是不会再往上层传递 )

<body>
<div id="div1">
    <input id="input1" name="user">
</div>
<p id="p1">上面的文本框获得焦点后会我会变成红色</p>
<script type="text/javascript">
    var p1 = document.getElementById("p1");
    var textInput = document.getElementById("input1");
    textInput.onfocus = function () {
        p1.style.color = "red";
    };
    var div1 = document.getElementById("div1");
    //当div中input获取焦点后，不会冒泡到上层div，所以这个函数不会执行。
    div1.onfocus = function () {
        div1.style.backgroundColor = "#000";
    }
</script>
</body>

onfocusin(获得焦点)事件 (冒泡版)
注意：在 Firefox 浏览器中不支持 onfocusin 事件，且在 Chrome, Safari 和 Opera 15+ 浏览器中使用 onfocusin 事件可能无法正常工作。但是，他作为一个 HTML 元素，通过使用 addEventListener() 方法(后面讲解)可以正常工作。

<body>
<div id="div1">
    <input id="input1" name="user">
</div>
<p id="p1">上面的文本框获得焦点后会我会变成红色</p>
<script type="text/javascript">
    var p1 = document.getElementById("p1");
    var textInput = document.getElementById("input1");
    textInput.onfocusin = function () {
        p1.style.color = "red";
    };
    var div1 = document.getElementById("div1");
    //当div中input获取焦点后，并且会冒泡到上层div，所以这个函数也会执行。
    div1.onfocusin = function () {
        div1.style.backgroundColor = "#000";
    }
</script>
</body>

5、onblur(失去焦点)事件

当元素失去焦点是触发。和onfucs对应。（不冒泡事件）

<body>
<div id="d"></div>
<p id="p1">上面的文本框获得焦点后会我会变成红色,失去焦点会变成蓝色</p>
<script type="text/javascript">
    var p1 = document.getElementById("p1");
    var d = document.getElementById("d");
    d.onfocus = function () {
        p1.style.color = "red";
    };
    d.onblur = function () {
        p1.style.color = "green";
    };
</script>
</body>

onfocusout(失去焦点)事件
onblur的(冒泡版)
注意：在 Firefox 浏览器中不支持 onfocusout 事件，且在 Chrome, Safari 和 Opera 15+ 浏览器中使用 onfocusout 事件可能无法正常工作。但是，他作为一个 HTML 元素，通过使用 addEventListener() 方法(后面讲解)可以正常工作。

<body>
<div id="div1">
    <input id="input1" name="user">
</div>
<p id="p1">上面的文本框获得焦点后会我会变成红色</p>
<script type="text/javascript">
    var p1 = document.getElementById("p1");
    var textInput = document.getElementById("input1");
    textInput.onfocusin = function () {
        p1.style.color = "red";
    };
    var div1 = document.getElementById("div1");
    //当div中input获取焦点后，并且会冒泡到上层div，所以这个函数也会执行。
    div1.onfocusin = function () {
        div1.style.backgroundColor = "#000";
    }
    // 给div1设置失去焦点事件
    div1.onfocusout = function () {
        div1.style.backgroundColor = "#f0f";
    }
</script>
</body>

6、onclick事件处理程序

鼠标单击事件(鼠标按下放开后触发)，一般是鼠标左键。

<body>
<div id="single">单击触发</div>
<script type="text/javascript">
    var single = document.getElementById("single");
    single.onclick = function () {
        alert("onclick事件");
    };
</script>
</body>

7、ondblclick事件处理程序

一般是鼠标左键双击。双击放开后触发。

<body>
<div id="double">双击触发</div>
<script type="text/javascript">
    var double = document.getElementById("double");
    double.ondblclick = function () {
        alert("你双击了div");
    }
</script>
</body>

8、onmousedown事件处理程序
当用户按下任意鼠标按钮时触发。按下即刻触发。

<body>
<div id="down">按下鼠标即刻触发</div>
<script type="text/javascript">
    var down = document.getElementById("down");
    down.onmousedown = function () {
        alert("你按下鼠标键");
    }
</script>
</body>

9、onmouseup事件处理程序
用户释放鼠标按钮时触发，放开鼠标即刻触发。

<body>
<div id="up">在此元素上方放开鼠标即刻触发</div>
<script type="text/javascript">
    var up = document.getElementById("up");
    up.onmouseup =  function () {
        alert("在这里放开鼠标键");
    }
</script>
</body>

10、onmouseover事件

onmouseover当鼠标移动到一个元素的上方时触发。（冒泡事件）

<body>
<div id="color">当鼠标移动到我上方时，字体颜色变为红色</div>
<script type="text/javascript">
    var color = document.getElementById("color");
    //当鼠标移动到div的上方时触发
    color.onmouseover = function () {
        color.style.color = "red";
    };
</script>
</body>

11、onmouseout事件

onmouseout当鼠标从一个元素的上方移走的时候触发。（冒泡事件）

<body>
<div id="color">当鼠标移动到我上方时，字体颜色变为红色；当鼠标从我上方移开时，变回黑色</div>
<script type="text/javascript">
    var color = document.getElementById("color");
    //当鼠标移动到div的上方时触发
    color.onmouseover = function () {
        color.style.color = "red";
    };
    //当鼠标从div的上方离开时触发
    color.onmouseout = function () {
        color.style.color = "black";
    }
</script>
</body>

注意：
onmouseover事件和onmouseout事件这两个事件均是冒泡事件：

此案例中，鼠标移入span和离开span的时候，span和div动会同时触发onmouseover和onmouseout事件，而如果鼠标只是移入 div和离开div时，只有 div会触发onmouseover和onmouseout事件。

<body>
<div id="color">
    当鼠标移动到我上方时，我就变色；当鼠标从我上方移开时，我就褪色
    <br>
    <span id="span">
        我是子元素的区域
    </span>
</div>
<script type="text/javascript">
    var color = document.getElementById("color");
    //当鼠标移动到div的上方时触发
    color.onmouseover = function () {
        color.style.color = "red";
    };
    //当鼠标从div的上方离开时触发
    color.onmouseout = function () {
        color.style.color = "black";
    };

    var span = document.getElementById("span");
    //当鼠标移动到div的上方时触发
    span.onmouseover = function () {
        span.style.color = "yellow";
    };
    //当鼠标从div的上方离开时触发
    span.onmouseout = function () {
        span.style.color = "green";
    }
</script>
</body>

12、键盘事件

三个键盘事件：
keydown：当用户按下键盘上的任意键时触发，而且如果按住不放的话，会重复触发此事件。
keypress：当用户按下键盘上的字符键时触发，而且如果按住不放的话，会重复触发此事件。
keyup：当用户释放键盘上的任意键时触发。
三个事件的响应处理程序：

<body >
<div><input id="test"></div>
<script type="text/javascript">
    //如果想要整个页面都响应，则将事件设置给body标签即可
    var test = document.getElementById("test");
    test.onkeydown = function () {
        console.log("你按下了任意键");
    };
//    test.onkeypress = function () {
//        console.log("你按下了字符键");
//    };
    test.onkeyup = function () {
        console.log('你松开了键盘');
    };
</script>
</body>

获取键盘按下的具体按键：

<body id="body">
<script type="text/javascript">
    var body = document.getElementById("body");
    body.onkeypress = function (e) {
        console.log("你按下了字符键：" + e.keyCode);
    };
    body.onkeyup = function (e) {
        console.log('你松开了按键：' + e.keyCode);
    };
	
    body.onkeydown = function (e) {
//        if(e.ctrlKey&&e.altKey){
//            alert("同时按下了ctrl和alt键");
//        }
        if (e.ctrlKey) {
            alert("按下了ctrl键")
        } else if (e.shiftKey) {
            alert("按下了shift键")
        } else if (e.altKey) {
            alert("按下了alt键")
        }
    };
</script>
</body>

benxiaohai888

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 事件类型

JavaScript 事件类型 JavaScript 可以处理的事件类型有很多，常见的有UI事件、焦点事件、鼠标事件、滚轮事件、文本事件、键盘事件。还有专门为触摸设备和移动设备准备的触摸事件、手势事件、屏幕方向改变等。注：冒泡事件即：事件会从层级高的传递给层级低的。
复制链接

扫一扫