<!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>Document</title>
<style>
.hongClass {
width: 100px;
height: 100px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<div class="hongClass" name="hongName" id="hongId"></div>
</body>
</html>
<script>
// 1.js写到最下面，等脚本加载完成执行
// 2.addEventListener可以对同一个元素绑定多个事件，执行顺序从上到下依次执行。而onclick同一个元素只能绑定一个事件，如有多个，后面的事件会覆盖前面的事件
// 监听点击第一种方法
//根据ID获取元素
document.getElementById('hongId').addEventListener('click', function () {
alert("根据ID获取元素")
})
//根据Class获取元素(获取到的是数组需要加下标)
document.getElementsByClassName('hongClass')[0].addEventListener('click', function () {
alert("根据Class获取元素")
})
//根据Name获取元素(获取到的是数组需要加下标)
document.getElementsByName('hongName')[0].addEventListener('click', function () {
alert("根据Name获取元素")
})
//根据标签获取元素(获取到的是数组需要加下标)
document.getElementsByTagName('div')[0].addEventListener('click', function () {
alert("根据标签获取元素")
})
// 监听点击第二种方法
document.getElementById('hongId').onclick = function () {
alert("hongId")
}
document.getElementsByClassName('hongClass')[0].onclick = function () {
alert("hongClass")
}
document.getElementsByName('hongName')[0].onclick = function () {
alert("hongName")
}
document.getElementsByTagName('div')[0].onclick = function () {
alert("div")
}
// 监听点击第三种方法querySelector
document.querySelector("#hongId").addEventListener('click', function () {
alert("#querySelector")
})
document.querySelector(".hongClass").addEventListener('click', function () {
alert(".querySelector")
})
document.querySelector("div").addEventListener('click', function () {
alert("querySelectorDiv")
})
document.querySelector("div").addEventListener('click', function () {
alert("querySelectorDiv")
})
</script>
网友评论