JavaScript中的事件

事件的概念

javascript中事件是可以被侦测到的行为。网页中的每个元素都可以产生某些可以触发JavaScript函数的事件

事件的绑定

ele.on+”事件类型” = function() {};

常用的一些事件

• 鼠标类
  
  • onclick 当用户点击某个对象时调用的事件。
  • onmousedown 鼠标按钮被按下。
  • onmouseup 鼠标按键被松开。
  • onmouseover 鼠标移到某元素之上。
  • onmouseout 鼠标从某元素移开。
  • onmousemove 鼠标被移动时触发。
• 键盘类
  
  • onkeydown 某个键盘按键被按下。
  • onkeyup 某个键盘按键被松开。
  • onkeypress 字符键被按下,而且如果按住不放的话，会重复触发此事件。
• 表单类
  
  • onblur 元素失去焦点时触发。
  • onfocus 元素获得焦点时触发。
  • onsubmit 确认按钮被点击。
• 等等
  
  • 这些事件网上教程一大波，关键在于明白其中的套路。

Event对象

概念：事件执行过程中的状态，用来保存当前事件的信息对象。

获取Event对象

• 标准浏览器:事件处理函数的第一个参数

//举个例子
    ele.onclick = function(event) {
        console.log(event)
    }

• IE8-：window.event

    ele.conclick = function(event) {
        event = window.event;
        console.log(event)
    }
兼容写法
    ele.onclick = function(e) {
        e = e || window.event;
        console.log(e);
    }

Event对象的一些操作方法

• target: 返回触发此事件的元素（事件的目标元素）。
• preventDefault()： 通知浏览器不要执行与事件关联的默认动作。
• currentTarget: 其事件处理程序当前正在处理事件的那个元素
• clientX 返回当事件被触发时，鼠标指针相对于浏览器可视区域的水平坐标。
• clientY 返回当事件被触发时，鼠标指针相对于浏览器可视区域的垂直坐标。
• 等等，这里不详细写了。记不住的时候网上都能查到。

事件冒泡

事件捕获

事件委托

事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

举一个生活中的例子：有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收。这种方案还有一个优势，那就是即使公司里来了新员工，前台MM也会在收到寄给新员工的快递后核实并代为签收。

为什么要使用事件委托

在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思想之一就是减少DOM操作的原因；如果要用事件委托，就会将所有的操作放到js程序里面，与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能；每个函数都是一个对象，是对象就会占用内存，对象越多，内存占用率就越大，自然性能就越差。

事件委托的原理

事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？就是事件从最深的节点开始，然后逐步向上传播事件，举个例子：页面上有这么一个节点树div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，
那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。

一个简单的例子

<ul id="ul1">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
实现功能是点击li，弹出hello：
window.onload = function(){
    var oUl = document.getElementById("ul1");
    var aLi = oUl.getElementsByTagName('li');
    for(var i=0;i<aLi.length;i++){
        aLi[i].onclick = function(){
            alert(hello);
        }
    }
}

window.onload = function(){
　　var oUl = document.getElementById("ul1");
　　oUl.onclick = function(ev){
　　　　var ev = ev || window.event;
　　　　var target = ev.target || ev.srcElement;
　　　　if(target.nodeName.toLowerCase() == 'li'){
　 　　　　　　    alert(hello);
　　　　　　　      alert(target.innerHTML);
　　　　}
　　}
}