【JavaScript】事件-蒲公英云

【JavaScript】事件

举例：

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

三要素：

事件源         事件          事件处理程序

事件源

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

事件

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

事件处理程序

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

用法：

事件源.事件=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>