事件 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
            <ul>
                <li>a</li>
                <li>a</li>
                <li>a</li>
                <li>a</li>
            </ul>
            <script type="text/javascript">
            var Li=document.getElementsByTagName('li');//点击排序
            var len=Li.length;
            for(var i=0;i<len;i++){
                (function (i){
                  Li[i].addEventListener('click',function (){
                      console.log(i);
                  } ,false);  
                }(i))
            }

    <div style="width: 100px;height:100px;background: red; "> </div>//点击换色
    
    var div=document.getElementsByTagName('div')[0];
        div.onclick=function (){
            this.style.background='green';
        }
        div.addEventListener('click' ,function (){
            console.log('s');
        }, false);

    </script>
</body>
</html>
<!--步骤1.事件处理程序的运行环境addEvent()
2.事件对象兼容
    var event=e||window.event;
    var target=event.target||event.srcElement;
3.封装取消冒泡的函数stopBubble(event)
4.封装阻止默认事件的函数cancelHaddler(event)


//1.on+type
兼容性很好,但一个元素的同一个事件上只能用一次
2.obj.addEventListener(type,fn,false)
IE9以下不兼容,可为一个事件绑定多个处理程序
3.obj.attachEvent("on"+type,fn);
IE独有,一个事件同样可以绑定多个处理程序

//解除事件处理程序
ele.onclick=false/null;
ele.removeEventListener(type,fn,fasle)
ele.datachEvent('on'+type,fn)

//事件处理程序的运行环境
封装兼容性的addEvent(elem,type,handdle);方法
function addEvent(elem,type,haddle){
    if(elem.addEventListener){
        elem.addEventListener(type,haddle,false);
    }else if(elem.attachEvent){
        elem.attachEvent('on'+type,funvtion (){
            handle.call(elem);
        })
    }else{
        elem['on'+type]=haddle;
    }
}

//冒泡 捕捉
先捕捉再冒泡 focus blur,change,submit,reset,select等事件不冒泡
false是冒泡
true是捕捉
//取消冒泡
1.W3C标准 event.stopPropagation();但不支持ie9以下版本 
  div.onclick=function (e){e.stopPropagation();}
2.IE独有 event.cancerBubble=true;
div.onclick=function (e){e.cancerBubble=true;}
3.封装取消冒泡的函数 stopBubble(event)

//阻止默认事件
1.默认事件-表单提交,a标签跳转,右键菜单等
2. return false;一对象属性的方式注册的事件才会生效
 document.oncontextmenu=function (){
     console.log('a');
     return fasle;
 }
3.event.preventDefault();W3c标注,IE9以下不兼容
document.oncontextmenu=function (e){
    console.log('a');
    e.preventDefault();
}
4.event.returnValue=false;兼容IE
document.oncontextmenu=function (e){
    console.log('a');
    e.returnValue=false;
}

5.封装阻止默认事件的函数:cancelHanddler(event)
 function cancelHanddler(event){
     if(event.preventDefault){
        event.preventDefault();
     }else{
        event.returnValue=false; 
     }
 }

 //事件对象
 event||window.event用于IE
 //事件源对象
 1.event.target 火狐只有这个
 2.event.srcElement IE只有这个
 3.这俩个Chrome都有
  =function (e){
    var event=e||window.event;
    var target=event.target||event.srcElement;
    console.log(target);
}
 //兼容性写法

 

posted @ 2020-03-08 13:59  尚宇园  阅读(154)  评论(0)    收藏  举报