54 lines
1.3 KiB
HTML
54 lines
1.3 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>
|
||
<div class="test">
|
||
<p>你好1</p>
|
||
<p>你好2</p>
|
||
<p>你好2</p>
|
||
<p>你好2</p>
|
||
<p>你好2</p>
|
||
<p>你好2</p>
|
||
<p>你好2</p>
|
||
<p>你好2</p>
|
||
<p>你好2</p>
|
||
<p>你好2</p>
|
||
<p>你好2</p>
|
||
<p>你好2</p>
|
||
</div>
|
||
|
||
<button>点我</button>
|
||
</body>
|
||
<script>
|
||
// 事件：用户在浏览器基本上干的所有事情都是js的事件
|
||
// 事件三要素组成：事件源 事件类型 事件处理函数
|
||
|
||
// 第一种绑定事件的方式
|
||
// document.querySelector("button").onclick = function (e) {
|
||
// console.log(document.querySelector(".test").children);
|
||
// }
|
||
|
||
// 网页的标签会在js中被转化为对象进行存储
|
||
// 这个对象叫什么？虚拟dom
|
||
// 虚拟dom转换成真实的dom
|
||
|
||
|
||
// var p = document.querySelectorAll(".test p");
|
||
// console.log(p)
|
||
// p.forEach(function (v) {
|
||
// v.onclick = function () {
|
||
// console.log(v)
|
||
// }
|
||
// })
|
||
|
||
|
||
</script>
|
||
|
||
</html> |