JavaScript DOM事件(笔记)

前端技术 2023/09/08 JavaScript

第1章 事件流

1-1.事件冒泡:事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收;
然后逐级向上传播至最不具体的那个节点(文档);
1-2.事件捕获:不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件;

第2章 事件处理程序

2-1 HTML事件处理程序
//缺点:HTML和JS代码紧密的耦合在一起;

<input type=\"button\" value=\"按钮\" onclick=\"showMessage()\">

2-2 DOM0级事件处理程序

//较传统的方式:把一个函数赋值给一个事件的处理程序属性,用的比较多;
//优点:简单/跨浏览器;

<input type=\"button\" value=\"按钮\" id=\"btn2\">
<script>
  var btn2 = document.getElementById(\'btn2\'); //取得btn2按钮对象;
  btn2.onclick = function () {        //给btn2添加onclick属性;
    alert(\'这是通过DOM0级添加的事件!\');
  }
  btn2.onclick=null;             //删除onclick属性;
</script>

2-3 DOM2级事件处理程序

//DOM2级事件定义了两个方法:用于处理指定和删除事件处理程序的操作;
//addEventListener()和removeEventListner();
//接收三个参数:要处理的事件名/事件处理函数和布尔值;
//在IE8一下,不起作用;

<input type=\"button\" value=\"按钮\" id=\"btn3\">
<script>
  var btn3 = document.getElementById(\'btn3\');
  btn3.addEventListener(\'click\',showMessage,false);    //添加事件程序;
  btn3.addEventListener(\'click\',function(){        //添加多个事件程序;
    alert(this.value);
  },false);
  btn3.removeEventListener(\'click\',showMessage,false);  //删除事件程序;
</script>

2-4 IE事件处理程序及跨浏览器

//接收两个参数:事件处理函数名称和事件处理函数

<script>
   var btn3 = document.getElementById(\'btn3\');
   btn3.attachEvent(\'onclick\',showMessage);      //添加事件;
   btn3.detachEvent(\'onclick\',showMessage);      //删除事件;
</script>

>2.浏览器兼容

//将添加和删除事件处理程序封装到对象中并赋值给变量\'eventUtil\';
var eventUtil = {
  //添加句柄
  addHandler:function(element,type,handler){
    //判断DOM2级事件处理程序;
    if(element.addEventListener){  
      element.addEventListener(type,handler,false);
    //判断IE浏览器;
    }else if(element.attachEvent){
      element.attachEvent(\"on\"+type,handler);
    //使用DOM0级事件处理程序;
    }else{
      element[\'on\'+type] = handler;
    }
  };
  //删除句柄
  removeHandler:function(element,type,handler){
    //判断DOM2级事件处理程序;
    if(element.removeEventListener){  
      element.removeEventListener(type,handler,false);
    //判断IE浏览器;
    }else if(element.detachEvent){
      element.detachEvent(\"on\"+type,handler);
    //使用DOM0级事件处理程序;
    }else{
      element[\'on\'+type] = null;
    };
  };
};
//跨浏览器添加事件处理程序;
eventUtil.addHandler(btn3,\'click\',showMessage);

第3章 事件对象

3-1 DOM中的事件对象

//在触发DOM上的事件时都会产生一个对象==event;

>1.type == 获取事件类型;
>2.target == 获取事件目标;
>3.stopPropagation() == 停止事件冒泡;
>4.preventDefault() == 阻止事件的默认行为;

function showMes(event){
  alert(event.type);          //onclick;点击事件;
  alert(event.target.nodeName);  　　//INPUT;input按钮被触发;
  event.stopPropagation();      //停止事件冒泡;
}
<a href=\"event.html\" onclick=\"stopGoto();\">跳转</a>
function stopGoto(event){
  event.preventDefault();　　　　　　　//阻止默认行为;
}

3-2 IE中的事件对象

>1.type == 同上;
>2.srcElement属性 == 获取事件目标;
>3.cancleBubble属性 == 阻止冒泡;设置true表示阻止冒泡,false为不组织冒泡;
>4.returnValue属性 == 用于阻止事件的默认行为;

function showMes(event){
  //非IE用event,IE8以下用window.event;
  event = event || window.event;  
  //事件目标兼容;
  var ele = event.target || event.srcElement;
  //兼容阻止事件冒泡;
  if(event.stopPropagation){
    event.stopPropagation();
  }else{
    event.cancleBubble();
  };
  //兼容取消事件默认行为;
  if(event.preventDefault){
    event.preventDefault();
  }else{
    event.returnValue = false;
  }
}

第4章 QQ面板拖拽效果

>1.封装获取Class方法

function getClass(clsName,parent){
  var oParent = parent?document.getElementById(parent):document,
      eles = [],
      elements = oParent.getElementsByTagName(\'*\');

  for (var i=0,l=elements.length; i<l; i++){
    if(elements[i].className == clsName){
      eles.push(elements[i]);
    }
  }
  return eles;
}

>2.封装拖拽函数

window.onload = drag;
function drag(){
  var oTitle = getClass(\'login_logo_webqq\',\'loginPanel\')[0];  
  //拖拽
  oTitle.onmousedown = fnDown;
  //关闭弹窗
  var oClose = document.getElementById(\'ui_boxyClose\');
  oClose.onclick = function(){
    document.getElementById(\'loginPanel\').style.display = \'none\';
  }
  //切换状态
  var loginState = document.getElementById(\'loginstate\'),
    stateList = document.getElementById(\'loginStatePanel\'),
    lis = stateList.getElementsByTagName(\'li\'),
    stateTxt = document.getElementById(\'login2qq_state_txt\'),
    loginStateShow = document.getElementById(\'login-state_show\');
  loginState.onclick = function(e){
    //阻止冒泡到document使ul隐藏;
    e = e || window.event;
    if(e.stopPropagation){
      e.stopPropagation();
    }esle{
      e.cancleBubble = true;
    }
    stateList.style.display = \"block\";
  }
  //鼠标滑过/离开和点击状态列表时
  for(var i=0,i<lis.length,i++){
    lis[i].onmouseover = function(){
      this.style.background = \"#567\";
    }
    lis[i].onmouseout = function(){
      this.style.background = \"#fff\";
    }
    lis[i].onclick = function(e){
      //阻止冒泡到loginState使stateList显示;
      e = e || window.event;
      if(e.stopPropagation){
        e.stopPropagation();
      }esle{
        e.cancleBubble = true;
      }
      var id = this.id;
      stateList.style.display = \"none\";
      stateTxt.innerHTML = getClass(\'stateSelect_text\',id)[0].innerHTML;
      loginStateShow.className = \'\';
      loginStateShow.className = \'login-state-show \'+id;
    }
  }
  document.onclick = function(){
    stateList.style.display = \"none\";
  }
}
//鼠标按下事件;
function fnDown(event){
  event = event || window.event;
  var oDrag = document.getElementById(\'loginPanel\'),
      //鼠标按下时,鼠标和面板之间的距离;
      disX = event.clientX - oDrag.offsetLeft,
      disY = event.clientY - oDrag.offsetTop;
  //移动
  document.onmouseover = function(event){
    event = event || window.event;
    fnMove(event,disX,disY);
  }
  //释放鼠标
 document.onmouseup = function(){
  document.onmouseover = null;
  document.onmouseup = null;
  }
}
//鼠标移动事件;
function fnMove (e,posX,posY){
  var oDrag = document.getElementById(\'loginPanel\'),
      l = e.clientX-posX,
      t = e.clientY-posY,
      winW = document.documentElement.clientWidth || document.body.clientWidth,
   winH = document.documentElement.clientHeight || document.body.clientHeight;
   maxW = winW-oDrag.offsetWidth,
   maxH = winH-oDrag.offsetHeight;
 if(l<0){
   l = 0;
 }else if(l>maxW){
   l = maxW;
 }
 if(t<0){
   t = 0;
 }else if(t>maxH){
   t=maxH;
 }
  oDrag.style.left = l+\'px\';
  oDrag.style.top = t+\'px\';
}

第4章 抽奖系统

>1.键盘事件

>>1.keyDown:当用户按下键盘上的任意键时触发,而且如果按住不放的话,会重复触发此事件;
>>2.keyPress:当用户按下键盘上的字符键时触发,而且如果按住不放的话,会重复触发此事件;
>>3.keyUp:当用户释放键盘上的键时触发;

>2.抽奖程序

var data = [\'iPhone5\',\'iPad\',\'三星电脑\',\'谢谢参与\'],
    timer = null,
    flag = 0;
window.onload = function(){
  var play = document.getElementById(\'play\'),
    stop = document.getElementById(\'stop\');
  //(鼠标)开始抽奖
  play.onclick = palyFun;
  stop.onclick = stopFun;
  //(键盘Enter)开始抽奖
  document.onkeyup = function(event){
    event = event || window.event; 
    if(event.keyCode == 13){
      if(flag == 0){
        palyFun();
        flag = 1;
      }else{
        stopFun();
        flag = 0;
      }
    }
  }
}
function palyFun(){
  var title = document.getElementById(\'title\'),
    play = document.getElementById(\'play\');
  //清除之前的定时器,放置定时器重复;
  clearInterval(timer);
　　　　//设置定时器;
  timer = setInterval(function(){
    //随机数*数组元素个数=数组随机索引;
    var random = Math.floor(Math.random()*data.length);
    title.innerHTML = data[random];
  },50);
  play.style.background = \"#999\";
}
function stopFun(){
  clearInterval(timer);
  var paly = document.getElementById(\'play\');
  paly.style.background = \'#036\';  
}

本文地址：https://www.stayed.cn/item/23278

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案