1.绑定事件的三种方式
<input type="button" value="按钮1">
<input type="button" value="按钮2" οnclick="alert('按钮2')">
<input type="button" value="按钮3" οnclick="fun1(),fun2()">
<input type="button" value="按钮4">
? ??
<script>
? ? /*?
? ? ? ? 绑定事件（注册事件）：
? ? ? ? ? ? 1、传统方式：事件源.事件类型 = 事件处理函数
? ? ? ? ? ? ? ? ?同类型事件，只能绑定一次，绑定多次只认同最后一次
? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? 2、内联方式：在标签中写上事件类型 ? ?<标签 ? ?事件类型='代码/函数名()'>
? ? ? ? ? ? ? ? ? 同类型事件，可以绑定多次 ? ? ?<标签 ? ?事件类型='函数名1(),函数名2()'>
? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? 3、事件监听：事件源.addEventListener('事件类型',事件处理函数)
? ? ? ? ? ? ? ? ? 注意： 该方式的事件类型不能加on
? ? ? ? ? ? ? ? ? 同类型事件，可以绑定多次
? ? */
? ? var btn1 = document.querySelectorAll('input')[0]
?? ?// 传统方式绑定事件
? ? btn1.onclick = function () {
? ? ? ? alert('按钮1')
? ? }
? ? btn1.onclick = function () {
? ? ? ? alert('李三')
? ? }
? ? // ?定义函数fun1
? ? function fun1() {
? ? ? ? alert('按钮3')
? ? }
? ? function fun2() {
? ? ? ? alert('王五')
? ? }
? ? // ?获取事件源按钮4
? ? var btn4 = document.querySelectorAll('input')[3]
? ? // ?事件监听 多个绑定事件
? ? btn4.addEventListener('click', function () {
? ? ? ? alert('按钮4')
? ? })
? ? btn4.addEventListener('click', function () {
? ? ? ? alert('赵丽')
? ? })
</script>
2.传统方式解绑事件
<input type="button" value="按钮1">
<input type="button" value="按钮2">
<script>
? ? /*?
? ? ? ? ?传统方式解绑 ? ?元素.事件类型 = null ? ?给谁解绑元素就写谁
? ? */
? ??
? ? // ?按钮1：点击后弹窗：你好呀 ? ? ?点击按钮2用于给按钮1解绑单击事件，弹出解绑成功(点击按钮1，没反应)
? ? ? ? var btn1 = document.querySelectorAll('input')[0]
? ? ? ? btn1.onclick = function(){
? ? ? ? ? ? alert('你好')
? ? ? ? }
? ? ? ? var btn2 = document.querySelectorAll('input')[1]
? ? ? ? btn2.onclick = function(){
? ? ? ? ? ? // 给谁解绑就写谁
? ? ? ? ? ? btn1.onclick = null
? ? ? ? ? ? alert('按钮1解绑成功')
? ? ? ? }
? ? </script>
3.事件监听方式解绑事件
<input type="button" value="按钮1">
<input type="button" value="按钮2">
<script>
? ? /*?
? ? ? ? 事件监听方式解绑：
? ? ? ? ? ? 由于事件监听可以绑定多个处理函数，解绑可以解绑其中的一个
? ? ? ? ? ? 元素.removeEventListener('事件类型',事件处理函数名) 给谁解绑元素就写谁
? ? ? ? ? ??
? ? ? ? ? ? 注意： 解绑需要使用事件函数名，所以在绑定时尽量不使用匿名函数
? ? */
? ??
? ? // ?按钮1：点击后弹窗：你好呀 ? ? ?点击按钮2用于给按钮1解绑单击事件，弹出解绑成功(点击按钮1，没反应)
? ? ? ? var btn1 = document.querySelectorAll('input')[0]
? ? ? ? btn1.addEventListener('click',fun1)
? ? ? ? function fun1(){
? ? ? ? ? ? alert('你好')
? ? ? ? }
? ? ? ? // ?获取按钮2 ?绑定单击事件
? ? ? ? var btn2 = document.querySelectorAll('input')[1]
? ? ? ? btn2.addEventListener('click',function(){
? ? ? ? ? ? // ?按钮1解绑单击事件
? ? ? ? ? ? btn1.removeEventListener('click',fun1)
? ? ? ? ? ? alert('按钮1解绑成功')
? ? ? ? })
? ? </script>
4.事件解绑案例
?<input type="button" value="按钮1">
?<input type="button" value="按钮2">
?<script>
? ?/*?
? ? ?要求：
? ? ? ? ?给按钮1绑定两个单击事件；事件1：弹窗你好 ? 事件2弹出hello
? ? ? ? ?点击按钮2，给按钮1的第一个事件解绑
? ? ? ? ?也就是说： 解绑前可以弹两个，解绑后点击按钮1只能弹hello
? ?*/
? ? ?
? ? ?var btn1 = document.querySelectorAll('input')[0]
? ? ?var btn2 = document.querySelectorAll('input')[1]
? ? ?
? ? ?// ?btn1绑定两个单击事件： 使用事件监听
? ? ?// ?由于需要解绑，使用函数名 ? 所以在绑定时不要使用匿名函数
? ? ?btn1.addEventListener('click',fun1)
? ? ?function fun1(){
? ? ? ? ?alert('你好')
? ? ?}
? ? ?btn1.addEventListener('click',fun2)
? ? ?function fun2(){
? ? ? ? ?alert('hello')
? ? ?}
? ? ?// 点击btn2
? ? ?btn2.addEventListener('click',function(){
? ? ? ? ?// 给按钮1解绑 事件1
? ? ? ? ?btn1.removeEventListener('click',fun1)
? ? ? ? ?alert('按钮1的第一个事件解绑成功')
? ? ?})
?</script>