JS_事件

0. 什麼是事件

簡單來說就是行為,比如點擊圖片查看下一張,點擊按鈕發送消息這些都可以是事件.

1. 事件的使用:

想要使用事件一共分為三步:

事件源: 確定事件是由哪一個元素引發的, 又有哪一些元素需要改變--引發後續事件的標籤和需要被改變的標籤
事件: 觸發事件的原因--比如鼠標點擊,鼠標移入等等
事件驅動程序: 事件被觸發之後需要做的事情

2. 舉例說明:

假設我們現在有下面這樣一段HTML

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件的使用方法示例</title>

    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>

</head>

<body>
    <div id="box"></div>
</body>

</html>

這是一段非常簡單的代碼,只有一個粉色的方塊:

而我們要做的事情就是--當我們點擊這個盒子的時候希望其變大,同時顏色變為黑色.

第一步: 確定事件源:

　　後面的變化是由誰引起?--這個粉色的盒子;

　　需要發生變化的是誰?--也是這個粉色的盒子;

　　所以很簡單的知道這個粉色的盒子本身就是事件源

既然已經確定粉色盒子就是事件源,那麼我們如何使用代碼表示呢?

// 獲取事件源
var box = document.getElementById("box");

解釋:

　　每一個載入瀏覽器的HTML的文檔都會稱為document對象,而document對象使我們能夠對HTML中的所有元素進行訪問.你可以認為document指的就是整個HTML文檔,然後我們通過不同的方法找出我們需要的元素標籤.[注釋: 除了document的對象js還有很多其他的對象,我們會在其他的文章中說明]

　　而在這裡我們通過的是使用標籤的id,因此調用getElementById()方法獲取到這個盒子,除了這個也還有其他方法,後面都會講到.

　　既然已經獲取到了,是不是就結束了呢?不是的.因為這種方法就相當於再說: 我知道他是誰,他就是三年級二班的小明.這當然沒有錯,但是以後每次說到小明你都要說三年級二班的小明是不是很麻煩呢?所以我們使用一個變量box去盛裝方便後續的操作

第二步: 綁定事件:

　　事件已經找到了,現在我們對他進行綁定事件-->觸發改變的條件-->點擊盒子.使用代碼表示就是:

    box.onclick = function() {
        //驅動事件程序內容
    }

解釋:

　　觸發的條件是鼠標點擊,所以使用onclick(如果是滑鼠滑入這是onmouseover, 滑鼠滑出為onmouseout)這些事件都是已經定義好的,如果你想查看等多的事件可是再編輯器中使用"div."然後就會彈出許多待選的事件,你也可以在W3school的HTML DOM Event 对象或者菜鳥教程的: HTML DOM 事件查看.

　　後面的的是固定格式: 對象.事件 = function(){事件驅動程序}

第三步: 事件驅動程序

　　我們需要做的事情是就是讓原來的盒子變大.也就是將其寬(width),高(height)變大,然後將其顏色改變為黑色(black).

　　所以可以直接在驅動程序事件內容中寫:

box2.style.width = "200px";
box2.style.height = "200px";
box2.style.backgroundColor = "red";

這個時候點擊是不是發現沒有任何變化?因為在#box中添加一行:cursor: pointer;然後刷新點擊發現是不是變了/

最後完整的代碼:

<!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>
        #box {
            width: 100px;
            height: 100px;
            background-color: pink;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="box"></div>
</body>
<script>
    // 獲取事件源
    var box = document.getElementById("box");
    // console.log(box);
    // 綁定事件 格式: 事件源.事件=function(){事件驅動程序}
    box.onclick = function() {
        box.style.width = "200px";
        box.style.height = "200px";
        box.style.backgroundColor = "black";
    }
</script>

</html>

3. 三種事件綁定方式:

1. 常規綁定方式:

　　也就是上面示例使用的方式.事件源-事件-事件驅動程序.這裡對此不在贅述

2. 添加類名:

　　我們把需要改變的動作寫成樣式(CS),放在<style></style>標籤當中,當事件觸發之後將class賦值為我們自己編寫的樣式類名:

示例:

　　1. 首先添加點擊之後的樣式:

    <style>

        .click-after {
            // 被點擊之後的樣式
            width: 200px;
            height: 200px;
            background-color: black;
        }

    </style>

　　2. 事件: 事件和之前沒有任何區別,依舊固定格式:

    box.onclick = function() {
        //驅動事件程序內容
    }

　　3. 更改類名:

    box.onclick = function() {
        box.className = "click-after";
    };

你會發現效果和之前完全一樣,但是代碼稍微簡潔一點點.

3. 在標籤內添加onclick="fn()"

　　1. 在標籤內部添加事件函數

    <div onclick="fn()"></div>

　　2. 在script></script>標籤內部添加函數動作:

    function fn() {
            width: 200px;
            height: 200px;
            background-color: black;
    }

4. 通過標籤名和類名獲取事件源:

　　在眾多獲取事件源的方法中最常用的就是: 1. 通過ID獲取, 2. 通過類名獲取, 3. 通過標籤名獲取.然而與ID不同的是同一個HTML中會有大量相同的標籤我們無法區分具體是哪一個標籤,而同一個標籤能夠擁有多個不同的類,不同的標籤能擁有相同的類.,也無法唯一確定.所以通過方法2,3獲取到的方法都是一個數組,要獲取到具體的某一個需要使用下標配合.

示例:

　　假設有這麼一段HTML(已經省略其他內容):

　　1. 通過id獲取第一個div標籤:

    var box1 = document.getElementById("box1");

　　2. 通過類名獲取第二個div標籤:

    var box2 = document.getElementsByClassName("box")[1];

　　或者和獲取id一樣的獲取方式,但是在使用的時候使用下標

    var boxarr = document.getElementsByClassName("div");
    // 獲取一個數組
    boxarr[1].onclick = function() {
    // 使用的時候加上下標
        boxarr[1].style.width = "200px";
        boxarr[1].style.height = "200px";
        boxarr[1].style.backgroundColor = "blue";
    };

　　3. 通過標籤獲取第三個div標籤:

　　其方法與通過類名獲取是一樣的,唯一的不同在於使用的方法名(函數名)不同:

var box3 = document.getElementsByTagName("box3")[0];

　　類名獲取的第二種方式,對於使用標籤名同樣適合

猜你喜欢