JavaScript事件驱动模型

1.事件驱动模型:

注:可以看做用户点击某个功能或者按钮,来产生一个onclick事件来触发某个函数;

2.事件驱动要素:

    1.事件源;
    2.事件(行为);
        例如:
            鼠标点击;
            鼠标悬浮于某个页面的某个热点之上;
            确认表单;
            在表单中选取输入框;

3.事件分类:

4.监听器:

1.IE中
        element.attachEvent(event, function); 添加

        element.detachEvent(event, function);//删除

  2.chrom ff
        element.addEventListener(event, function, useCapture);//添加

        element.removeEventListener(event, function, useCapture);//删除

5.事件对象(event对象)

    注:1.当事件发生时,只能在事件函数内部访问对象;
       2.处理函数后会自动销毁;    
           //event对象
        btn.onclick = function (e) {
            var ev = e || window.event;    //兼容性
       }
        var wrap = document.getElementById("wrap");
        wrap.onmousemove = function(e) {
            var ev = e || window.event;
            this.innerHTML = ev.type;
            //距离浏览器
            this.innerText = ev.clientX + " " + ev.clientY;
            //距离屏幕
            this.innerHTML = ev.screenX + " " + ev.screenY;
            //距离事件源
            this.innerHTML = ev.offsetX + " " + ev.offsetY;
            this.innerHTML = ev.layerX + " " + ev.layerY;

        };

6.keycod事件 键盘码:

        document.body.onkeydown = function(e) {
            var ev = e || window.event;
            //获取键盘码
           wrap.innerHTML = ev.keyCode;
            //altKey
               wrap.innerHTML = ev.altKey;
            //ctrlKey
            wrap.innerHTML = ev.ctrlKey;
            //shiftKey
            wrap.innerHTML = ev.shiftKey;
            console.log(ev.type);

        回车 = 13; alt = 18; 上 = 38; 右 = 39; 

        左 = 37; 下 = 40; Ctrl =17; shift = 16;
    当多个事件定同一个函数时,event.type 来判断在哪个事件用;