DOM事件绑定

---

一、DOM0级别事件绑定

DOM0级别：DOM最早版本的事件绑定方式，被所有浏览器兼容

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

1. HTML绑定

<input type="button" id="btn" value="click me" onclick="show()"/>

2. JS绑定

document.getElementById('btn').onclick = show
function show() {
	console.log(1)
}

document.getElementById('btn').onclick = function () {
console.log(1)

JS绑定事件时，不能加()，否则会在页面加载时立即执行
可以绑定匿名函数

二、DOM2级别事件绑定

DOM2级别：添加了两个监听方法来添加和移除事件处理程序

1. addEventListener()
   第一个参数为事件名，不加on
   第二个参数为函数名，不加引号
   第二个参数为函数名，不加括号(）
   可以绑定匿名函数

document.getElementById( 'btn' ).addEventListener( 'click', show )
document.getElementById( 'btn' ).addEventListener( 'click' , function () {console.log(1)
})

2. removeEventListener()

document.getElementById( 'btn' ).removeEventListener( 'click', show)

无法移除匿名添加的函数

三、DOM0级事件和DOM2级事件区别

1. DOM0级事件只能绑定一个函数，前面绑定的函数会被覆盖

document.getElementById( 'btn' ).onclick = function() {
console.log(1)
}
document.getElementById( 'btn' ).onclick = function() {
console.log(2)
}
document.getElementById( 'btn' ).onclick = function() {
console.log(3)
}

运行结果如下图所示：

2. DOM2级事件只能可以绑定多个函数，且有执行顺序

document.getElementById( 'btn' ).addEventListener( 'click' , function (){
console.log( 'a' )
})
document.getElementById( 'btn' ).addEventListener( 'click' , function () {
console.log( 'b')
})
document.getElementById( 'btn' ).addEventListener( 'click', function () {
console.log( 'c' )
})

运行结果如下图所示：

1. DOM0级事件与DOM2级事件互不影响该处使用的url网络请求的数据。

function show() {
	console.log( 'show' )
}
document.getElementById( 'btn' ).addEventListener( 'click', show)
document.getElementById( 'btn' ).onclick = show

运行结果如下图所示：

4. DOM2级事件拥有事件流，分为三个阶段
   ① 捕获事件阶段
   ② 处于目标阶段
   ③ 事件冒泡阶段
   ④ 可通过第三个可选参数控制事件流

五、事件传参

情况一：无法绑定成功，加括号会直接执行

<input type="button" id="btn" value="click me"/>
document.getElementById( 'btn' ).onclick = foo( 'hello')

function foo(x) {
	console.log(x)
}

情况二：行内绑定，注意加引号

<input type="button" id="btn" value="click me" onclick="foo( 'hello' )" />

情况三：使用匿名函数

document.getElementById( 'btn' ).onclick = function() {
foo( 'hello' )
}

六、常用事件

---