console
function alertSecond(){
alert("第2次");
}
function changeColor() {
console.log(this.textContent);
if (this.style.color == "red") {
this.style.color = "black";
}
else {
this.style.color = "red";
}
}
function changeBackgroundColor() {
if (this.style.backgroundColor == "lightskyblue") {
this.style.backgroundColor = "white";
}
else {
this.style.backgroundColor = "lightskyblue";
}
}
function addFontSize() {
if (this.style.fontSize == "30px") {
this.style.fontSize = null;
}
else {
this.style.fontSize = "30px";
}
}
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";
}
}
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";
}
}
function changeColorAndFontSize() {
if (this.style.color == "red") {
this.style.color = "black";
}
else {
this.style.color = "red";
}
if (this.style.fontSize == "30px") {
this.style.fontSize = null;
}
else {
this.style.fontSize = "30px";
}
}
function changeFontSizeAndColorAndBackgroundColor() {
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";
}
if (this.style.fontSize == "30px") {
this.style.fontSize = null;
}
else {
this.style.fontSize = "30px";
}
}
function changeFontSizeAndBackgroundColor() {
if (this.style.backgroundColor == "lightskyblue") {
this.style.backgroundColor = "white";
}
else {
this.style.backgroundColor = "lightskyblue";
}
if (this.style.fontSize == "30px") {
this.style.fontSize = null;
}
else {
this.style.fontSize = "30px";
}
}
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次");
}
oBtn.onclick = function() {
alert("第1次");
alert("第3次");
}
var oListenBtn = document.getElementById("listenBtn");
oListenBtn.addEventListener("click", function(){
alert("第1次");
}, false);
oListenBtn.addEventListener("click", alertSecond, false);
function alertThird(){
alert("第3次");
}
oListenBtn.addEventListener("click", alertThird, false);
oListenBtn.removeEventListener("click", alertSecond, false);
var oPContent = document.getElementById("content");
oPContent.addEventListener("click", changeColor, false);
oPContent.addEventListener("click", changeBackgroundColor, false);
oPContent.addEventListener("click", addFontSize, false);
var oRemveBtn = document.getElementById("removeBtn");
oRemveBtn.addEventListener("click", function(event){
console.log("line 168 " + event.type);
console.log("line 169 " + event.keyCode);
oPContent.removeEventListener("click", changeColor, false);
oPContent.removeEventListener("click", changeBackgroundColor, false);
}, false);
var oPContent1 = document.getElementById("content1");
oPContent1.onclick = changeColor;
var oRemveBtn1 = document.getElementById("removeBtn1");
oRemveBtn1.addEventListener("click", function(){
oPContent1.onclick = changeColorAndFontSize;
}, 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>