事件三要素

DOM:文檔對象模型

BOM:瀏覽器對象模式

js以事件驅動為核心的一們語言

 

事件三要素

1、事件源

    a）執行者

    b）誰引發的事件，事件的標簽，動作

 

2、事件

    a）執行的事情

    b)  已經定義好的（點擊，鼠標移上……）

 

3、事件驅動程序（處理元素 ）

     a）執行結果

     b)  對樣式和HTML標簽的（DOM操作）

 

執行事件步驟

1、獲取事件源

        document,getElementById(“ 事件源”)

2、綁定事件

        事件源 . 事件=function(){

 3、書寫事件驅動程序

 }

綁定事件的方法

var div=document.getElementById("box");
     //匿名綁定
     div.onclick=function(){
         //書寫事件驅動程序
         alert(1)
     };

     //不能寫返回值 （用函數名綁定）
    div.onclick=fu;
     function fu(){
         //書寫事件驅動程序
         alert(1)
     };

     //行內綁定
    <div id="box" onclick="fu()"></div>
    function fu(){
        //書寫事件驅動程序
        alert(1)
    };

操作標簽屬性

ddd.className = "aaa";//操作事件添加類名屬性改變樣式 
div.style.width="400px";//操作事件的style屬性添加樣式

 有權限問題，用的時候小心

closeBanner.className+="hide" //保留原類名，添加新類名
 closeBanner.className="hide" //替換舊類名

windows.onload事件

    1、頁面加載完畢（文本和圖片都加載完畢）的時候觸發的事件

    2、js和html同步加載，

    3、使用元素在定義之前，容易出現錯誤

    4、windows.onload的作用就是，防止使用元素在定義之前出現問題。加載完畢后再執行

window.onload=function(){
       var aaa=document.getElementById("box");
       console.log(aaa);
    }
 <div id="box"></div>

 案例

<img id="box" src="../image/jd1.png" style="cursor: pointer;border: 1px solid #ccc;"/>
<script>
    //改變圖片
    var img=document.getElementById("box");
        img.onmouseover=fu1;//鼠標懸停
        img.onmouseout=fu2; //鼠標離開
        function fu1(){
            //函數中誰調用了函數誰就是this
            this.src="../image/jd2.png"
        };
        function fu2() {
            img.src="../image/jd1.png"
         }
</script>

  //需求：點擊案例，隱藏盒子
    //思路：點擊a連接，讓top-banner這個盒子隱藏起來（）
    var closeBanner=document.getElementById("closeBanner");
    var topBanner=document.getElementById("topBanner");
    closeBanner.onclick = function () {
        //topBanner.className += " hide"; //保留原類名，添加新類名 加新類名的時候必須有空格
        //topBanner.className = "hide";//替換舊類名
        topBanner.style.display="none"
    }