JS基礎回顧、小練習(Eventイベント)

//elementにイベントに対する応答をバインドする
//elementオブジェクトを削除します.イベントが発生した時に、ある関数を実行します.

var box = document.getElementById("box1"); //       
function addEvent(obj,type,fn){ //          
    if(document.addEventListener){ return obj.addEventListener(type,fn); }else{ if(document.attachEvent){ return obj.attachEvent("on"+type,fn); } } } addEvent(box,"click",function(){ console.log(1); }); addEvent(box,"click",fn2); function fn2(){ console.log(2); } //       
function reEvent(obj,type,fn){ //          
    if(document.removeEventListener){ obj.removeEventListener(type,fn); }else{ if(document.detachEvent){ obj.detachEvent("on"+type,fn); } } } reEvent(box,"click",fn2);

 //clickイベントへのバインディングを実現します.

function addClickEvent(element, listener) { //          
    if(document.addEventListener){ return element.addEventListener('click',listener); }else{ if(document.attachEvent){ return element.attachEvent('onclick',listener); } } } var ul = document.getElementById("ul"); addClickEvent(ul,function(){ console.log(this) });

//Enterキーを押す時のイベントバインディングを実現する

function addEnterEvent(element, listener) { if(window.addEventListener){ //  window  keydown  
        window.addEventListener("keydown",function(e){ //       enter ，          
             if(e.keyCode===13){ listener(); } }); }else{ //   IE   
        document.attachEvent("onkeydown",function(){ if(window.event.keyCode===13){ listener(); } }) } } var ul = document.getElementById("ul"); addEnterEvent(ul,function(){ console.log("1"); })