event: 事件对象，当一个事件发生的时候，和当前这个对象发生的这个事件有关的一些详细信息都会被临时保存到一个指定的地方-event对象，供我们在需要的时候调用。
事件对象必须在一个事件调用的函数里面使用才有内容
事件函数：事件调用的函数，一个函数是不是事件函数，不在定义的时候决定，而是取决于谁调用这个函数。
function f1(){
alert(event);
}
f1();
document.onclick=f1;
//给一个对象绑定一个事件处理函数的第一种形式
注意兼容：ie/chrome ：event是一个内置的全局变量
标准下的浏览器:事件对象是通过事件函数的第一个参数传入的。（非标准浏览器ie 6 、7不支持，非标准支持event）；
如果一个函数是被事件调用的，那么，这个函数定义的第一个参数就是事件对象。下列案例中a就是事件对象
function f1(a){
alert(a);
}
document.onclick=f1;
兼容写法
function f1(a){
var a=a || event;
for(var attr in a){
console.log('属性：'+attr+'值：'+a[attr]);
}
}
document.onclick=f1;
clientX、clientY：当一个事件发生的时候，鼠标到页面可视区域的距离
var i=0;
document.onmousemove= function (ev) {
document.title=i++;
};
var div1=document.getElementById('div1');
document.onmousemove= function (ev) {
var ev=ev||event;
div1.style.left=ev.clientX+'px';
div1.style.top=ev.clientY+'px';
};
事件流~~~~
一.事件冒泡
当一个元素接收到事件的时候，会把他接收到的所有传播给他的父级，一直到顶层window，事件冒泡机制。
阻止冒泡:当前要阻止冒泡的事件函数中调用 ev.cancelBubble=true;
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
div{
padding: 40px;
}
#div1{
background: pink;
}
#div2{
background: yellow;
}
#div3{
background: yellowgreen;
}
</style>
<script>
window.onload= function () {
var div1=document.getElementById('div1');
var div2=document.getElementById('div2');
var div3=document.getElementById('div3');
div1.onclick=function(ev){
var ev=ev||event;
ev.cancelBubble=true;
alert(this.id);
};
div2.onclick=function(){
alert(this.id);
};
div3.onclick=function(){
alert(this.id);
};
};
</script>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
</body>
</html>
按钮点击的时候显示，点击任何地方消失
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
#div1{
width: 100px;
height: 200px;
border: 1px solid red;
display: none;
}
</style>
<script>
window.onload= function () {
var div1=document.getElementById('div1');
var btn=document.getElementById('btn');
btn.onclick= function (ev) {
var ev=ev||event;
ev.cancelBubble=true;
div1.style.display='block';
};
document.onclick= function () {
div1.style.display='none';
};
};
</script>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
<div id="div1"></div>
</body>
</html>
function fn1(){
alert(1)
}
function fn2(){
alert(2)
}
document.onclick=fn1;
document.onclick=fn2;
上面的绑定函数的时候是有一些问题的
为了解决这个问题，给一个对象同一个事件绑定多个不同的函数。
ie下：obj.attachEvent(事件名称，事件函数)；
1.没有事件捕获
2.事件名称中没有on
3.事件执行顺序 非标准->倒序
4.this指向window
function fn1(){
alert(1)
}
function fn2(){
alert(2)
}
document.attachEvent('onclick',fn1);
document.attachEvent('onclick',fn2);
// document.attachEvent('onclick', function () {
// fn1.call(document);
// })
2.标准下 document.addEventListener(事件名称，事件函数，是否捕获)
1.有捕获
2.事件名称中没有on
3.事件执行是正序
4.this指向该触发事件的对象
//第三个参数:是否捕获（默认是false） false：冒泡 true：是捕获
document.addEventListener('click', fn1,false);
document.addEventListener('click', fn2,false);
call(),函数下的一个方法，call方法第一个参数可以改变函数执行过程中的内部this指向,call方法第二个参数开始就是原来函数的参数列表
function a(){
alert(this);
}
// a();
a.call(); //a()==a.call()
// a.call(1)
function fn(a,b){
alert(this);
alert(a+b);
}
fn.call(1,10,20);
// fn.call(null,10,20); 不改变原来的指向
封装的函数addEventListener和attachEvent调兼容
<script>
function fn1(){
alert(this);
}
function fn2(){
alert(2);
}
function getfn(obj,evname,fn){
if(obj.addEventListener){
return obj.addEventListener(evname,fn,false);
}else{
return obj.attachEvent('on'+evname, function () {
fn.call(obj);
})
}
}
getfn(document,'click',fn1);
</script>
二.事件捕获
在绑定事件中，标准下浏览器是有事件捕获的，非标准无事件捕获。
addEventListener(事件名称，事件函数，是否捕获’)
第三个参数:是否捕获（默认是false） false：冒泡 true：是捕获
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
div{
padding: 40px;
}
#div1{
background: pink;
}
#div2{
background: yellow;
}
#div3{
background: yellowgreen;
}
</style>
<script>
window.onload= function () {
var div1=document.getElementById('div1');
var div2=document.getElementById('div2');
var div3=document.getElementById('div3');
function fn(){
alert(this.id);
}
// div3.onclick=fn;
// div2.onclick=fn;
// div1.onclick=fn;
// false=冒泡
// 告诉div1，如果有一个出去的事件触发了你，你就去执行这个函数
// div1.addEventListener('click',fn,false);
// div2.addEventListener('click',fn,false);
// div3.addEventListener('click',fn,false);
//true 事件捕获
//告诉div1，如果有一个进去的事件触发了你，你就去执行这个函数
// true和false就是监听是进来的一项还是出去的一项
div1.addEventListener('click',fn,true);
div2.addEventListener('click',fn,true);
div3.addEventListener('click',fn,true);
};
</script>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
</body>
</html>
取消事件的绑定函数
1.事件绑定形式的取消
function fn1(){
alert(1);
}
function fn2(){
alert(2);
}
document.onclick=fn1;
document.onclick=null;
ie：detachEvent
标准下：removeEventListener
function fn1(){
alert(1);
}
function fn2(){
alert(2);
}
// document.attachEvent('onclick',fn1);
// document.attachEvent('onclick',fn2);
// document.detachEvent('onclick',fn1);
document.addEventListener('click',fn1,false);
document.addEventListener('click',fn2,false);
document.removeEventListener('click',fn1,false);
