JavaScript 事件

事件的绑定

• 兼容性很好，但是一个元素的同一事件只能绑定一个，基本等同于写在HTML行间上

div.onclick = function ()

• IE9以下不兼容,可以为一个事件绑定多个处理函数，不能同一个函数绑定多次 this指向div

div.addEventListener("click", function () {
           console.log("a");
}, false);

• ie9用的，可以绑定多个处理函数，或多个相同的处理函数 this指向window

div.attachEvent("onclick",function(){
   console.log("a");
});

绑定事件兼容性封装

/**
 * 给任意元素绑定事件
 * @param {任意元素} elem 
 * @param {事件类型} type 
 * @param {处理函数} handle 
 */
function addEvent(elem, type, handle) {
    if (elem.addEventListener) {
        elem.addEventListener(type, handle, false);
    } else if (elem.attachEvent) {

        elem.attachEvent('on' + type, function () {
            //为了把this指向的window，改成this指向elem
            handle.call(elem);
        })
    } else {
        elem['on' + type] = handle;
    }
}

事件的解除

• 直接赋值方法

div.onclick=null;

• 方法解除

div.removeEventListener('click',函数写到外面可以清除,false);

• ie9的解除

div.detachEvent('onclick',fn);

事件解除的封装

/**
 * 删除事件
 * @param {*} elem 
 * @param {*} type 
 * @param {*} handle 
 */
function removeEvent(elem, type, handle) {
    if (elem.removeEventListener) {
        elem.removeEventListener(type, handle, false);
    } else if (elem.detachEvent) {
        elem.detachEvent("on" + type, handle);
    } else {
        elem["on" + type] = null;
    }
}

事件处理模型

• 事件冒泡：结构上(非视觉上)嵌套关系的元素,会存在冒泡的功能,即同一事件,自子元素冒向父元素   focus blur change submit reset select没有冒泡

<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);

• 事件捕获：结构上(非视觉上)嵌套关系的元素,会存在事件捕获事件,子父元素捕获至子元素 ie没有事件捕获

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

触发顺寻 先捕获后冒泡 当前点击的为事件执行按照绑定顺序执行

取消事件冒泡

• w3c：e.stopPropagation();
• ie：e.cancelBubble=true;

默认事件

• 右键菜单事件

document.oncontextmenu=function(e){
       // 禁止右键菜单事件
            1、return false;
            2、e.preventDefault(); //w3c标准
}

• a href="javascript:void(0)" 相当于return false 禁止默认事件

事件源兼容性获取方法

事件兼容性写法 var event= e|| window.event;

事件源兼容性写法 var target = event.target || event.srcElement

事件委托机制

var ul = document.getElementsByTagName("ul")[0];  //事件委托机制   性能高
ul.onclick = function (e) {
var event = e || window.event;
var target = event.target || event.srcElement;
    console.log(target.innerText);
}

拖拽事件封装　　

/**
 * 拖拽实现
 * @param {需要拖拽的元素} elem 
 */
function drag(elem) {
    var disX,
        disY;
    addEvent(elem, 'mousedown', function (e) {
        var event = e || window.event;
        disX = event.clientX - parseInt(getStyle(elem, 'left'));
        disY = event.clientY - parseInt(getStyle(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);
    }
}

鼠标事件

click、mousedown、mouseup

click = mousedown+mouseup

 

mouseover、mouseout //进入区域 离开区域

mouseenter、mouseleave //进入区域 离开区域

 

区分左右键 mousedown mouseup e.button ==2 right e.button==0 left

 

dom3 click只监听左键

键盘事件

keydown、keyup、keypress

keydown > keypress > keyup

keydown 可以监测所有键

keypress 只返回有asii表的按键， (String.fromCharCode(e.charCode))

文本框事件

input 里面有变化就会触发

change 聚焦和失去焦点 变化触发

focus

blur

window事件

load

1、 浏览器渲染 过程 先domtree csstree rendertree

2、load 渲染过程完成执行 所有下载完成 尤其有大的图片下载的时候，load效率会很低   主程序不可以放load里面