当前位置：主页 > 查看内容

JS常用事件类型方法(图文结合,用最简单的术语带你搞透)

发布时间：2021-06-04 00:00| 有 位朋友查看

简介：我是小康,一个热爱前端,热爱生活的99年小伙,人生路漫漫在这里相遇即是你我的缘分,点进来看看我的分享都是满满的干货,相信你会有所收货 话不多说,接下来的操作定让你收获满满 既然是要了解JS的事件类型方法,那么咱们就要知道什么是事件,用简单的话来说,事件就……

我是小康,一个热爱前端,热爱生活的99年小伙,人生路漫漫在这里相遇即是你我的缘分,点进来看看我的分享都是满满的干货,相信你会有所收货
m

话不多说,接下来的操作定让你收获满满

既然是要了解JS的事件类型方法,那么咱们就要知道什么是事件,用简单的话来说,事件就是一个事情(话糙理不粗)或是一个操作行为,下图的代码片段和图文会告诉大家什么是JS的操作行为
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
        <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body,html{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #content{
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: green;
        }
    </style>
</head>
<body>
    <div id="content"></div>
</body>
</html>
<script>
    var content = document.getElementById("content")
    console.dir(content);//console.dir()可以打印出JS中任何一个元素天生自带的很多行为,
    //和我们是否为其绑定方法没有关系
</script>

下图是通过console.dir()打印出来的信息
在这里插入图片描述

经过上面的操作相信大家差不多了解什么是事件已经它的操作行为了,接下来就让我们一起去探讨基于他自身的一系列方法把!在这里插入图片描述

1.onclick事件

<body>
    <div id="content"></div>
</body>
<script>
    var content = document.getElementById("content")
    console.dir(content);
    function click() {
        console.log("'console.log(我只是一个基于圆形盒子的点击时触发的事件)'")
    }
    content.onclick = click

</script>

在这里插入图片描述

2.onmouseover,onmouseout事件

<body>
    <div id="content"></div>
</body>
<script>
    var content = document.getElementById("content")
    console.dir(content);
    function mouserover(){
        console.log('console.log(我是一个鼠标移入到圆形上时被触发的事件)且变成黄色');
        content.style.background = "yellow"
    }
    function mouseout(){
        console.log('console.log(我是一个鼠标移出圆形上时被触发的事件)且变成红色');
        content.style.background = "red"
    }
    content.onmouseover = mouserover
    content.onmouseout = mouseout

</script>

在这里插入图片描述

3.onmouseenter,onmouseleave事件
onmouseover == onmouseenter == 移入事件
onmouseout == onmouseleave == 移出事件

<body>
    <div id="content"></div>
</body>
<script>
    var content = document.getElementById("content")
    console.dir(content);
    function mouseenter() {
        console.log('console.log(我是一个鼠标移入到圆形上时被触发的事件)且变成正方形');
        content.style = "border-radius:0%"
    }
    function mouseleave() {
        console.log('console.log(我是一个鼠标移出圆形上时被触发的事件)且变成圆形');
        content.style ="border-radius:50%"
    }
    content.onmouseenter = mouseenter
    content.onmouseleave = mouseleave

</script>

在这里插入图片描述
在这里插入图片描述

4.onmousemove事件
onmousemove事件就是当鼠标箭头移入到圆形时且只要在被触发的对象上移动该事件就会被触发,跟onmouseover和onmouseleave不同

 <body>
    <div id="content"></div>
</body>
<script>
    var content = document.getElementById("content")
    console.dir(content);
    function mousemove() {
        console.log('console.log(我是一个鼠标移入到圆形上时被触发的事件');
        
    }
    content.onmousemove = mousemove

</script>

在这里插入图片描述

5.onmousedown和onmouseup事件

在写博客途中突然学会了制作gif动图在这里引用了班门弄斧


<body>
    <div id="content"></div>
</body>
<script>
    var content = document.getElementById("content")
    console.dir(content);
    function mousedown() {
        console.log('console.log(我是一个鼠标按下事件');
        content.style.background = "red"

    }
    function mouseup() {
        console.log('console.log(我是一个鼠标抬起事件');
        content.style.background = "purple"

    }
    content.onmousedown = mousedown
    content.onmouseup = mouseup

</script>

在这里插入图片描述

6.onscroll事件
onscroll 事件在元素滚动条在滚动时触发

<html>
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <style>
        div {
            border: 1px solid black;
            width: 400px;
            height: 200px;
            overflow: scroll;
        }
    </style>
</head>
<body>
    <p>尝试滚动 div。</p>
    <div onscroll="myFunction()">
        顶<br><br><br><br>顶<br><br><br><br>顶<br><br><br><br>顶<br><br><br><br>顶<br><br><br><br>顶
        <br><br><br><br>顶<br><br><br><br>顶<br><br><br><br>顶<br><br><br><br>顶<br><br><br><br>顶<br>
        <br><br><br>顶<br><br><br><br>顶<br><br><br><br>顶<br><br><br><br>顶 <br><br><br><br>顶
    </div>
    <p>滚动 <span id="demo">0</span> 次。</p>
    <script>
        x = 0;
        function myFunction() {
            document.getElementById("demo").innerHTML = x += 2;
        }
    </script>
</body>
</html>

在这里插入图片描述

7.onresize方法

onresize 事件会在窗口或框架被调整大小时发生。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>document</title>
</head>
<body onresize="myFunction()">
    <p>尝试调整浏览器的窗口</p>
    <p id="demo">&nbsp;</p>
</body>
<script>
    function myFunction() {
        var w = window.outerWidth;//窗口的宽度
        var h = window.outerHeight;//敞口的高度
        var txt = "窗口大小: 宽度=" + w + ", 高度=" + h;
        document.getElementById("demo").innerHTML = txt;
    }
</script>
</html>

在这里插入图片描述
在这里插入图片描述

8.onload方法

onload 事件在图片加载完成后立即执行。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>onload加载</title>
<style>
    img{
        width: 200px;
        height: 200px;
    }
</style>
<script>
function loadImage(){
	alert("图片加载完成");
}
</script>
</head>
<body>
	
<img src="http://5b0988e595225.cdn.sohucs.com/images/20190601/1a73769e7b89416d9c0cb6f5b84cdea0.gif" onload="loadImage()" width="336" height="36">
	
</body>
</html>

这个效果建议大家自行敲代码体验一下

在这里插入图片描述

9.addEventListener方法

addEventListener可以在同一个元素中添加不同类型的事件。接下来上代码演示一下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>addEventListener</title>
</head>

<body>

    <p>该实例使用 addEventListener() 方法在按钮中添加多个事件。</p>
    <button id="myBtn">点我</button>
    <p id="demo"></p>
</body>
<script>
    var x = document.getElementById("myBtn");
   function myFunction (){
       document.getElementById("demo").innerHTML += '鼠标移入<br>'
   }
    function mySecondFunction() {
        document.getElementById("demo").innerHTML += "点击!<br>"
    }
    function myThirdFunction() {
        document.getElementById("demo").innerHTML += "鼠标离开!<br>"
    }
    x.addEventListener("mouseover", myFunction);
    x.addEventListener("click", mySecondFunction);
    x.addEventListener("mouseout", myThirdFunction);
</script>
</html>

在这里插入图片描述

灰常感谢大家能坚持到现在,创作不易点点爱心是对我最大的支持,关于JS常用事件类型方法就写到这里了,完结撒花!!!

在这里插入图片描述

；原文链接：https://blog.csdn.net/lyk_xz/article/details/115539781
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！
上一篇：课程总结（第五周） 下一篇：没有了

推荐图文

  • 周排行
  • 月排行
  • 总排行

随机推荐