事件

事件:

  JavaScript侦测到的用户的操作或是页面的一些行为

事件源:

  引发事件的元素

事件绑定:事件绑定有两种方法

  1、普通事件:

    在脚本中绑定或者直接在HTML元素绑定

  2、同一个试讲绑定多个事件处理程序(两种情况):

    IE:

      对象:attachEvent('事件(on)',move)添加

      对象:detachEvent('事件',"处理程序")删除

    普通;

      对象.addEventListener("事件","处理程序",布尔值) 添加

      对象.removeEventListener("事件","处理程序",布尔值) 删除

事件对象:

  什么是事件对象:

    用来记录一些事件发的相关的信息的对象

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

    2、处理函数运行结束后自动摧毁

  如何获取事件对象:

    IE:window.event

    FF:对象.on事件 = function(e){}

事件对象的属性:

  1、关于鼠标事件

    相对浏览器器位置的

    clientX 当鼠标事件发生的时候,鼠标相对于浏览器X轴的位置

    clientY

    相对于屏幕位置的

    screenX 当鼠标事件发生的时候,鼠标相对于屏幕X轴的位置

    screenY 

    相对于事件源的位置

    IE:

    offsetX 当鼠标事件法还是能的时候,鼠标相对于事件源X轴的位置

    offsetY

    FF:

    layerX 当鼠标事件发生的时候,鼠标相对于事件源X轴的位置

    layerY

  2、关于键盘事件

    keyCode 获得键盘码

    空格:32   回车:13   左上右下:37 38 39 40

    altKey  判断alt键是否被按下,按下时true反之FALSE  布尔值

    ctrlKey

    shiftKey

    type 用来检测事件的类型,主要用于多个事件通用一个事件处理程序的时候

 事件流:

  当页面元素触发事件的时候,该元素的容器以及整个页面都会按照特定顺序响应该元素触发的事件,事件传播的顺序叫做事件流程。

  事件流分类:

    1、冒泡事件(所有浏览器都支持):由明确的事件源到最不确定的事件源依次向上触发

    2、捕获事件(IE不支持):不确定的事件源到明确色事件源依次向下触发

  阻止事件流(事件对象):

    IE: 事件对象.cancelBubble = true;

    FF:事件对象.stopPropagation();

  阻止默认事件:

    1、return  false (HTML,DOM0级)

    2、event.preventDefault()

    3、event.returnValue = false

事件委托:就是让别人来完成这个事件,可以提高性能

    Eg:

    oUl.onmouseover = function(ev){

      var ev = ev || window.event;

      var target = ev.target || ev.srcElement;

      if(target.nodeName.toLowerCase() == 'li'){

        target.style.background = 'red'

      }

    }

 

事件就到这里,希望对大家有帮助!!!

    

  

    

posted @ 2017-06-11 22:01  码田农民  阅读(158)  评论(0编辑  收藏  举报