渡一 22 事件

 解决attachEvent的this指向问题

div.attachEvent("onclick",function(){
    handle.call(div);
})
function handle(){
    console.log(this)
}

addEventListener,attachEvent,elem.onclick的兼容问题

function addEvent(elem,type,handle){
    if(elem.addEventListener){
        elem.addEventListener(type,handle,false);
    }else if(elem.attachEvent){
        elem.attachEvent('on'+type,function(){
            handle.call(elem);
        })
    }else{
        elem['on'+type] = handle;
    }
}

取消事件

div.onclick = function(){
    console.log("a");
    this.onclick = null;
}

捕获，冒泡

<div class="wrapper">
    <div class="content">
        <div class="box"></div>
    </div>
</div>

wrapper.addEventListener("click",function(){
    console.log("wrapper")
},false);
content.addEventListener("click",function(){
    console.log("content")
},false);
box.addEventListener("click",function(){
    console.log("box");
},false)

//默认是冒泡：box content wrapper

查看捕获和冒泡的顺序

wrapper.addEventListener("click",function(){
    console.log("wrapperBubble")
},false);
content.addEventListener("click",function(){
    console.log("contentBubble")
},false);
box.addEventListener("click",function(){
    console.log("boxBubble");
},false)

wrapper.addEventListener("click",function(){
    console.log("wrapper")
},true);
content.addEventListener("click",function(){
    console.log("content")
},true);
box.addEventListener("click",function(){
    console.log("box");
},true)

//wrapper content boxBubble box contentBubble wrapperBubble
//同一个box就看事件定义的顺序

取消冒泡

document.onclick = function(){
    console.log("你闲的呀！")
}
div.onclick = function(e){
    e.stopPropagation();
}

function stopBubble(event){
    if(event.stopPropagation()){
        event.stopPropagation();
    }else{
        event.cancelBubble = true;
    }
}

阻止默认事件

document.oncontextmenu = function(e){
    console.log("a");
    cancelHandler()
}
function cancelHandler(event){
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
}

事件对象

ul.onclick = function(e){
    var event = e || window.event;
    var target = event.target || event.srcElement;
    console.log(target.innerText);
}

---------

事件分类

doucment.onclick = function(){
    console.log("click");
}
doucment.onmousedown = function(){
    console.log("mousedown");
}
doucment.onmouseup = function(){
    console.log("mouseup");
}

//mousedonw mouseup click

判断左右键

document.onmousedown = function(e){
    if(e.button == 2){
        console.log("right");
    }else if(e.button == 0){
        console.log("left");
    }
}

判断mousedown,click事件

var firstTime = 0,lastTime = 0,key = false;
document.onmousedown = function(){
    firstTime = new Date().getTime();
}
document.onmouseup = function(){
    lastTime = new Date().getTime();
    if(lastTime - firstTime < 300){
        key = true;
    }
}
document.onclick = function(){
    if(key){
        console.log("click");
        key = false;
    }
}

//ie里独有的获取焦点的方法
div.setCapture();div.releaseCapture();

//文本操作事件没有鼠标事件
input focus blur change

input.oninput = function(e){
    console.log(this.value);
}

事件练习-拖拽应用-mousedown mousemove mouseup

function drag(elem){
    var disX,
        disY;
    div.onmousedown = function(e){
        disX = e.pageX - parseInt(div.style.left);
        disY = e.pageY - parseInt(div.style.top);
        document.onmousemove = function(e){
            div.style.left = e.pageX - disX + "px";
            div.style.top = e.pageY - disY + "px";
        }
        document.onmouseup = function(){
            div.onmousemove = null;
        }
    }
}

function drag(elem){
    var disX,
        disY;
    addEvent(ele,"mosedown",function(e){
        var event = e || window.event;
        disX = event.clientX - parseInt(elem,"left");
        disY = event.clientY - parseInt(elem,"top");
        addEvent(document,"mousemove",mouseMove);
        addEvent(document,"mouseup",mouseUp);
        stopBubble(event);
        cancelHandler(event);
    });
    function mouseMove(e){
        var event = e || window.event;
        elem.style.left = event.clientX - disX + "px";
        elem.style.top = event.clientY - disY + "px";
    }
    function mouseUp(e){
        var event = e || window.event;
        removeEvent(document,"mousemove",mouseMove);
        removeEvent(document,"mouseup",mouseUp);
    }
}

键盘事件

document.onkeypress = function(){
    console.log("keypress");
}
document.onkeydown = function(){
    console.log("keydown");
}
document.onkeyup = function(){
    console.log("keyup");
}

document.onkeypress = function(e){
    console.log(String.fromCharCode(e.charCode));
}

input.oninput = function(e){
    console.log(this.value);
}

窗体操作类(window上的事件)
scroll load
小练习：fixed定位JS兼容版

domTree+cssTree = renderTree

练习
1.完成轮播图，加按钮
2.提取密码框的密码
3.输入框功能完善
4.菜单栏
5.贪吃蛇游戏
6.扫雷游戏