90 lines
2.0 KiB
HTML
90 lines
2.0 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>js 事件</title>
|
|
</head>
|
|
<body>
|
|
|
|
|
|
<!-- <div class="main">
|
|
<p>测试</p>
|
|
<button>点 我</button>
|
|
<h2>
|
|
<a href="">你好</a>
|
|
</h2>
|
|
</div> -->
|
|
|
|
|
|
<button class="test">点 我</button>
|
|
|
|
<!-- <button onclick="hello()">点我2</button>
|
|
|
|
<button class="ddd">点我3</button> -->
|
|
|
|
</body>
|
|
<script>
|
|
// 虚拟dom
|
|
// var main = {
|
|
// tagName: 'div',
|
|
// className: 'main',
|
|
// text: '',
|
|
// children: [
|
|
// {
|
|
// tagName: 'p',
|
|
// className: '',
|
|
// text: '测试',
|
|
// children: []
|
|
// },
|
|
// {
|
|
// tagName: 'button',
|
|
// className: '',
|
|
// text: '点 我',
|
|
// children: []
|
|
// },
|
|
// {
|
|
// tagName: 'h2',
|
|
// className: '',
|
|
// text: '',
|
|
// children: [
|
|
// {
|
|
// tagName: 'a',
|
|
// className: '',
|
|
// text: '你好',
|
|
// children: []
|
|
// }
|
|
// ]
|
|
// }
|
|
// ]
|
|
// }
|
|
|
|
// 事件
|
|
// 事件三要素
|
|
// 事件源 事件类型 事件处理函数
|
|
|
|
// 绑定事件 有三种方式
|
|
// 第二种和第三种
|
|
|
|
var buttonObject = document.querySelector(".test")
|
|
|
|
buttonObject.onclick = (event) => {
|
|
console.log(event);
|
|
alert("你点我了")
|
|
}
|
|
|
|
|
|
// function hello() {
|
|
// alert("你好")
|
|
// }
|
|
|
|
|
|
// var ddd = document.querySelector(".ddd");
|
|
|
|
// document.addEventListener('click', function() {
|
|
// alert("3")
|
|
// })
|
|
|
|
</script>
|
|
</html> |