001--js事件相关

一、什么是事件：

• 用户->操作HTML元素->产生一个事件->事件主动的调用设定的方法（函数）

二、注册事件

• HTML属性
  • 属性名：on+事件的名字 onclick
  • 属性值：方法
  • 1：直接在HTML设定
  • 2：通过js元素对象来设定
• 通过系统提供的方法（可以给一个事件绑定多个方法）
  • div.addEventListner(事件类型，函数，事件的处理方式)
• 删除事件
  • FF:div.removeEventListner(事件类型，函数)
  • IE:添加事件：attachEvent（）；删除事件：detachEvent()

三、事件函数

• 事件函数:事件发生的时候操作的函数
• 事件对象event(具体发生事件的元素，鼠标的位置，点击的状态，键盘的按钮)
  screen：基于屏幕；client：基于浏览器
• 兼容写法 var e=window.event(IE8以及以前) || event

四、阻止默认事件

• event.preventDefault（）
• return false（只针对a.onclick=add;）
• IE:event.returnValue=false

五、事件传播

• 默认情况下，单击页面一个标签，处在路径上的标签都会监听到对应的事件
• 事件流：对应标签接受对象事件的顺序
  • 两个阶段：
  • 捕获阶段：从起始点-->目标位置
  • 冒泡阶段：目标位置-->起始点
• addEventListner(参数1，参数2，参数3)（第三个参数：默认false-->冒泡节点执行；true：捕获阶段执行）

六、阻止冒泡

• FF:event.stopPropagation()
• IE：event.cancelBubble=true

七、事件代理（事件委托）

• 利用冒泡原理

    ul.onclick=function (event) {
      var e = event||window.event,
              source = e.target || e.srcElement;//target表示在事件冒泡中触发事件的源元素，在IE中是srcElement
        if(source.nodeName.toLowerCase() == "li"){   //判断只有li触发的才会输出内容
            alert(source.innerHTML);
        }
        stopPropagation(e);                           //阻止继续冒泡
    };
    function addElement() {
        var li = document.createElement('li');
        li.innerHTML="我是新孩子";
        ul.appendChild(li);
    }