【JavaScript】事件

旧城等待， 2022-06-11 09:07 256阅读 0赞

举例：

我用我的 手指 按  开关  灯亮了。

三要素：

事件源         事件          事件处理程序

事件源

要触发的对象    在举例中对应 “开关”   也就是说它一般情况下可以理解为一个  名词

事件

如何触发     在举例中对应  “按”   一般情况下是一个 动词  
    
        前端中 可以是  敲击键盘  按下鼠标  鼠标经过

事件处理程序

发生了什么事   在举例中对应“灯亮了”

用法：

事件源.事件=function(){
            事件处理程序（函数）
        }

案例： 点击按钮div变色

分析：
    
        事件源：按钮
    
        事件：鼠标点击
    
        事件处理程序：div变色

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <script type="text/javascript"> window.onload=function(){ //动态设置div和button的样式 var divBg=document.getElementsByClassName("divbg")[0]; divBg.style.width="200px"; divBg.style.float="left"; divBg.style.height="200px"; divBg.style.backgroundColor="rgba(227, 0, 0, 0.16)"; var btn=document.getElementById("btn_turn"); btn.style.width="100px"; btn.style.marginLeft="50px"; btn.style.marginTop="70px"; btn.style.float="left"; btn.style.height="50px"; btn.style.backgroundColor="rgba(0, 151, 0, 0.37)"; btn.style.outline="0";//设置点击边框不可见 btn.style.border="none";//设置初始静态边框不可见 btn.style.fontSize="22px"; btn.style.fontFamily="微软雅黑"; btn.style.color="white"; btn.innerText="变色"; //写代码的时候尽量整齐，让代码容易阅读 //样式设置完毕 var isturn=false;//实现点一次变色一次 btn.onclick=function(){ //鼠标点击事件 if(isturn==false){ divBg.style.backgroundColor="rgba(0, 151, 0, 0.37)"; btn.innerText="变回去"; isturn=true; } else{ divBg.style.backgroundColor="rgba(227, 0, 0, 0.16)"; btn.innerText="变色"; isturn=false; } } } </script>
    <div class="divbg"></div>
    <button id="btn_turn"></button>
    </body>
    </html>

以下是w3c给出的事件。  
![这里写图片描述][SouthEast]

[SouthEast]: /images/20220611/4b91e7e6fd154ceab66ac7c669ae2347.png