事件的绑定
首先javaScript绑定事件的方式有三种
- ele.onxxx = function (event) {}
上面的xxx是事件类型不需要首字母大写, 这个绑定的方式兼容性很好，但是一个元素只能绑定一个处理程序，也就是一个事件只能同时绑定一个function
- obj.addEventListener(type, fn, false)
上面的type是字符串类型的事件类型, 但是它在IE9以下不兼容, 它和第一种方式不同的是它可以为同一个事件绑定多个function，并且按照绑定的顺序执行function, 但是绑定的必须是不同的函数引用,如果绑定多个相同引用的事件，那么相当于只绑定了一个function
- obj.attachEvent(‘on’ + type, fn)
这个是IE独有的方法,它基本和第二个方法一样，唯一不同的是如果绑定的多个function是同一个函数引用，那么结果仍然是按照顺序执行多个绑定了的函数
事件的绑定的运行环境this
对于第一二中方法中，被绑定的的函数的内部的this指向的是当前的ele对象, 而对于第三种绑定方法中，它的this指向的是window。如果我们想改变回掉函数的this指向，可以通过下面这种方式来实现（这里以把第三种方法的this变为当前ele为例）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="div">西南科技大学</div>
</body>
<script>
var div = document.getElementsByTagName('div')[0]
div.attachEvent('onclick', function () {
test.call(div)
})
function test () {
}
</script>
</html>解除事件绑定
- ele.onclick = false/‘’/null
- ele.removeEventListener(type, fn, false)
- ele.detachEvent(‘on’ + type, fn)
注意如果绑定的是匿名函数，那么无法解除引用，意思就是绑定和解除传入的必须是同一个函数的引用
注意:
- 注意循环绑定事件的时候的闭包问题
- 在html元素行间上写onxxx事件可以直接写执行语句, 例如 <div onClick= "console.log('cscs')"/>