JS事件

 

var div=document.getElementsByTagName('div')[0];

1.添加事件

div.οnclick=function () {
        console.log('a');
    }

    div.addEventListener('click',test,false)
      function test() {
        console.log('a');
    }

2.解除绑定事件

div.οnclick=null;
    div.removeEventListener('click',test,false);

3.封装兼容性的绑定

function addEvent(elem,type,handle) {
        if(elem.addEventListener){
            elem.addEventListener(type,handle,false);
        }
        else if(elem.attachEvent){
            elem.attachEvent('on'+type,function () {
                handle.call(elem);
            })
        }else
        {
            elem['on'+type]=handle;
        }
    }

4.事件处理模型

一个事件类型只能存在一种事件模型，冒泡和捕获不可并存

   事件冒泡  结构上 从子元素向父元素冒泡（自底向下）

    var wrapper=document.getElementsByClassName('wrapper')[0];
    var content=document.getElementsByClassName('content')[0];
    var box=document.getElementsByClassName('box')[0];

    wrapper.addEventListener('click',function () {
        console.log('wrapper');
    },false)
    content.addEventListener('click',function () {
        console.log('content');
    },false)
    box.addEventListener('click',function () {
        console.log('box');
    },false)

   事件捕获

 var wrapper=document.getElementsByClassName('wrapper')[0];
    var content=document.getElementsByClassName('content')[0];
    var box=document.getElementsByClassName('box')[0];

    wrapper.addEventListener('click',function (e) {
//        e.stopPropagation();取消冒泡
        console.log('wrapper');
    },true)
    content.addEventListener('click',function () {
        console.log('content');
    },true)
    box.addEventListener('click',function () {
        console.log('box');
    },true)

5.封装取消冒泡函数

function stopBubble(event) {
        if(event.stopPropagation){
            event.stopPropagation();
        }
        else
        {
            event.cancelBubble=true;
        }
    }

6.阻止默认事件  例如：右击出菜单事件

封装阻止默认事件函数

function cancel(event) {
        if(event.preventDefault){

            event.preventDefault();
        }
        else
        {
            event.returnValue=false;
        }
    }

document.οncοntextmenu=function (e) {
        console.log('a');
        cancel(e);
    }

7.事件源对象

 var wrapper=document.getElementsByClassName('wrapper')[0];
    var content=document.getElementsByClassName('content')[0];
    wrapper.οnclick=function (e) {
        var event=e||window.event;
        var target=event.target||event.srcElement;
        console.log(target);
    }

8.事件委托

var ul=document.getElementsByTagName('ul')[0];
    ul.οnclick=function (e) {
        var event=e||window.event;
       var target=event.target||event.srcElement;
        console.log(target.innerText);
    }