JavaScript事件处理

LiuMM101

于 2022-09-08 19:27:36 发布

阅读量351

点赞数 3

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/LiuMM101/article/details/126769990

版权

在这里主要介绍鼠标事件、焦点事件、键盘事件、UI事件：

1、鼠标事件

鼠标事件是Web开发中最常用的一类事件，毕竟鼠标是最主要的定位设备。

onclick鼠标单击事件

window.onclick = function () {
     console.log('鼠标单击事件');
}

ondblclick鼠标双击事件

 window.ondblclick = function () {
        console.log('鼠标双击事件');
    }

onmousedown鼠标按下事件

window.onmousedown = function () {
        console.log('当鼠标按下运行时');
   }

onmouseup鼠标松开事件

window.onmouseup = function (){
    console.log("当鼠标松开运行时");
}

onmousewheel当鼠标的滚轮运行时

window.onmousewheel=function () {
        console.log("当鼠标的滚轮运行时");
    }

2、焦点事件

焦点事件会在页面元素获得或失去焦点的时候触发。这一类事件最主要的两个是focus和blur，但是记住这两个事件是不冒泡的。

onblur当窗口失去焦点时

window.onblur = function (){
    console.log('窗口失去焦点');
}

onfocus当窗口获得焦点时

window.onfocus = function (){
    console.log('窗口获得了焦点');
}

阻止或不阻止事件冒泡

<body>
<div onmouseover="divMouseover()"
    onmouseout="divMouseout()" 
    style="width: 300px;height: 300px;background: red">
</div>

<div onmouseenter="divMouseenter()"
     onmouseleave="divMouseleave()"
     style="width: 300px;height: 300px;background: red">
</div>

<script>

    //onmouseover 当鼠标移入时  不能阻止冒泡
    function divMouseover() {
        console.log("当鼠标进入了当前的DIV");
    }
    //onmouseout : 当鼠标移出时  不能阻止冒泡
    function divMouseout() {
        console.log("当鼠标移出了当前的DIV");
    }

    /* onmouseenter ： 可以阻止事件冒泡 */
    function divMouseenter() {
        console.log("当鼠标进入了当前的DIV");
    }
    /* onmouseleave ： 可以阻止事件冒泡 */
    function divMouseleave() {
        console.log("当鼠标移出了当前的DIV");
    }
</script>
</body>

3、键盘事件

用户在使用键盘的时候会触发键盘事件，这里有三个事件：

onkeydown：按下某个键就会触发

window.onkeydown = function(event){
    //解决兼容问题
    event = event ||window.event;
    console.log('键盘按下了'+event.keyCode);
}

onkeyup：释放某个按键时触发

window.onkeyup = function (event) {
    event = event || window.event;
    console.log("键盘松开了" + event.keyCode);
}

onkeypress：某个键按下并且释放时触发

window.onkeypress = function (event) {
    event = event || window.event;
    console.log("键盘按下并松开" + event.keyCode);
}

4、UI事件

UI事件指的是那些不一定与用户操作有关的事件，在这里列举两个

onload窗口加载完成后

window.onload = function (){
    console.log('窗口加载完成');
}

onresize窗口大小发生改变时

window.onresize = function (){
     console.log("窗口大小正在发生改变");
}

LiuMM101

关注

3
点赞
踩
0

收藏

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

js常用事件
复制链接

扫一扫