JS常用事件型別方法(圖文結合,用最簡單的術語帶你搞透)-有解無憂

我是小康,一個熱愛前端,熱愛生活的99年小伙,人生路漫漫在這里相遇即是你我的緣分,點進來看看我的分享都是滿滿的干貨,相信你會有所識訓

話不多說,接下來的操作定讓你識訓滿滿

既然是要了解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 == onm ouseenter == 移入事件
onmouseout == onm ouseleave == 移出事件

<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" onl oad="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://www.uj5u.com/qianduan/274747.html

標籤：其他

上一篇：十一、CSS3三角形不斷放大特效

下一篇：課程總結（第五周）