當前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

吴裕雄--天生自然 JAVASCRIPT开发学习：DOM EventListener

發布時間：2023/11/27 生活经验 34 豆豆

生活随笔收集整理的這篇文章主要介紹了吴裕雄--天生自然 JAVASCRIPT开发学习：DOM EventListener 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body><p>該實例使用 addEventListener() 方法在按鈕中添加點擊事件。 </p>
<button id="myBtn">點我</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").addEventListener("click", displayDate);
function displayDate() {document.getElementById("demo").innerHTML = Date();
}
</script></body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body><p>該實例使用 addEventListener() 方法在按鈕中添加點擊事件。 </p>
<button id="myBtn">點我</button>
<script>
document.getElementById("myBtn").addEventListener("click", function(){alert("Hello World!");
});
</script></body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body><p>該實例使用 addEventListener() 方法向同個按鈕中添加兩個點擊事件。</p>
<button id="myBtn">點我</button>
<script>
var x = document.getElementById("myBtn");
x.addEventListener("click", myFunction);
x.addEventListener("click", someOtherFunction);
function myFunction() {alert ("Hello World!")
}
function someOtherFunction() {alert ("函數已執行!")
}
</script></body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body><p>實例使用 addEventListener() 方法在同一個按鈕中添加多個事件。</p>
<button id="myBtn">點我</button>
<p id="demo"></p>
<script>
var x = document.getElementById("myBtn");
x.addEventListener("mouseover", myFunction);
x.addEventListener("click", mySecondFunction);
x.addEventListener("mouseout", myThirdFunction);
function myFunction() {document.getElementById("demo").innerHTML += "Moused over!<br>"
}
function mySecondFunction() {document.getElementById("demo").innerHTML += "Clicked!<br>"
}
function myThirdFunction() {document.getElementById("demo").innerHTML += "Moused out!<br>"
}
</script></body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body><p>實例在 window 對象中使用 addEventListener() 方法。</p>
<p>嘗試重置瀏覽器的窗口觸發 "resize" 事件句柄。</p>
<p id="demo"></p>
<script>
window.addEventListener("resize", function(){document.getElementById("demo").innerHTML = Math.random();
});
</script></body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body><p>實例演示了在使用 addEventListener() 方法時如何傳遞參數。</p>
<p>點擊按鈕執行計算。</p>
<button id="myBtn">點我</button>
<p id="demo"></p>
<script>
var p1 = 5;
var p2 = 7;
document.getElementById("myBtn").addEventListener("click", function() {myFunction(p1, p2);
});
function myFunction(a, b) {var result = a * b;document.getElementById("demo").innerHTML = result;
}
</script></body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<style>
div {background-color: coral;border: 1px solid;padding: 50px;
}
</style>
</head>
<body><p>實例演示了在添加不同事件監聽時，冒泡與捕獲的不同。</p>
<div id="myDiv"><p id="myP">點擊段落，我是冒泡。</p>
</div><br>
<div id="myDiv2"><p id="myP2">點擊段落，我是捕獲。 </p>
</div>
<script>
document.getElementById("myP").addEventListener("click", function() {alert("你點擊了 P 元素!");
}, false);
document.getElementById("myDiv").addEventListener("click", function() {alert(" 你點擊了 DIV 元素 !");
}, false);
document.getElementById("myP2").addEventListener("click", function() {alert("你點擊了 P2 元素!");
}, true);
document.getElementById("myDiv2").addEventListener("click", function() {alert("你點擊了 DIV2 元素 !");
}, true);
</script></body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<head>
<style>
#myDIV {background-color: coral;border: 1px solid;padding: 50px;color: white;
}
</style>
</head>
<body><div id="myDIV"> div 元素添加了 onmousemove 事件句柄，鼠標在桔紅色的框內移動時會顯示隨機數。<p>點擊按鈕移除 DIV 的事件句柄。</p><button onclick="removeHandler()" id="myBtn">點我</button>
</div>
<p id="demo"></p>
<script>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);
function myFunction() {document.getElementById("demo").innerHTML = Math.random();
}
function removeHandler() {document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
}
</script></body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body><p> Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法。</p>
<p>該實例演示了所有瀏覽器兼容的解決方法。</p>
<button id="myBtn">點我</button>
<script>
var x = document.getElementById("myBtn");
if (x.addEventListener) {x.addEventListener("click", myFunction);
} else if (x.attachEvent) {x.attachEvent("onclick", myFunction);
}
function myFunction() {alert("Hello World!");
}
</script></body>
</html>

轉載于:https://www.cnblogs.com/tszr/p/10944256.html

總結

以上是生活随笔為你收集整理的吴裕雄--天生自然 JAVASCRIPT开发学习：DOM EventListener的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。