1. html事件(html级事件)
描述：绑定发生在html代码中的事件，称为html事件
语法：on+事件名 = '函数名1();函数名2();...';
注意：
(1)所有html事件都采用冒泡传递
(2)函数执行顺序按照顺序为准
(3)绑定多个函数的时候，函数应当采用分号隔开，而不是以分号结尾
移除：on+事件名 = null;
弊端：
(1)耦合性太强
(2)如果绑定函数未能正确加载，则会触发事件的时候报错
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>非IE下的事件绑定</title>
<style type="text/css">
.div1{
width: 200px;
height: 200px;
background-color: skyblue;
}
.div2{
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2" onclick="func1();func2();func3()"></div>
</div>
</body>
<script type="text/javascript">
var div1 = document.querySelector('.div1');
var div2 = document.querySelector('.div2');
//html事件
function func1(){
console.log('这是第1个函数');
};
function func2(){
console.log('这是第2个函数');
};
function func3(){
console.log('这是第3个函数');
};
//移除html事件
function func1(){
console.log('这是第1个函数');
div2.setAttribute('onclick','null');
};
</script>
</html>代码运行效果如下：
2. DOM0事件(dom0级事件)
描述：在脚本中通过on+事件名方式绑定的事件，称为dom0事件
语法：元素节点.on+事件名 = function(){
执行语句;
};
注意：
(1)dom0方式绑定的事件均为冒泡事件
(2)dom0方式只能给一个元素节点，一个事件绑定一个执行函数
如果给一个事件绑定多个执行函数，则取最后绑定的函数为准
移除：on+事件名 = null;
弊端：一次只能给一个事件绑定一个函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>非IE下的事件绑定</title>
<style type="text/css">
.div3{
width: 200px;
height: 200px;
background-color: green;
}
.div4{
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="div3">
<div class="div4"></div>
</div>
</body>
<script type="text/javascript">
var div3 = document.querySelector('.div3');
var div4 = document.querySelector('.div4');
//DOM0事件
div4.onclick = function(){
console.log('div4被点击了');
};
div4.onclick = function(){
console.log('div4又被点击了');
};
//移除DOM0事件
div4.onclick = function(){
console.log('div4的点击事件被移除');
div2.onclick = null;//移除点击事件，不是移除这个绑定函数
};
</script>
</html>代码运行效果如下：
3. DOM2事件(dom2级事件)
描述：在脚本中通过addEventListener函数绑定事件，称为dom2事件
语法：元素节点.addEventListener('type',listenFunc,useCapture);
参数：
(1)第一个参数表示绑定事件的类型，没有on！是个字符串！
(2)第二个参数表示监听函数，就是事件发生的时候执行的函数
(3)第三个参数表示是否采用捕获机制，默认不写和false都代表冒泡机制，true代表捕获
注意：
(1)dom2事件允许绑定多个执行函数，并且执行顺序按照绑定顺序执行
(2)Chrome1.0、Firefox1.0、Safari1.0、IE9.0、Opera7.0才开始支持addEventListener()和
removeEventListener()方法。对于不支持该函数的浏览器，可以使用attachEvent()方法和
detachEvent()方法添加和移除事件
移除：通过removeEventListener函数移除绑定事件
元素节点.removeEventListener('type',外部函数名，useCapture);
注意：
(1)匿名函数无法移除，如果dom2事件想要移除，则必须通过外部函数名进行绑定事件
(2)移除事件的函数名要与添加事件的函数名一致，否则无效
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>非IE下的事件绑定</title>
<style type="text/css">
.div1{
width: 200px;
height: 200px;
background-color: lightcyan;
}
.div2{
width: 100px;
height: 100px;
background-color: darkcyan;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
<script type="text/javascript">
var div1 = document.querySelector('.div1');
var div2 = document.querySelector('.div2');
//dom2事件
div2.addEventListener('click', function () {
console.log('div2的dom2事件函数1');
});
div2.addEventListener('click', function () {
console.log('div2的dom2事件函数2');
});
div2.addEventListener('click', function () {
console.log('div2的dom2事件函数3');
});
//采用捕获机制
div2.addEventListener('click', function () {
console.log('div2的dom2事件');
},true);
div1.addEventListener('click', function () {
console.log('div1的dom2事件');
},true);
//移除dom2事件
function func(){
console.log('div2的dom2事件函数');
div2.removeEventListener('click',func);
};
div2.addEventListener('click',func);
</script>
</html>代码运行效果如下：
