事件三要素

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"
    }