console 命令行工具 X clear

console

//想在其他地方用的时候可以写在外面，若只写在onload则只能在该空间可见
//进行函数的定义
function alertSecond(){
    alert("第2次");
}
function changeColor(){
    if(this.style.color=="black"){
        this.style.color="red";
    }
    else{
        this.style.color="black";
    }
}
//function addBorder(){
//    if
//}
//背景颜色
function changeBackGroundColor(){
    if(this.style.backgroundColor=="Lightskyblue"){
        this.style.backgroundColor="white";
    }
    else{
        this.style.backgroundColor="Lightskyblue";
    }
}
window.onload = function (){

    //事件处理器
    var oBtn=document.getElementById("btn");

    oBtn.onclick=function(){
        alert("第1次");
        }
    oBtn.onclick=function(){
        alert("第2次");
        }
    oBtn.onclick=function(){
        alert("第3次");
        }

    oBtn.onclick=function(){
     alert("第1次");
     alert("第2次");
     alert("第3次");
 }



    //事件监听器 用  为一个元素添加事件，称为绑定事件
    var oListenBtn=document.getElementById("listenBtn");

    oListenBtn.addEventListener("click",function(){
        alert("第一次");
    },false);

    oListenBtn.addEventListener("click",alertSecond,false);

    oListenBtn.addEventListener("click",function(){
        alert("第3次");
    },false);

    //移除某个事件
    oListenBtn.removeEventListener("click",alertSecond,false);

    //点击改颜色"广州新华学院 监听事件
    var oPContent=document.getElementById("content");
    oPContent.addEventListener("click",changeColor,false);
    oPContent.addEventListener("click",changeBackGroundColor,false);

    var oRemveBtn=document.getElementById("removeBtn");
    oRemveBtn.addEventListener("click",function(even){
        console.log(event.type);
        oPContent.removeEventListener("click", changeColor, false);
    },false);
    //点击改颜色"信息科学学院"，用onclick,要多个函数，不方便
    var oPContent1 = document.getElementById("content1"); 
    oPContent1.onclick = function() {
        if (this.style.color =="black") {
            this.style.color ="green";
            }
        else {
            this.style.color ="black";
            }

        if (this.style.backgroundColor ="Lightskyblue") 
        {
            this.style.backgroundColor ="white";
            }
        else{
            this.style.backgroundColor = "Lightskyblue";
        }
    }
    var oRemveBtn1 = document.getElementById("removeBtn1"); 
    oRemveBtn1.addEventListener("click",function(){
        oPContent1.onclick = function(){
            if (this.style.backgroundColor =="Lightskyblue")
            {
                this.style.backgroundColor ="white";
            }
            else {
                this.style.backgroundColor ="Lightskyblue";
            }
        }
    },false);



    document.addEventListener("keydown", function(event){
        console.log(event.type);
        console.log("你按下 " + event.keyCode);
        if (event.altKey) {
            console.log("你按下了Alt");
        }
        if (event.ctrlKey) {
            console.log("你按下了Ctrl");
        }
        if (event.shiftKey) {
            console.log("你按下了Shift");
        }
    }, false)

    document.addEventListener("keyup", function(event){
        console.log(event.type);
        console.log("你松开 " + event.keyCode);
        if (event.altKey) {
            console.log("你松开了Alt");
        }
        if (event.ctrlKey) {
            console.log("你松开了Ctrl");
        }
        if (event.shiftKey) {
            console.log("你松开了Shift");
        }
    }, false) 


}

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
      
    </script>
</head>
<body>
    <input id="btn" type="button" value="按钮"/>
    <br/>
    <br/>
    <input id="listenBtn" type="button" value="监听按钮"/>

    <div>
        <p id="content">广州新华学院</p>

        <button id="removeBtn">解除</button>
    </div>

    <div>
        <p id="content1">信息科学学院</p>

        <button id="removeBtn1">解除</button>
    </div>
</body>
</html>