JavaScript事件02——事件处理程序
大纲：
- 概念（事件处理程序）
- 事件处理程序（HTML事件，DOM0级，DOM2级，IE事件，跨浏览器）
一、概念：
1、事件：
事件就是用户或浏览器自身执行的某种动作。比如click，load等
2、事件处理程序：
响应某个事件的函数就叫事件处理程序（或事件侦听器）。事件处理程序的名字以“on”开头。所以，click是事件处理程序就是onclick
二、事件处理程序
1、HTML事件处理程序
- 什么是HTML事件处理程序？
简单的说，就是事件处理程序放在HTML标签中的。
- 两种方式：
直接在HTML标签里调用脚本
<input type="button" value="按钮" onclick="alert('点击')">
直接在HTML标签里调用其他地方定义的脚本
<body>
<div>
<input type="button" value="按钮" onclick="showName()">
</div>
</body>
<script type="text/javascript">
function showName(){
alert('bree')
}
</script>
- 缺点：
HTML和js代码紧密的耦合在一起，一旦需要修改，JS代码和HTML都需要修改
2、DOM0级事件处理程序
- 什么是DOM0级事件处理程序：
就是将一个函数赋值给一个事件处理程序属性。比较传统的方式
- 思路：
1、给按钮设置id为btn
2、获取btn，给btn绑定onclick属性
- 例子：
绑定DOM0级事件处理程序
<body>
<div>
<input type="button" value="按钮" id="btn">
</div>
</body>
<script type="text/javascript">
var btn = document.getElementById('btn');
//给btn绑定onclick属性
btn.onclick= function(){
alert('这是DOM0级事件处理程序')
}
</script>
删除DOM0级事件处理程序
btn.onclick = null;
3、DOM2级事件处理程序
- 两个方法：
1、addEventListener(type，fn，false/true) 用来添加事件
2、removeEventListener(type，fn，false/true) 用来删除事件
- 参数说明：
1、type:事件名字
2、fn：作为事件处理程序的函数
3、布尔值，false代表事件冒泡，true代表事件捕获
- 思路：
1、先获取btn
2、给btn绑定addEventListener()
- 例子：
使用addEventListener()方法绑定click事件
<body>
<div>
<input type="button" value="按钮" id="btn">
</div>
</body>
<script type="text/javascript">
var btn = document.getElementById('btn');
btn.addEventListener("click",function(){
alert('这是DOM2级事件处理程序')
},false)
</script>
使用removeEventListener()方法移除click事件
var btn = document.getElementById('btn');
btn.addEventListener("click",function(){
alert('这是DOM2级事件处理程序')
},false)
btn.removeEventListener("click",function(){
alert('这是DOM2级事件处理程序')
},false)
上面移除事件并没有效果，这是因为removeEventListener()方法里的函数和addEventListener()方法里的函数并不是同一个函数。
声明一个函数showInfo，把函数名传入两个方法内，这样就解决了
<body>
<div>
<input type="button" value="按钮" id="btn">
</div>
</body>
<script type="text/javascript">
function showInfo(){
alert('这是DOM2级事件处理程序')
}
var btn = document.getElementById('btn');
btn.addEventListener("click",showInfo,false)
btn.removeEventListener("click",showInfo,false)
</script>
- 注意：
DOM0级和DOM2级都可以在同一个元素上，绑定多个事件处理程序，但是DOM0级的新绑定的会覆盖前一个绑定的事件
<body>
<div>
<input type="button" value="按钮" id="btn">
</div>
</body>
<script type="text/javascript">
function showInfo(){
alert('这是DOM2级事件处理程序')
}
var btn = document.getElementById('btn');
btn.addEventListener("click",showInfo,false)
btn.addEventListener("click",function(){
alert('hello')
},false)
</script>
1、IE9+的浏览器已经支持DOM2级事件，也就是说支持addEventListener()方法和removeEventListener()方法
2、但是IE8之前的浏览器并不支持DOM2级事件，他们有自己的事件处理程序，即IE事件处理程序
4、IE事件处理程序
- 两个方法：
1、attachEvent(type，fn) 添加事件
2、detachEvent(type，fn) 删除事件
3、这里并没有第三个参数，是因为IE8之前的浏览器只支持事件冒泡
- 思路：
给btn绑定attachEvent()方法
- 例子：
绑定事件：第一个参数要加"on"
<body>
<div>
<input type="button" value="按钮" id="btn">
</div>
</body>
<script type="text/javascript">
function showInfo(){
alert('这是IE事件处理程序')
}
var btn = document.getElementById('btn');
btn.attachEvent("onclick",showInfo)
</script>
删除事件
btn.detachEvent("onclick",showInfo)
- 注意：
1、第一个参数要加on，即不是click，而是onclick
2、addEventListener。IE9+支持，IE8之前不支持。
3、attachEvent。只有IE和Opera支持，现在IE11也不支持了
5、跨浏览器的事件处理程序
- 什么是跨浏览器事件处理程序：
因为IE浏览器和其他浏览器的不同，我们需要兼容浏览器
- 思路：
1、封装一个对象EventUtil
2、创建两个方法，一个添加，一个删除
3、在这个方法里判断，各浏览器支持什么方法就用什么方法
- 例子：
<body>
<div>
<input type="button" value="按钮" id="btn">
</div>
</body>
<script type="text/javascript">
function showName(){
alert('bree')
}
var EventUtil = {
//添加事件
addHandler:function(ele,type,fn){
//DOM2级事件
if(ele.addEventListener){
ele.addEventListener(type,fn,false);
//IE事件
}else if(ele.attachEvent){
ele.attachEvent("on"+type,fn)
//DOM0级事件
}else{
ele["on"+type] = fn
}
},
//删除事件
removeHandler:function(ele,type,fn){
//DOM2级事件
if(ele.removeEventListener){
ele.removeEventListener(type,fn,false);
//IE事件
}else if(ele.detachEvent){
ele.detachEvent("on"+type,fn)
//DOM0级事件
}else{
ele["on"+type] = null
}
}
}
var btn = document.getElementById('btn');
EventUtil.addHandler(btn,"click",showName);
EventUtil.removeHandler(btn,"click",showName)
</script>
