EventListenerのサンプル

サンプル1

下のボタンでイベントを付加した後にクリックしてみるといいかもしれない。

ソース1

function addevttoexample(){
  if(document.implementation.hasFeature("MouseEvents","2.0")){
    document.getElementById('example').addEventListener("click",alertcontent,false);
  }
}

function alertcontent(evt){
  alert(evt.target.firstChild.nodeValue);
  alert("イベント型は"+evt.type+"でした。");
}

サンプル2

何がやりたいのか全く意味不明だwww

ソース2

<input type="button" onclick="popupnewobj()" onmouseover="removeobj()" style="position:relative; z-index:10000;" value="ブロック倉庫" />
zi = 0;

function popupnewobj(){
  pelm = document.createElement('p');
  pelm.appendChild(document.createTextNode('う゛'));
  pelm.setAttribute('class','vbk');
  pelm.style.top = Math.floor(Math.random()*600) + 'px';
  pelm.style.left = Math.floor(Math.random()*600) + 'px';
  pelm.addEventListener('mousedown',startdrag,false);
  pelm.addEventListener('mouseup',enddrag,false);
  pelm.addEventListener('mousemove',moveposition,false);
  document.body.appendChild(pelm);
}

function startdrag(evt){
  zi++;
  obj = evt.target;
  obj.style.zIndex = zi;
  xpos = evt.screenX - parseInt(obj.style.left.substring(0, obj.style.left.length-2));
  ypos = evt.screenY - parseInt(obj.style.top.substring(0, obj.style.top.length-2));
}

function enddrag(evt){
  obj = null;
}

function moveposition(evt){
  if(obj){
    obj.style.left = (evt.screenX - xpos) + 'px';
    obj.style.top = (evt.screenY - ypos) + 'px';
  }
}

function removeobj(){
  obj.parentNode.removeChild(obj);
  obj = null;
}

ちなみに、IE6ではDOM2に対応してないのでこれらのサンプルは動きませんが、IE固有のメソッドを利用してDOM規格関数を作ってやることもできるようです。詳細