1. addEventListener() 方法
直译为“添加事件监听器”，用于向指定元素添加事件句柄。
- 语法：
element.addEventListener(event, function, useCapture)
其中 envent 事件名，必填
和 function（触发执行的函数，例如click，也可以直接在此处自定义一个函数执行），必填
useCapture布尔值 选填，（true - 事件句柄在捕获阶段执行 ；false【为默认值】事件句柄在冒泡阶段执行）
- 例子：
<body>
<p>用户点击后使用 addEventListener() 方法来执行函数。</p>
<button id="myBtn">点我</button>
<p id="demo">
<script>
document.getElementById("myBtn").addEventListener("click", myFunction);
function myFunction()
{
document.getElementById("demo").innerHTML = "Hello World";
}
</script>
</body>
function为自定义函数 ↓↓↓
button.addEventListener('click', () => {
isLiked = !isLiked
if (isLiked) {
buttonText.innerHTML = '取消'
} else {
buttonText.innerHTML = '点赞'
}
}, false)
2. querySelector() 方法
直译为“询问数据选择器”，返回匹配指定选择器的第一个元素。
（返回所有的元素，使用 querySelectorAll() 方法替代。）
- 语法：
document.querySelector(CSS selectors)
CSS selectors:
可以是html标签，
可以是自定义的class和id（.class 和 #id）,
可以是某个标签下的自定义clsaa和id（如p.classA，h2#idA）,
也可以是某个属性的第一个标签（p[target]）
但都必须以字符串的形式；
- 例子：
修改第一段的背景颜色为红色
<body>
<p>这是一个 p 与元素。</p>
<p>这也是一个 p 与元素。</p>
<p>点击按钮修改文档中第一个 p 元素的背景颜色。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() {
document.querySelector("p").style.backgroundColor = "red";
}
</script>
</body>
