關於DOM的事件操做

時間 2019-11-09

標籤關於 dom 事件欄目 HTML 简体版

原文原文鏈接

JavaScript的組成

三部分:javascript

ECMAScript: JavaScript的語法標準,包括變量,表達式,運算符,函數,if語句,for語句
DOM: 文檔對象模型,操做網頁上元素的API,好比讓盒子移動,變色,輪播圖等
BOM: 瀏覽器對象模型,操做瀏覽器部分功能的API,好比讓瀏覽器自動滾動

事件

JS是以事件驅動爲核心的一門語言css

事件三要素

事件源,事件,事件驅動程序html

好比，我用手去按開關，燈亮了。這件事情裏，事件源是：手。事件是：按開關。事件驅動程序是：燈的開和關。java

再好比，網頁上彈出一個廣告，我點擊右上角的X，廣告就關閉了。這件事情裏，事件源是：X。事件是：onclick。事件驅動程序是：廣告關閉了數組

因而咱們能夠總結出：誰引起的後續事件，誰就是事件源瀏覽器

總結以下：函數

事件源：引起後續事件的html標籤。spa
事件：js已經定義好了（見下圖）。code
事件驅動程序：對樣式和html的操做。也就是DOMhtm

所以,代碼書寫要分三步走:

1. 獲取事件源

document.getElementById(「box」);

2. 綁定事件

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

3. 書寫事件驅動程序:關於DOM的操做(業務邏輯)

具體代碼實例:

<div id="box" class="box">
        <div id="child">

        </div>
    </div>
    <script type="text/javascript">
        //1.獲取事件源
        var div = document.getElementById("box");
        //2.綁定事件
        div.onclick = function () {
            //3.書寫業務邏輯
            alert("我是彈出的內容");
        }

常見事件

獲取事件源的方式(DOM節點的獲取)

var div1 = document.getElementById("box1");      //方式一：經過id獲取單個標籤
 
var arr1 = document.getElementsByTagName("div1");     //方式二：經過 標籤名 得到 標籤數組，因此有s
 
var arr2 = document.getElementsByClassName("hehe");  //方式三：經過 類名 得到 標籤數組，因此有s

綁定事件的方式

方式一:直接綁定匿名函數

<div id="box" class="box">
        <div id="child">

        </div>
   </div>
    <script type="text/javascript">
        //1.獲取事件源
        var div = document.getElementById("box");
        //2.綁定事件
        div.onclick = function () {
            //3.書寫業務邏輯
            alert("我是彈出的內容");
        }

    </script>

方式二：先單獨定義函數，再綁定

<div id="box1" ></div>

<script type="text/javascript">
    var div1 = document.getElementById("box1");
    //綁定事件的第二種方式
    div1.onclick = fn;   //注意，這裏是fn，不是fn()。fn()指的是返回值。
    //單獨定義函數
    function fn() {
        alert("我是彈出的內容");
    }
</script>

方式三：行內綁定

<!--行內綁定--> 
<div id="box1" onclick="fn()"></div> 
<script type="text/javascript"> 
    function fn() { 
        alert("我是彈出的內容"); 
} 
</script>

事件驅動程序

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

<body>

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

<script type="text/javascript">
    var oDiv = document.getElementById("box");
    //點擊鼠標時，本來粉色的div變大了，背景變紅了
    oDiv.onclick = function () {
        oDiv.style.width = "200px";   //屬性值要寫引號
        oDiv.style.height = "200px";
        oDiv.style.backgroundColor = "red";   //屬性名是backgroundColor，不是background-Color
    }
</script>

注意事項:

在js裏寫屬性值時，要用引號
在js裏寫屬性名時，是backgroundColor，不是CSS裏面的background-Color。記得全部的像css屬性的text-*，line-*、backgroun-*等在js中都寫成駝峯

onload事件

當頁面加載（文本和圖片）完畢的時候，觸發onload事件。

<script type="text/javascript">
    window.onload = function () {
        console.log("哎喲不錯哦,我是周杰倫");  //等頁面加載完畢時，打印字符串
    }
    </script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。