57 lines
1.2 KiB
HTML
57 lines
1.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>event 事件</title>
|
|
</head>
|
|
<body>
|
|
|
|
<button>点我</button>
|
|
|
|
<div onclick="test()">哈哈哈</div>
|
|
<div class="three">第三种</div>
|
|
</body>
|
|
|
|
<script>
|
|
// 事件：你在网页上完成的操作都叫事件
|
|
// 事件三要素：
|
|
// 事件源
|
|
// 事件类型
|
|
// 事件处理函数
|
|
// 点击事件写法有三种？
|
|
//
|
|
|
|
// js dom document 虚拟dom 真实dom 影子dom
|
|
|
|
console.log();
|
|
var a = document.querySelector("button")
|
|
// 1
|
|
a.onclick = function () {
|
|
alert("1111")
|
|
}
|
|
|
|
// 2
|
|
function test () {
|
|
alert("test")
|
|
}
|
|
|
|
|
|
// 3
|
|
document.querySelector(".three").addEventListener('click', function() {
|
|
alert("三1")
|
|
})
|
|
|
|
document.querySelector(".three").addEventListener('click', function() {
|
|
alert("三2")
|
|
})
|
|
|
|
document.querySelector(".three").addEventListener('click', function() {
|
|
alert("三3")
|
|
})
|
|
|
|
|
|
|
|
</script>
|
|
</html> |