JavaScript事件

来源：互联网发布：nginx根据域名跳转编辑：程序博客网时间：2024/04/30 14:32

一、跨浏览器事件(兼容IE低版本）

var allEvent = {    addHandler: function(element, type, handler) {        if (element.addEventListener) {            element.addEventListener(type, handler, false);        } else if (element.attachEvent) {             element.attachEvent("on" + type, handler);         } else {             element['on' + type] = handler;         }    },    getEvent: function(event) {         // IE（<=8） event是window属性，并this指向window        return event ? event : window.event;    },    // e.target = e.srcElement当前被点击元素,currentTarget是添加事件元素（即this）    getTarget: function(event) {         return event.target || event.srcElement;     },    // 阻止默认事件a连接或submit提交,return false 有类似功能。    preventDefault: function(event) {         if (event.preventDefault){             event.preventDefault();         } else {             event.returnValue = false;             }    },    removeHandler: function(element, type, handler) {         if (element.removeEventListener){             element.removeEventListener(type, handler, false);         } else if (element.detachEvent){             element.detachEvent('on' + type, handler);         } else {             element['on' + type] = null;         }    },    // 阻止冒泡或捕获    stopPropagation: function(event){         if (event.stopPropagation) {             event.stopPropagation();         } else {             // IE低版本            event.cancelBubble = true;         }    }};  var getElement = document.getElementById(id);allEvent.addHandler(getElement, 'click', function(){});

二、事件对象 event（IE低版本event是window属性）

1、查看事件对象：

 var getElement = document.getElementById("parent"); getElement.onclick = function(e) {    console.log(e || window.event) }

2、常用：

event.currentTarget : === this总是正确;
event.target (IE低版本event.srcElement): 当前被点击事件
event.type : 事件类型，可以用这个绑定多个事件

var handler = function(event){     switch(event.type){          case "click":          alert("Clicked");          break;          case "mouseover":          event.target.style.backgroundColor = "red";          break;          case "mouseout":          event.target.style.backgroundColor = "";          break;      }  };

preventDefault() 取消事件默认行为(a或按钮，不阻止冒泡和捕获)。如果 cancelable 是true ，则可以使用这个方法
stopPropagation() 取消事件的进一步捕获或冒泡。如果bubbles为true，则可以使用这个方法
bubbles 表明事件是否冒泡
detail 与事件相关的细节信息
eventPhase 调用事件处理程序的阶段：1表示捕获阶段，2表示“处于目标”，3表示冒泡阶段
clientX,clientY 点击位置的xy坐标，可视范围内，不计算滚动条。
pageX,pageY 计算滚动条，但是IE低版本不支持。（需要用到 document.body （混杂模式）或 document.documentElement （标准模式）中的scrollLeft 和 scrollTop 属性。）

var parent = document.getElementById("parent");allEvent.addHandler(parent, "click", function(e) {  // 注意：event只有在触发事件时，才是对象，在方法内(getEvent(event))只是参数  e = allEvent.getEvent(e);  var pageX = e.pageX,      pageY = e.pageY;  if(pageX === undefined) {      pageX = e.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);  }  if(pageY === undefined) {      pageY = e.clientY + (document.body.scrollTop || document.documentElement.scrollTop);  }  console.log("pageX = " + pageX +"; pageY = " + pageY); });

screenX&screenY 得到的是整个屏幕的位置信息

 var parent1 = document.getElementById("parent"); allEvent.addHandler(parent1, "click", function(event){     event = allEvent.getEvent(event);     console.log("Screen coordinates: " + event.screenX + "," + event.screenY);  });

IE低版本事件对象：
cancelBubble Boolean 默认值为 false ，但将其设置为 true 就可以取消事件冒泡同 stopPropagation()类似（低版本不支持捕获）
returnValue Boolean 默认值为 true ，但将其设置为 false 就可以取消事件的默认行为（与 preventDefault() 方法的作用相同）
srcElement Element 事件的目标（与target 属性相同）
type String 被触发的事件的类

三、事件类型

click ：在用户单击主鼠标按钮（一般是左边的按钮）或者按下回车键时触发。
dblclick ：在用户双击主鼠标按钮（一般是左边的按钮）时触发。
mousedown ：在用户按下了任意鼠标按钮时触发。不能通过键盘触发这个事件。
mouseup ：在用户释放鼠标按钮时触发。不能通过键盘触发这个事件。（mousedown和mouseup组成click）
mouseenter ：在鼠标光标从元素外部首次移动到元素范围之内时触发。这个事件不冒泡。而且在光标移动后代元素上不会触发。
mouseleave ：在位于元素上方的鼠标光标移动到元素范围之外时触发。这个事件不冒泡，而且在光标移动到后代元素上不会触发。
mouseout ：在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。又移入的另一个元素可能位于前一个元素的外部，也可能是这个元素的子元素。不能通过键盘触发这个事件。
mouseover ：在鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内时触发。不能通过键盘触发这个事件。
在发生 mouseover 和 mouserout 事件时，还会涉及更多的元素。简单来说就是一个元素触发mouseover就会有别的触发mouseout（相关事件）。

四、事件委托

优点：

提升性能，只在父元素添加了一个点击事件，子元素没有添加事件，而是通过判断不同的元素来执行不同的任务。
新添加的元素还会有之前的事件。

适合范围：

click，mousedown，mouseup，keydown，keyup，keypress。

不适合：

mousemove，每次都要计算它的位置。mouseover和mouseout虽然也有事件冒泡，但需要经常计算它们的位置。focus，blur之类的，本身就没用冒泡的特性。

事件委托:

避免对特定的每个节点添加事件监听器；相反，事件监听器是被添加到它们的父元素上。

        <ul id="parent">            <li class="item1 list1 pub">event1</li>            <li class="item2 list2 pub">event2</li>            <li class="item3 list3">event3</li>            <li class="item4 list4">event4</li>        </ul>// 依靠e.targetvar parent = document.getElementById("parent");parent.addEventListener("click", function(e) {    if(e.target && e.target.nodeName == "LI") {         console.log(2)     } }, false);

 parent.addEventListener('click', function(e) {     if(e.target && e.target.nodeName.toLowerCase() === 'li') {         // 一、这里对.list1类名做了判断,相当于事件添加到.list1上         var classes = e.target.className.split(' ');        // 给类名为list1的li添加点击执行的内容         if(classes) {             for(var i = 0; i < classes.length; i++) {                 if(classes[i] == "list1") {                      console.log('click list1');                 }             }         }        // 二、li添加相同事件，这里执行内容，只对li做了判断，相当于事件添加到li上。        console.log('click li all of ID equal parent')        // 三、这里对pub类名做了判断，相当于事件添加到具有.pub的类名上。        if(classes) {             for(var i = 0; i < classes.length; i++) {                 if(classes[i] == "pub") {                     console.log('click list1');                 }             }         }     }  });

0 0