JS Event

JavaScript

不同的事件类型

• UIEvent（与浏览器UI，而不是网页发生的交互事件）

• 键盘事件

触发顺序：keydown >> keypress >> keyup

• MouseEvent（用户操作鼠标、触控板或触摸屏时发生）

• 焦点事件（可与之交互的HTML元素，例如表单、超链接，都可发生焦点事件）

• 表单事件（用户与表单元素进行交互时发生）

window.onload = function {
}
//window.onload将在页面完全加载完后触发

element.addEventListener("event", function, useCapture);

element.addEventListener("mouseover", func);
//默认Capture参数值为false
element.addEventListener("click", func, ture);
//注意事件类型前不像HTML中用on前缀

ie浏览器只支持element.attachEvent("on" + event, fn);，且只支持bubbling。

封装成一个事件处理器添加函数：

var addEvent = function(element, e, func){
    if (element.addEventListenser){
        element.addEventListenser(e, func, false);
    } else if (element.attachEvent){
        element.attachEvent('on' + e, func);
    }
};

注意：传入的e是一个事件的字符串形式。

DOM中，事件流有两种：
1. capturing 事件捕获
2. bubbling 事件冒泡

capturing 的事件发生顺序是从元素外层向内层传导；
bubbling 的事件发生顺序是从元素最内层向外层传导；

当代码在一个元素和其祖先元素或后代元素上都有事件处理程序时，一定要注意事件流。

事件

事件将作为第一个匿名参数，传递给事件监听器的函数或事件的处理程序。
事件作为对象有以下属性和方法：

function checkUsername(e){
    var target = e.target; //由第一个默认参数找到事件所在元素
}
var el = document.getElementById('username');
el.addEventListener('blur', checkUsername); //事件监听器的函数中并未命名事件参数

function checkUsername(e, minLength){
    var type = e.type;
    //some other code
}
var el = document.getElementById('username');
el.addEventListener('blur', checkUsername(e, 5)); //在事件监听器内命名了函数参数

当页面中有大量交互事件时，为每个元素分别添加事件会让页面速度下降。应该在一类元素的容器元素上使用事件监听器和事件传导，并用target属性定位到发生交互事件的后代元素。

preventDefult() 可以将HTML标签中的超链接或者表单提交的页面跳转行为取消。

stopPropagation() 可以防止事件向其祖先元素传递，尤其是当其祖先元素具有相同类型的事件处理程序的时候。

<ul id="shoppingList">
    <li class="complete"><a href="itemDone.php?id=1"><em>fresh</em> figs</a></li>
    <li class="complete"><a href="itemDone.php?id=1">pine nuts</a></li>
    <li class="complete"><a href="itemDone.php?id=1">honey</a></li>
    <li class="complete"><a href="itemDone.php?id=1">balasmic vinegar</a></li>
</ul>

function getTarget(e){
    return e.target
}
function itemDone(e) {
//remove items from the list
    var target, elParent, elGrandparent;
    target = getTarget(e);
    elParent = target.parentNode;
    elGrandparent = elParent.parentNode;
    elGrandparent.removeChild(elParent);
}

当处理器中遇到return flase的时候，将停止事件函数的运行（余下代码将不被执行），且停止事件流。这种使用方法可以作为一种同时使用preventDefult()和stopPropagation()的方法。

确定鼠标事件发生时鼠标的位置

（鼠标）事件发生时，鼠标指针的位置有三种定位：

1. 屏幕：使用事件的 screenX 和 screenY 属性，得到鼠标指针相对于显示器屏幕的位置。
2. 页面：使用事件的 pageX 和 pageY 属性，得到鼠标指针在页面中的位置。
3. 客户端：使用事件的 clientX 和 clientY 属性，得到鼠标指针相对于客户端显示内容的位置。

语法
例如：MouseEvent.screenX
同样，将事件作为默认参数传入一个函数内，再利用这个命名参数的上述属性进行对鼠标指针的定位。