JavaScript的事件系列你知道多少？有案例哦------JavaScript学习之路3

最新推荐文章于 2022-03-03 15:18:13 发布

dragoned_123

最新推荐文章于 2022-03-03 15:18:13 发布

阅读量169

点赞数

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

本文链接：https://blog.csdn.net/dragoned_123/article/details/107359146

版权

JavaScript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

JavaScript的事件系列

鼠标事件

click 单击

d[0].onclick = function(){
    d[0].style.backgroundColor = "rgba("+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+"0.5"+")";
}

dblclick 双击

    d[1].ondblclick = function(){
        d[1].style.backgroundColor = "rgba("+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+"0.5"+")";
    }

mouseover 移入子节点重复触发

d[2].onmouseover = function(){
    d[2].style.backgroundColor = "rgba("+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+"0.5"+")";
}

mouseout 移出

d[3].onmouseout = function(){
    d[3].style.backgroundColor = "rgba("+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+"0.5"+")";
}

mousemove 移动不停的触发

d[4].onmouseenter = function(){
    d[4].style.backgroundColor = "rgba("+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+"0.5"+")";
}

mouseenter 移入子节点不重复触发

d[5].onmouseleave = function(){
    d[5].style.backgroundColor = "rgba("+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+"0.5"+")";
}

mouseleave 移出

d[6].onmousemove = function(){
    d[6].style.backgroundColor = "rgba("+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+"0.5"+")";
}

键盘事件（表单、window全局）

keydown 一直按一直触发
keypress 只支持字符按键，不包含CTRL SHIFT…
keyup 键盘抬起

HTML事件

window事件

load 当前页面加载完成后触发
unload 当前页面解构的时候触发关闭、刷新 ie兼容
scroll 页面滚动的时候触发
resize 页面大小发生变化的时候触发

表单事件

blur 失去焦点时触发
foucs 获取焦点时触发
select 选中文本时触发
change 当改变输入框的内容并失去焦点时触发
submit form表单submit按钮按下的时候触发
reset form表单reset按钮按下的时候触发

事件对象

onmousedown的button属性

0 鼠标左键按下
1 鼠标滚轮按下
2 鼠标右键按下

document.onmousedown = function(even){
        var ev = even || window.event;//为了兼容IE浏览器添加window.event
        console.log(ev.button)
}

获取当前鼠标坐标

clientX clientY 可视窗口的左上角为原点
pageX pageY 网页页面的左上角为原点
screenX screenY 屏幕的左上角为原点

document.onmousedown = function(even){
    var ev = even || window.event;//为了兼容IE浏览器添加window.event
        console.log(ev.clientX +","+ev.clientY);
        console.log(ev.pageX +","+ev.pageY);
        console.log(ev.screenX +","+ev.screenY);
}

案例

显示页面包含7个div标签，之后每个div标签绑定一个鼠标事件，使得每一个标签有鼠标发生时，颜色会随机改变
实现鼠标的提示框，当鼠标悬浮在文字上，鼠标的会自动提示文字相应的内容，离开文字，提示消失，文字还会随着鼠标进行移动

在这里插入图片描述

关键源码

    var d = document.getElementsByTagName("div");
    //单击
    d[0].onclick = function(){
        d[0].style.backgroundColor = "rgba("+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+"0.5"+")";
    }
    //双击
    d[1].ondblclick = function(){
        d[1].style.backgroundColor = "rgba("+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+"0.5"+")";
    }
    //移入父节点，移入子节点也触发
    d[2].onmouseover = function(){
        d[2].style.backgroundColor = "rgba("+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+"0.5"+")";
    }
    //移出父节点，移出子节点也触发
    d[3].onmouseout = function(){
        d[3].style.backgroundColor = "rgba("+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+"0.5"+")";
    }
    //移入
    d[4].onmouseenter = function(){
        d[4].style.backgroundColor = "rgba("+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+"0.5"+")";
    }
    //移出
    d[5].onmouseleave = function(){
        d[5].style.backgroundColor = "rgba("+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+"0.5"+")";
    }
    //鼠标移动触发
    d[6].onmousemove = function(){
        d[6].style.backgroundColor = "rgba("+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+"0.5"+")";
    }

var arr = [" 超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。",
           "CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在 CSS 文件中多个样式定义可层叠为一个",
           "JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。"
          ];
var ass = document.getElementsByTagName("a");
var d = document.getElementById("t");
for(var i = 0;i<ass.length;i++){
    ass[i].index = i;//添加索引属性
    ass[i].onmouseover = function () {
        d.style.display = "block";
        d.innerHTML = arr[this.index];//添加文本内容
    }
    ass[i].onmouseout = function () {
        d.style.display = "none";
    }
    //添加鼠标移动事件
    ass[i].onmousemove = function (eve) {
        var e = eve || window.event;
        d.style.position = "absolute";//一定要设置postion为absolute，不然无法实现悬停效果
        d.style.left = (e.clientX+10)+'px';//+5px为了使div出现时不至于触发a标签的mouseout事件使得提示框不显示
        d.style.top = (e.clientY+10)+"px";
    }
}

完整源码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>offset测试</title>
    <style>
        body{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .d1{
            background-color: #28a4c9;
            width: 300px;
            height: 400px;
            margin: 3px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            text-align: center;
        }
        a{
            border: solid black 2px;
        }
    </style>
</head>
<body>
<div class="d1">单击</div>
<div class="d1">双击</div>
<div class="d1"><a>移入子节点也触发</a></div>
<div class="d1"><a>移出子节点也触发</a></div>
<div class="d1"><a>移入子节点不触发</a></div>
<div class="d1"><a>移出子节点不触发</a></div>
<div class="d1">鼠标移动触发</div>
<script>
    var d = document.getElementsByTagName("div");
    //单击
    d[0].onclick = function(){
        d[0].style.backgroundColor = "rgba("+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+"0.5"+")";
    }
    //双击
    d[1].ondblclick = function(){
        d[1].style.backgroundColor = "rgba("+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+"0.5"+")";
    }
    //移入父节点，移入子节点也触发
    d[2].onmouseover = function(){
        d[2].style.backgroundColor = "rgba("+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+"0.5"+")";
    }
    //移出父节点，移出子节点也触发
    d[3].onmouseout = function(){
        d[3].style.backgroundColor = "rgba("+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+"0.5"+")";
    }
    //移入
    d[4].onmouseenter = function(){
        d[4].style.backgroundColor = "rgba("+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+"0.5"+")";
    }
    //移出
    d[5].onmouseleave = function(){
        d[5].style.backgroundColor = "rgba("+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+"0.5"+")";
    }
    //鼠标移动触发
    d[6].onmousemove = function(){
        d[6].style.backgroundColor = "rgba("+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+"0.5"+")";
    }
    document.onmousedown = function(even){
        var ev = even || window.event;//为了兼容IE浏览器添加window.event
        console.log(ev.clientX +","+ev.clientY);
        console.log(ev.pageX +","+ev.pageY);
        console.log(ev.screenX +","+ev.screenY);
    }
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="zn-Ch">
<head>
    <meta charset="UTF-8">
    <title>提示框</title>
    <style>
        a{
            font-size: 30px;
            display: block;
            margin: 20px;
            text-decoration: none;
            color: black;
        }
        .d1{
            display: none;
            background-color: rgba(40, 164, 201, 0.47);
            width: 350px;
            height: 200px;
            font-size: 16px;
        }
    </style>
</head>
<body>
<a href="#" class="a1">html</a>
<a href="#" class="a1">css</a>
<a href="#" class="a1">javascript</a>
<div class="d1" id="t"></div>
<script>
    var arr = [" 超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。",
        "CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在 CSS 文件中多个样式定义可层叠为一个",
     "JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。"
    ];
    var ass = document.getElementsByTagName("a");
    var d = document.getElementById("t");
    for(var i = 0;i<ass.length;i++){
        ass[i].index = i;//添加索引属性
        ass[i].onmouseover = function () {
            d.style.display = "block";
            d.innerHTML = arr[this.index];//添加文本内容
        }
        ass[i].onmouseout = function () {
            d.style.display = "none";
        }
        //添加鼠标移动事件
        ass[i].onmousemove = function (eve) {
            var e = eve || window.event;
            d.style.position = "absolute";//一定要设置postion为absolute，不然无法实现悬停效果
            d.style.left = (e.clientX+10)+'px';//+5px为了使div出现时不至于触发a标签的mouseout事件使得提示框不显示
            d.style.top = (e.clientY+10)+"px";
        }
    }
</script>
</body>
</html>

dragoned_123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript的事件系列你知道多少？有案例哦------JavaScript学习之路3

JavaScript的事件系列鼠标事件click 单击d[0].onclick = function(){ d[0].style.backgroundColor = "rgba("+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+"0.5"+")";}dblclick 双击 d[1].ondblclick = function(){
复制链接

扫一扫