javascript基础六(事件对象)

Posted 猛猛滴超人

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript基础六(事件对象)相关的知识,希望对你有一定的参考价值。

 

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.可以给页面上暂时不存在的元素绑定事件
 
 
 
事件流的三种状态:
    事件冒泡
    事件捕获
    目标阶段
技术图片
 
 

以上是关于javascript基础六(事件对象)的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段12——JavaScript的Promise对象

VSCode自定义代码片段12——JavaScript的Promise对象

JavaScript基础教程—处理事件

node.js从基础到实战六阶段系统

新旅程JavaScript基础篇一

JavaScript基础知识总结 17:JavaScript表单脚本