<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--<button onlclick="sayHello">确定</button> <!--ondbclick 鼠标点击两次-->
<!-- 如果希望点击按钮时会执行对应的操作 -->
<!-- 那么需要通过JavaSceipt为按钮绑定事件回调函数 -->
<!-- 绑定事件回调函数大致有三种方式: -->
<!--1. 通过标签的onXXX属性来指定需要执行的函数-->
<!--<script type="text/javascript">
function sayHello(){
alert("大家好！");
}
</script>
-->
<!-- 2.通过元素的onXXX属性来绑定需要执行的事件回调函数 -->
<!--<button id="ok">确定</button>
<script type="text/javascript">
var btn = document.getElementById("ok");
function sayHello(){
alert("大家好！")
}
btn.onclick = sayHello;
</script>-->
<!-- 3.通过元素的addEventListener方法来绑定事件回调函数 -->
<button id="ok">确定</button>
<script type="text/javascript">
var btn = document.getElementById("ok");
function sayHello(){
alert("大家好！")
}
function sayGoodbye(){
alert("再见!")
}
btn.addEventListener("click", sayHello);
btn.addEventListener("click", sayGoodbye);
btn.addEventListener("click", function(){
btn.removeEventListener("click", sayGoodbye)
});
</script>
</body>
</html>
JQ绑定事件的方法
// 拿到所有的a标签，全部绑定事件，并且自动解决浏览器兼容问题
$("#fruits>li>a").on("click", removerItem);
// 解除绑定事件
// $("#fruits>li>a").off()
// 拿到按钮标签
$("#ok").on("click", addItem)