15 - JavaScript事件

事件流

1. 冒泡:从内到外
2. 捕获:从外到内

事件处理程序===》添加

1.HTML事件处理程序
	语法：把事件添加到了节点身上
	缺点：HTML和js耦合
	
2.DOM0级事件处理程序
	语法：box.onclick = function(){}
	缺点：同样的元素，同样的事件，后面的会覆盖前面
	
3.DOM2级事件处理程序
语法：box.addEventListener(事件名称,函数,false|true)
	参数1：不需要加on ===>click
	参数3: false代表了冒泡
		   true代表了捕获
	缺点：在IE（8或者8以下）不兼容
	
4.IE事件处理程序
    语法：box.attachEvent(事件名称,函数)
	 参数1》需要加入on
	 
5.跨浏览器事件处理程序(做兼容)
	DOM0事件处理程序
	DOM2事件处理程序
	IE事件处理程序

---

删除事件处理程序

dom0级事件处理程序删除===》
	语法：DOM对象.事件名称 = null


dom2级事件处理程序删除===》
	语法：DOM对象.removeEventListener(事件名称,函数,false|true)
	参数1.事件名称不需要加入on
	参数2.函数,添加和删除必须都是同一个函数，才有效
	参数3.false===>冒泡   true===》捕获


IE事件处理程序删除===》
	语法：DOM对象. attachEvent(事件名称,函数)
	参数1.事件名称需要加入on
	参数2.函数,添加和删除必须都是同一个函数，才有效

---

事件对象

非IE中事件对象====》参数	
IE中事件对象===》window.event
跨浏览器事件对象===》window.event || e（参数）

---

事件对象的属性

1.target(非IE)===》目标（返回对应的DOM节点）

2.srcElement（IE中）====》目标（返回对应的DOM节点）
	处理兼容： 事件对象.target||事件对象.srcElement

3.clientX 	===》返回当前鼠标位置距离浏览器左侧的值

4.clientY		===》返回当前鼠标位置距离浏览器顶部的值
	****注意：返回的结果是没有加入单位的

事件委托

	原理：冒泡的原理
	优点：
		1.性能较好（提高）
		2.即使后添加的也有效

一、

事件阻止冒泡

语法：
	 事件对象.属性名称
非IE：e.stopPropagation
E：e.cancelBubble = true;

事件阻止默认行为

语法：
	事件对象.属性名称
非IE：e.preventDefault()
IE：e.returnValue = false;

案例:小人快跑

var img = document.getElementById("img"),
    index = -1;

function fn(ve){
    index++;
    if(index>4){
        index = 0;
    }
    img.src = "images/" + ve + "-" + index + ".png";
}

document.onkeydown = function(e){
    var e = window.event || e;
    console.log(e.keyCode);

    switch(e.keyCode){
        case 37:
            img.style.left = img.offsetLeft - 10 + "px";
            fn("left")
            break;
        case 38:
            img.style.top = img.offsetTop - 10 + "px";
            fn("up")
            break;
        case 39:
            img.style.left = img.offsetLeft + 10 + "px";
            fn("right")
            break;
        case 40 :
            fn("down")
            img.style.top = img.offsetTop + 10 + "px";
            break;

    }
}

放大镜

var min = document.getElementById("min"),
    max = document.getElementById("max"),
    b = document.getElementsByTagName("b")[0],
    img = document.getElementById("img");

min.onmousemove = function(e){
    b.style.display = "block";
    max.style.display = "block";

    var x = e.clientX + document.documentElement.scrollLeft - min.offsetLeft - b.offsetWidth/2;
    var y = e.clientY + document.documentElement.scrollTop - min.offsetTop - b.offsetHeight/2;

    if(x<0){
        x=0
    }else if(x>min.offsetWidth-b.offsetWidth){
        x=min.offsetWidth-b.offsetWidth
    }
    
    if(y<0){
        y=0
    }else if(y>min.offsetHeight-b.offsetHeight){
        y=min.offsetHeight-b.offsetHeight
    }

    
    b.style.left = x + "px"; 
    b.style.top = y + "px" ; 
             
    img.style.left = -2*x+"px" 
    img.style.top = -2*y+"px"


}

min.onmouseout = function(){
    b.style.display = "none";
    max.style.display = "none";
}    

哒哒哒

var  ddd = document.getElementById("ddd")

document.onkeydown = function(e){
    
    var e = window.event || e;
    
    switch(e.keyCode){
        case 37:
            ddd.style.left = ddd.offsetLeft - 10 + "px";
        break;  
      
        case 38:
            ddd.style.top = ddd.offsetTop - 10 + "px";
        break;
              
        case 39:
            ddd.style.left = ddd.offsetLeft + 10 + "px";
        break;
              
        case 40:
            ddd.style.top = ddd.offsetTop + 10 + "px";
        break;
        
        case 32:
            game(ddd.offsetTop,ddd.offsetLeft + ddd.offsetWidth/2)
        break;
    }
}


function game(top,left){
    
    for(var i=0;i<5;i++){
        
        var pos = document.getElementById("pos"+i)
        
        console.log(i);
        
        if(pos.style.display == "none"){
            pos.style.display = "block";
            pos.style.left = left+"px";
            pos.style.top = top+"px";
            break;
        }   
    }
}

setInterval(function(){
    for(var i =0;i<5;i++){
        var pos = document.getElementById("pos"+i)
        pos.style.top = pos.offsetTop -10 + "px"
        if(pos.offsetTop<-1){
            pos.style.display = "none";
        }
    }
},50)

lalalalalala

属性		当以下情况发生时，出现此事件		FF	N	IE

onabort	图像加载被中断				1	3	4

onblur	元素失去焦点					1	2	3

onchange	用户改变域的内容			1	2	3

onclick	鼠标点击某个对象				1	2	3

ondblclick	鼠标双击某个对象			1	4	4

onerror	当加载文档或图像时发生某个错误	1	3	4

onfocus	元素获得焦点					1	2	3

onkeydown	某个键盘的键被按下			1	4	3

onkeypress	某个键盘的键被按下或按住	1	4	3

onkeyup	某个键盘的键被松开				1	4	3

onload	某个页面或图像被完成加载		1	2	3

onmousedown	某个鼠标按键被按下			1	4	4

onmousemove	鼠标被移动				1	6	3

onmouseout	鼠标从某元素移开			1	4	4

onmouseover	鼠标被移到某元素之上		1	2	3

onmouseup	某个鼠标按键被松开			1	4	4

onreset	重置按钮被点击				1	3	4

onresize	窗口或框架被调整尺寸		1	4	4

onselect	文本被选定				1	2	3

onsubmit	提交按钮被点击			1	2	3

onunload	用户退出页面