JavaScript 事件

文章目录

1. 1. 事件的绑定
2. 2. 事件的解除
3. 3. 事件处理模型
4. 4. 取消事件冒泡
5. 5. 默认事件
6. 6. 事件源兼容性获取方法
7. 7. 事件委托机制
8. 8. 拖拽事件封装
9. 9. 鼠标事件
10. 10. 键盘事件
11. 11. 文本框事件
12. 12. window事件

事件的绑定

• 兼容性很好，但是一个元素的同一事件只能绑定一个，基本等同于写在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");
});

绑定事件兼容性封装

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

事件解除的封装

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里面