目录
1.ele.on xxx = function(event){}
2.dom.addEventListener(‘事件类型‘,处理函数,false);
3.dom.attachEvent('on'+ 事件类型 , 处理函数);
一.绑定事件处理函数
1.ele.on xxx = function(event){}
可直接看下面例子,就是一个触发事件
<body>
<div style="width:100px;height:100px;background-color:red"></div>
<script>
var div = document.getElementsByTagName('div')[0];
div.onclick=function(){
console.log('a');
}
</script>
</body>
这个例子就是在 div 绑定了一个事件处理函数,也是一种绑定函数的方法。兼容性很好,但是会产生属性覆盖,即一个对象的一个事件只能绑定一个处理函数,如下,只会打印 b
div.onclick=function(){
console.log('a');
}
div.onclick = function(){
console.log('b');
}
而且这种绑定函数方式和直接写在 html里面是相同的(句柄的方式),如下代码:
<div style="width:100px;height:100px;background-color:red";
onclick="console.log('a')"></div>
<script>
var div = document.getElementsByTagName('div')[0];
// div.onclick=function(){
// console.log('a');
//}
</script>
2.dom.addEventListener(‘事件类型‘,处理函数,false);
- IE9以下不兼容,可以为一个事件绑定多个处理程序(W3C标准)
- 绑定同一个处理函数多次,不能执行多次
- 第三个参数指定事件是否在捕获或冒泡阶段执行
代码如下:
<body>
<div style="width:100px;height:100px;background-color:red"></div>
<script>
var div = document.getElementsByTagName('div')[0];
div.addEventListener('click',function(){
console.log('a');
},false)
</script>
</body>
以下代码可打印2个‘a’
<script>
var div = document.getElementsByTagName('div')[0];
div.addEventListener('click',function(){
console.log('a');
},false)
div.addEventListener('click',function(){
console.log('a');
},false)
</script>
以下代码只执行一次
<script>
var div = document.getElementsByTagName('div')[0];
div.addEventListener('click',test,false)
div.addEventListener('click',test,false)
function test(){
console.log('a');
}
</script>
3.dom.attachEvent('on'+ 事件类型 , 处理函数);
- IE独有,一个事件同样可以绑定多个处理程序
- 绑定同一个处理函数多次,可以执行多次
- 示例:dom.attachEvent('onClick',function(){});
二.事件处理模型
1.事件冒泡
- 结构上(非视觉上)嵌套的元素,会存在事件冒泡功能,也就是说,同一事件,子元素会向父元素冒泡(自底向上)
如下代码:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrapper{
width: 300px;
height: 300px;
background-color: red;
}
.content{
width: 200px;
height: 200px;
background-color: green;
}
.box{
width: 100px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">
<div class="box"></div>
</div>
</div>
<script>
var wrapper = document.getElementsByClassName('wrapper')[0];
var content = document.getElementsByClassName('content')[0];
var box = document.getElementsByClassName('box')[0];
wrapper.addEventListener('click',function(){console.log('wrapper')},false);
content.addEventListener('click',function(){console.log('content')},false);
box.addEventListener('click',function(){console.log('box')},false);
</script>
</body>
效果如下:
点击红色,打印 wrapper
点击绿色,打印 content,wrapper
点击黄色,打印 box,content,wrapper
这里冒泡的意思不是视觉上,而是代码层面,如下,点击到box时,会逐渐往外冒泡到父元素;
<div class="wrapper">
<div class="content">
<div class="box"></div>
</div>
</div>
把style该成如下:
.wrapper{
width: 300px;
height: 300px;
background-color: red;
}
.content{
margin: 300px;
width: 200px;
height: 200px;
background-color: green;
}
.box{
margin: 200px;
width: 100px;
height: 100px;
background-color: orange;
}
点击黄色图形区时,仍会打印:box,content,wrapper;这也证明这是非视觉上的冒泡
2.事件捕获
结构上存在嵌套的元素,会存在事件捕获,即同一事件,自window捕获至子元素(事件源元素)(自顶向下)
触发条件:ele.addEventListener(type, fn, true)
注:一个事件模型只能拥有一种事件处理模型,即要么冒泡,要么捕获(若绑两个,先捕获,后冒泡),事件捕获只在Google Chrome上好使;
把上面的代码中 false 改成 ture 即改成事件捕获;
wrapper.addEventListener('click',function(){console.log('wrapper')},true);
content.addEventListener('click',function(){console.log('content')},true);
box.addEventListener('click',function(){console.log('box')},true);
点击黄色区域,log打印 wrapper,content,box;跟冒泡相反;
3.取消冒泡
3.1 event.stopPropagation();
注:IE9以下不支持
<script>
var wrapper = document.getElementsByClassName('wrapper')[0];
var content = document.getElementsByClassName('content')[0];
var box = document.getElementsByClassName('box')[0];
wrapper.addEventListener('click',function(){console.log('wrapper')},false);
content.addEventListener('click',function(){console.log('content')},false);
</script>
上面代码执行后,点击黄色区域,log打印 content,box;
若加上取消冒泡,则log不打印任何东西;
<script>
var wrapper = document.getElementsByClassName('wrapper')[0];
var content = document.getElementsByClassName('content')[0];
var box = document.getElementsByClassName('box')[0];
wrapper.addEventListener('click',function(){console.log('wrapper')},false);
content.addEventListener('click',function(){console.log('content')},false);
box.onclick = function(e){
e.stopPropagation();
}
</script>