javascript基础六（事件对象）

Posted 2021-03-26 猛猛滴超人

 

1.事件驱动

    js控制页面的行为是由事件驱动的。

    

    什么是事件？（怎么发生的）

    　　事件就是js侦测到用户的操作或是页面上的一些行为

 

    事件源（发生在谁身上）

    　　引发事件的元素

 

    事件处理程序（发生了什么事）

    　　对事件处理的程序或函数

 

    事件对象（用来记录发生事件时的相关信息）

   　　 只有在事件发生的时候，才会产生事件对象，无法手动创建，并且事件对象只能在处理函数内部访问，处理函数允许结束后该对象自动销毁

 

    事件的分类：

    鼠标事件：

        onclick        单击

        ondblclick     双击

        onmousedown    按下

        onmouseup      抬起

        onmousemove    移动

        onmouseover    放上去        onmouseenter    进入

        onmouseout     离开          onmouseleave    离开

 

        onmousewheel   滚轮事件

        onmouseenter和onmouseleave不支持事件冒泡

        

    表单事件：

        onsubmit       提交

        onfocus        获得焦点

        onblur         失去焦点

        onchange       改变文本区域的内容

 

    页面事件：

        onload         加载完成

。。。

    

 

    在W3C标准中：事件可以写在行内，但是因为结构和行为要分离，所以我们一半情况下用JS的方法来绑定事件，只有在极少数情况下，才将事件写在行内。

    行内事件又叫：html事件处理程序

    

 

    事件的绑定方法：

 

    浏览器中的节点(节点).on事件名 = function(){ 要干什么？(放在浏览器中，不执行，当事件发生的时候再执行) }

 

    总结：事件就是给浏览器定义一个预处理函数，当事件触发的时候，执行函数，这就是事件。

 

2.事件对象的概念和作用

    1.事件有对象！叫事件对象(event)

    2.事件对象是浏览器给的

    3.事件对象不叫不出来

 

    什么是event事件对象？

    　　用来记录一些事件发生时的相关信息的对象，每次事件发生的时候，会在函数或方法内部产生一个事件对象，这个事件对象就是event。

 

    特征：

        1.只有当事件发生的时候才会产生，只能在处理函数内部访问

        2.处理函数运行结束后自动销毁

    

  

3.获取方式（兼容问题）

 

    如何获取event事件？

   　　 事件对象需要作为参数传入事件。

 

    function fn(event){
        console.log(event)
    }
    //或者
    function(){
        console.log(arguments[0])
    }

 

    

    缺德定律再现！

    IE中：          window.event

    正常浏览器中：    对象.on事件 = function(event){}

 

    兼容方式：

    function fn(eve){
        var e = eve || window.event;
    }
 
    
   document.onclick = function(eve){
       var e = eve || window.event;
       console.log(e);
   }

 

   注意：event需要逐层传递，不要疏忽外部的function

 

 

4.鼠标事件常用属性介绍

 

    检测按下的鼠标按键：event.button

    返回值为0，左键；返回值为1，中键；返回值为2，右键

 

    检测相对于浏览器的位置：clientX和clientY

    当鼠标事件发生时，鼠标相对于浏览器左上角的位置

    

    检测相对于文档的位置：pageX和pageY

    当鼠标事件发生时，鼠标相对于文档左上角的位置。（IE7/8无）（类似于event.clientX和event.clientY）

 

    检测相对于屏幕的位置：screenX和screenY

    当鼠标事件发生时，鼠标相对于屏幕左上角的位置

 

    检测相对于事件源的位置：offsetX和offsetY

    当鼠标事件发生时，鼠标相对于事件发生元素左上角的位置

 

 

5.键盘事件（keyup／keydown／keypress）

    键盘事件：

        onkeydown      键盘按下

        onkeyup        键盘抬起

        onkeypress     按下并抬起数字字母按键

 

    event.keyCode        返回当前按键的ASCII码

 

        空格    32

        回车    13

        左      37

        上      38

        右      39

        下      40

 

    兼容问题：  var eve = eve || window.event

              var keyC = eve.keyCode || eve.which

 

    案例：通过键盘上下左右，控制页面中的元素位置移动

 

 

    ctrlKey        判断ctrl是否被按下，按下返回true

    shiftKey       判断shift是否被按下，按下返回true

    altKey         判断alt是否被按下，按下返回true

 

 

6.事件的冒泡

    事件流：事件执行顺序我们叫他事件流。

    事件流中事件冒泡的由来：IE公司认为，如果你面前有个靶子，你的飞镖射中了其中一环，并不仅仅是只对这一环产生了操作，而是对整个靶子都产生了操作。

 

    所以，当最里面的元素触发了事件的时候，会依次向上触发所有元素的相同事件（从触发事件的元素开始一直向上触发），但是事件冒泡对我们几乎没有任何好处，所以我们需要阻止事件冒泡。

 

    怎么可能被你轻易阻止，缺德定律再次登场！

 

    eve.stopPropagation();            

    eve.cancelBubble = true;        //兼容IE

 

 

7.浏览器的默认行为，如何阻止

    就是浏览器自己触发的事件。比如：a链接的跳转，form提交时的跳转，鼠标右键菜单。

 

    oncontextmenu    鼠标右键事件

 

    当触发鼠标的右键事件时，会弹出右键菜单，这就是默认事件情况之一

 

 

    如何阻止默认事件？

    e.preventDefault();
    window.event.returnValue = false;

 

    处理兼容方式

    if( e.preventDefault ){
        e.preventDefault();
    }else{
        window.event.returnValue = false;
    }
 
return false

 

 

8.鼠标拖拽效果（onmousedown／onmousemove／onmouseup）

    拖拽分解：

        按下鼠标 ----> 移动鼠标 ----> 松开鼠标

 

 

    1.给目标元素添加onmousedown事件，拖拽的前提是在目标元素按下鼠标左键

 

    2.当onmousedown发生以后，此刻给document添加onmousemove事件，意味着此刻鼠标在网页的移动都将改变目标元素的位置

 

    3.在onmousemove事件中，设定目标元素的left和top，

    公式

    目标元素的left = 鼠标的clientX – （鼠标和元素的横坐标差，即offsetX）

    目标元素的top = 鼠标的clientY– （鼠标和元素的纵坐标差，即offsetY）

 

    4.当onmousedown发生以后，此刻给document添加onmouseup事件，意味着此刻鼠标在网页的任意位置松开鼠标，都会放弃拖拽的效果

    在onmouseup事件中，取消document的onmousemove事件即可。

 

 

9.事件监听器（兼容）

    事件触发阶段主要由于事件流：DOM0级事件处理阶段和DOM2级事件处理；

 

    DOM0级事件处理，是一种赋值方式，是被所有浏览器所支持的，简单易懂容易操作；

        元素.onclick = function(){}

 

    DOM2级事件处理是所有DOM节点中的方法，可以重复绑定，但是浏览器兼容存在问题；

 

    非IE下：(这里的事件名不带on),第三个参数表示是在捕获阶段还是冒泡阶段。可以重复绑定事件，执行顺序按照绑定顺序来执行。

 

    oDiv.addEventListener(‘click‘,fn,false);
    oDiv.removeEventListener(‘click‘,fn ,false);

 

    IE下：

 

    只有冒泡阶段,所以没有第三个参数；（这里的事件名需要加on）

    oDiv.attachEvent()；

    oDiv.detachEvent() ;

 

冒泡：从下往上（从里往外）

捕获：从上往下（从外往内）

 

    兼容问题解决：

1.封装成对象的方式

    var EventUtil={
        addHandler:function(DOM,EventType,fn){
            if(DOM.addEventListener){
                DOM.addEventListener(EventType,fn,false);
            }else if(DOM.attachEvent){
                DOM.attachEvent(‘on‘+EventType,fn)
            }else{
                DOM[‘on‘+EventType]=fn
            }
        },
        removeHandler:function(DOM,EventType,fn){
            if(DOM.removeEventListener){
                DOM.removeEventListener(EventType,fn,false)
            }else if(DOM.detachEvent){
                DOM.detachEvent(‘on‘+EventType,fn)
            }else{
                DOM[‘on‘+EventType]=null;
            }
        }
    } 

 

2.封装成两个函数的方式

    function addEvent(obj,inci,back){
        if(obj.addEventListener){
            obj.addEventListener(inci,back);
        }else if(obj.attachEvent){
            obj.attachEvent("on" + inci,back);
        }else{
            obj["on"+inci] = back;
        }
    }
          
    function removeEvent(obj,inci,back){
        if(obj.removeEventListener){
            obj.removeEventListener(inci,back,false);
        }else if(obj.detachEvent){
            obj.detachEvent("on" + inci,back);
        }else{
            obj["on"+inci] = null;
        }
    }          

 

 

 

10.事件委托机制

    通过e.target获取触发事件的事件源

 

    利用事件冒泡原理，将绑定在多个子元素身上的相同事件，绑定在页面上现存的父元素身上。

 

 
        oul.onclick = function(eve){
             var e = eve || window.event;
             var target = e.target || e.srcElement;
             if(target.nodeName == "LI"){
                 console.log(target.innerHTML);
             }
         }

 

优势：

    1.节省性能

    2.可以给页面上暂时不存在的元素绑定事件

 

 

 

事件流的三种状态：

    事件冒泡

    事件捕获

    目标阶段