console 命令行工具 X clear

console

function alertSecond(){
    alert("第二次");
}

function changeColor(){
    if(this.style.color=="red"){
       this.style.color="black";
    }
    else{
        this.style.color="red";
    }

}

//
function changeBackgroundColor() {
    console.log(this.textContent);
    if (this.style.backgroundColor == "lightskyblue") {
        this.style.backgroundColor = "white";
    }
    else {
         this.style.backgroundColor = "lightskyblue";
    }
   
} 

function changeColorAndBackgroundColor() {
    
    if (this.style.color == "red") {
        this.style.color = "black";
    }
    else {
         this.style.color = "red";
    }
     if (this.style.backgroundColor == "lightskyblue") {
        this.style.backgroundColor = "white";
    }
    else {
         this.style.backgroundColor = "lightskyblue";
    }
}

//事件处理器和事件侦听器的区别
//this：哪个DOM对象（元素节点）调用了this所在的函数，那么this指向的就是哪个DOM对象。
window.onload=function()
{   
    var oBtn = document.getElementById("btn");
    oBtn.onclick = function(){
        alert("第一次");
    }
    oBtn.onclick = function(){
        alert("第二次");
    }
    // oBtn.onclick = function(){
    //     alert("第一次");
    //     alert("第二次");
    //     alert("第三次");
    // }

    var oBtn = document.getElementById("listenBtn");
    oBtn.addEventListener("click",function(){
        alert("第1次");
    },false);
    oBtn.addEventListener("click",alertSecond,false);
    //oBtn.removeEventListener("click",alertSecond,false);
    
    //
    var oPContent = document.getElementById("content");
    oPContent.addEventListener("click",changeColor,false);
    oPContent.addEventListener("click",changeBackgroundColor,false);
    
    var oBtn = document.getElementById("removeBtn");
    oBtn.addEventListener("click",function(){
        oPContent.removeEventListener("click",changeColor,false);
    },false);
    
    //
    var oPContent1 = document.getElementById("content1");
    oPContent1.onclick = changeColorAndBackgroundColor;
    
    var oBtn1 = document.getElementById("removeBtn1");

    oBtn1.addEventListener("click",function(event){
        console.log(event.type);
        oPContent1.onclick = null;
    },false);

    //event对象
    document.addEventListener("keydown",function(event){
        console.log(event.type);
        if(event.shiftKey||event.altKey||event.ctrlKey){
            console.log("你按下了 shift,alt或者ctrl");
        }
        console.log("你按下啦"+event.keyCode);
    }); //默认false

    document.addEventListener("keyup",function(event){
        console.log(event.type);
        console.log("你松开啦"+event.keyCode);
    });


}

<!DOCTYPE html> 
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">   
        </style>
        <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>
            <br/>
            <br/>
            <p id="content1">信科院</p>
            <button id="removeBtn1">解除</button>
        </div>

    </body>  
</html>