事件相关内容

Posted hm-08042

tags:

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

1、事件

  (1)事件源:触发事件的源头

  (2)事件类型:什么行为

  (3)事件处理函数:触发行为时要做什么事,触发事件源的对应的事件类型时,直接被执行的函数

  (4)事件对象:记录事件发生的所有信息

2、事件类型

  (1)鼠标类

    1)onclick:点击

    2)ondblclick:双击

    3)onmousedown:按下

    4)onmouseup:抬起

    5)onmouseover|onmouseenter:进入

    6)onmouseout|onmouseleave:离开

    7)onmousemove:移动

    8)oncontextmenu:右键单击

    9)onwheel:滚轮滚动

 

  (2)键盘类

    Tip:键盘事件只能加给具有焦点的元素或document

    1)onkeydown:按下任意键

    2)onkeyup:释放任意键

    3)onkeypress:抬起并按下

 

  (3)表单控件类 

       1)onblur:失去焦点

    2)onfocus:获取焦点

    3)oninput:输入

    4)onchange:改变

    5)onsubmit:提交(只能用于from标签)

    6)onreset:重置(只能用于from标签)

    7)onselect:选中        

 

  (4)页面类    

    1)onload:页面加载结束后要做什么

    2)onscroll:页面发生滚动
      
      
属性:页面滚走的距离 (可读可写)

      document.documentElement.scrollTop --> 垂直方向滚动的距离       document.documentElement.scrollLeft --> 水平方向滚动的距离
    3)onresize:窗口或框架的大小发生改变

      属性:页面内容区的尺寸(只读)

      document.documentElement.clientWidth --> 页面内容区的宽度       document.docuementElement.clientHeight --> 页面内容区的高度    

 

3、事件对象

  (1)特点:

    默认不显示,需要手动获取;

    只有在事件中存在,在事件还没有开始前或结束后,都无事件对象;

    事件对象只跟着事件走,类似于局部变量;

    事件结束后事件对象会被浏览器(window)回收。

  (2)事件对象的获取  (有兼容)    

  兼容方式:
      functioin fn(eve) 
      
          var e = eve || window.event;           

    

  Tip:event只存在于事件中,外部不可用,使用时window不可以省掉

 

  (3)如何通过事件对象获取事件源

    e.target

4、鼠标事件的常用属性

  (1)检测按下的鼠标按键  -->   button  |   buttons 

  obox.onmousedown = function(eve)g
        var e = eve || window.event;
        console.log(e.button);    //左键:0  滚轮:1   右键:2
        console.log(e.buttons);   //左键:1  滚轮:4   右键:2
    

 

  (2)检测鼠标相对于浏览器左上角的位置   -->   clientX  |   clientY

    

  obox.onmousedown = function(eve)
        var e = eve || window.event;
        console.log(e.clientX);    //水平方向的位置
        console.log(e.clientY);   //垂直方向的位置
    

  (3)检测相对于html文档的左上角的位置  -->   pageX  |   pagesY

 

  obox.onmousedown = function(eve)
        var e = eve || window.event;
        console.log(e.pageX);    //水平方向的位置
        console.log(e.pageY);   //垂直方向的位置
    

  Tip: 不支持IE8-

  

  (4)检测相对于显示器屏幕左上角的位置  -->  screenX  |   screenY

  obox.onmousedown = function(eve)
        var e = eve || window.event;
        console.log(e.screenX);    //水平方向的位置
        console.log(e.screenY);   //垂直方向的位置
    

   

  (5)检测相对于事件源左上角的位置  -->   offsetX   |   offsetY

obox.onmousedown = function(eve)
        var e = eve || window.event;
        console.log(e.offsetX);    //水平方向的位置
        console.log(e.offsetY);   //垂直方向的位置
    

 

5、事件冒泡

  当触发某个元素的某个事件时,它会先触发自己的对应事件,然后再依次向上触发所有父级中相同的事件,如果中间的某个父级没有相同的事件,会继续向上触发。

  由于事件冒泡的既有好也不好,当用不到的时候就需要阻止事件冒泡。

  事件冒泡的阻止(有兼容):

  function stopBubble(e) 
        if(e.stopPropagation) 
            e.stopPropagation();   //非IE
        else 
            e.cancelBubble = true;  //IE
        
    

 

6、键盘事件及其相关属性

  事件源:document或其他具有焦点的属性

  如何知道按下的是哪个键? -->   keyCode(事件对象的属性)

  keyCode   值为十进制    也是对应的ASCII码   通过keyCode找得到对应的键盘按键

  document.onkeydown = function(eve) 
        var e = eve || window.event;
        if(e.keyCode == 65) 
            console.log("A");
        
    


  keyCode存在兼容问题,兼容的解决:
  
  var code = e.keyCode || e.which;

  特殊键:

  1)Ctrl键

    属性:ctrlKey

    取值:true |  false

    当按下其他键时值为false,按下Ctrl键时取值为true

  2)shift键

    属性:shiftKey

    取值同上。

  3)alt键:

    属性:altKey

    取值同上。

  Tip: 常用见取值  -->   左键:37,上键:38,右键:39,下键:40,回车键:13,空格键:32

 

7、默认事件

  我们没有设置,但是系统默认有的事件  ==>  默认事件或默认行为

  如何阻止默认事件?(有兼容)  

  //方法一:
  function stopDefault(e) 
        if(e.preventDefault) 
            e.preventDefault();   //非IE
        else 
            e.returnValue = false;  //IE
        
    


  //方法二:(无兼容)
    return false;

 

8、事件的绑定方式

  (1)赋值式(DOM0级事件绑定)

    常用 、简单、没有兼容

 绑定方式: 
   obox.onclick = fn; obox.onclick = function() //操作 obox.onclick = function() fn();

 删除方式:
   obox.obclick = nll;

  

  (2)事件监听式(DOM0级事件绑定)

    有兼容   

  兼容的解决: 

  绑定方式:  

  function addEvent(ele,type,fn) if(ele.addEventListener) ele.addEventListener(type,fn); else if(eve.attachEvent) ele.attachEvent("on"+type,fn); else ele["on"+type] = fn;

  删除方式:

  function
addEvent(ele,type,fn) if(ele.addEventListener) ele.addEventListener(type,fn); else if(eve.attachEvent) ele.attachEvent("on"+type,fn); else ele["on"+type] = fn;

 

9、事件流的三个阶段

  (1)冒泡阶段  (从里向外) ==>  默认阶段

  (2)目标阶段  (当前阶段)

  (3)捕获阶段 (从外向内)

  待补充……

  

 

以上是关于事件相关内容的主要内容,如果未能解决你的问题,请参考以下文章

javascript 窗口加载事件相关问题

javascript事件相关3

easyui-combobox绑定回车事件相关

js 如何控制文本域输入内容在一定间隔时间段才触发事件查询相关数据

家庭版记账本app进度之对于按钮的点击事件以及线性布局以及(alertdialog)等相关内容的应用测试

JavaScript - 事件相关