98 lines
2.3 KiB
HTML
98 lines
2.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>事件</title>
|
||
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<button class="one">点我</button>
|
||
<button class="two" onclick="test()">哈哈哈</button>
|
||
<button class="three" >哈哈哈22333</button>
|
||
|
||
<a href="https://www.baidu.com/">百度</a>
|
||
|
||
</body>
|
||
<script>
|
||
// 事件
|
||
|
||
// 事件有三要素
|
||
// 事件源 事件类型 事件处理函数
|
||
|
||
// 事件冒泡
|
||
var a = document.querySelector(".one")
|
||
// a.innerHTML = "<span>你好</span>"
|
||
console.dir(a);
|
||
|
||
document.querySelector("a").onclick = function (e) {
|
||
// 阻止默认事件
|
||
e.preventDefault();
|
||
console.log("hahaah");
|
||
}
|
||
|
||
a.onclick = function (event) {
|
||
console.log(event);
|
||
alert("点我干什么1？？")
|
||
}
|
||
|
||
|
||
// function test() {
|
||
// alert("two")
|
||
// }
|
||
|
||
|
||
// document.querySelector(".three").addEventListener('click', function() {
|
||
// alert("哈哈哈1")
|
||
// })
|
||
|
||
// document.querySelector(".three").addEventListener('click', function() {
|
||
// alert("哈哈哈2")
|
||
// })
|
||
|
||
// var dom = {
|
||
// tagName: 'div',
|
||
// className: 'main',
|
||
// idName: null,
|
||
// children: [
|
||
// {
|
||
// tagName: 'h2',
|
||
// className: 'title',
|
||
// idName: null,
|
||
// children: [
|
||
// {
|
||
// tagName: 'img',
|
||
// className: null,
|
||
// idName: null,
|
||
// children: null
|
||
// }
|
||
// ]
|
||
// },
|
||
// {
|
||
// tagName: 'button',
|
||
// className: null,
|
||
// idName: null,
|
||
// children: [
|
||
// {
|
||
// tagName: '#text',
|
||
// className: null,
|
||
// idName: null,
|
||
// children: null
|
||
// }
|
||
// ]
|
||
// }
|
||
// ]
|
||
// }
|
||
|
||
// 虚拟dom（js对象）
|
||
// 影子dom
|
||
// 真实dom
|
||
</script>
|
||
|
||
</html>
|