JavaScript----JavaScript事件（上）

最新推荐文章于 2024-07-11 17:05:07 发布

小满blue

最新推荐文章于 2024-07-11 17:05:07 发布

阅读量54

点赞数

分类专栏： JavaScript入门文章标签： javascript css html

本文链接：https://blog.csdn.net/taozi8957/article/details/120730371

版权

JavaScript入门专栏收录该内容

32 篇文章 1 订阅

订阅专栏

1.事件简介

组成事件三部分：

事件源：触发谁的事件

事件类型

事件处理函数：执行事件要做的事情

2.事件对象event

（1）创建：当触发一个事件时，会自动创建一个事件对象event

（2）获取事件对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取事件对象</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: sandybrown;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        //获取div节点
        var divEle=document.querySelector('div')
        //设置div点击事件
        divEle.onclick=function(e){
            e=e||window.event    //兼容IE写法
            console.log(e)   //点击div，打印出事件的信息
        }
    </script>
</body>
</html>

（3）获取光标点坐标

e为事件对象

e.clicentX，e.clientY 相对于浏览器窗口位置
e.pageX，e.pageY 相对于页面的位置
e.offsetX，e.offsetY 相对于事件源自身的位置

（4）事件类型

鼠标事件

click ：点击事件
dbclick ：双击事件
contextmenu ：右键单击事件
mousedown ：鼠标左键按下事件
mouseup ：鼠标左键抬起事件
mousemove ：鼠标移动
mouseover ：鼠标移入事件
mouseout ：鼠标移出事件
mouseenter ：鼠标移入事件
mouseleave ：鼠标移出事件

焦点事件

focus：获取焦点

blur：失去焦点

表单事件

change : 表单内容改变事件
input : 表单内容输入事件
submit : 表单提交事件

键盘事件

keyup ：键盘抬起事件
keydown ：键盘按下事件
keypress ：键盘按下再抬起事件

浏览器事件

load ：页面全部资源加载完毕
scroll ：浏览器滚动的时候触发
resize 页面大小事件

触摸事件（用于移动端触摸屏幕）

touchstart ：触摸开始事件
touchend ：触摸结束事件
touchmove ：触摸移动事件

小满blue

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript----JavaScript事件（上）

1.事件简介组成事件三部分：事件源：触发谁的事件事件类型事件处理函数：执行事件要做的事情2.事件对象event（1）创建：当触发一个事件时，会自动创建一个事件对象event（2）获取事件对象<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="
复制链接

扫一扫