JavaScript DOM事件(笔记)


Posted in Javascript onApril 08, 2015

第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';  
}
Javascript 相关文章推荐
javascript中加号(+)操作符的一些神奇作用
Jun 06 Javascript
js使用for循环与innerHTML获取选中tr下td值
Sep 26 Javascript
JQuery的ON()方法支持的所有事件罗列
Feb 28 Javascript
jquery验证邮箱格式并显示提交按钮
Nov 07 Javascript
JS判断是否手机或pad访问实现方法
Dec 09 Javascript
JS实现一个简单的日历
Feb 22 Javascript
JS复杂判断的更优雅写法代码详解
Nov 07 Javascript
快速了解Node中的Stream流是什么
Feb 13 Javascript
vue.js实现左边导航切换右边内容
Oct 21 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
Apr 22 Javascript
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
element tree树形组件回显数据问题解决
Aug 14 Javascript
javascript笛卡尔积算法实现方法
Apr 08 #Javascript
JavaScript获取指定元素位置的方法
Apr 08 #Javascript
javascript跨域原因以及解决方案分享
Apr 08 #Javascript
JavaScript 里的类数组对象
Apr 08 #Javascript
cookie的secure属性详解
Apr 08 #Javascript
jQuery简单tab切换效果实现方法
Apr 08 #Javascript
JavaScript中的普通函数与构造函数比较
Apr 07 #Javascript
You might like
写出高质量的PHP程序
2012/02/04 PHP
php中配置文件操作 如config.php文件的读取修改等操作
2012/07/07 PHP
php警告Creating default object from empty value 问题的解决方法
2014/04/02 PHP
PHP实现的连贯操作、链式操作实例
2014/07/08 PHP
php过滤HTML标签、属性等正则表达式汇总
2014/09/22 PHP
php验证码的制作思路和实现方法
2015/11/12 PHP
一些常用的JS功能函数代码
2009/06/23 Javascript
jquery的Tooltip插件 qtip使用详细说明
2010/09/08 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
2013/09/06 Javascript
ExpressJS入门实例
2015/01/14 Javascript
jQuery编程中的一些核心方法简介
2015/08/14 Javascript
详解nodejs 文本操作模块-fs模块(四)
2016/12/22 NodeJs
JavaScript实现星星等级评价功能
2017/03/22 Javascript
详解angular用$sce服务来过滤HTML标签
2017/04/11 Javascript
js原生日历的实例(推荐)
2017/10/31 Javascript
Vue中保存数据到磁盘文件的方法
2018/09/06 Javascript
vue 中基于html5 drag drap的拖放效果案例分析
2018/11/01 Javascript
Laravel admin实现消息提醒、播放音频功能
2019/07/10 Javascript
小程序实现长按保存图片的方法
2019/12/31 Javascript
JS实现TITLE悬停长久显示效果完整示例
2020/02/11 Javascript
Vue.js中Line第三方登录api的实现代码
2020/06/29 Javascript
js仿淘宝放大镜效果
2020/12/28 Javascript
浅谈Python中数据解析
2015/05/05 Python
分享python数据统计的一些小技巧
2016/07/21 Python
python机器学习之神经网络(三)
2017/12/20 Python
Python的SimpleHTTPServer模块用处及使用方法简介
2018/01/22 Python
Python使用matplotlib绘制余弦的散点图示例
2018/03/14 Python
利用Python小工具实现3秒钟将视频转换为音频
2019/10/29 Python
python实现拼图小游戏
2020/02/22 Python
python中可以声明变量类型吗
2020/06/18 Python
Python读取xlsx数据生成图标代码实例
2020/08/12 Python
canvas 基础之图像处理的使用
2020/04/10 HTML / CSS
工业学校毕业生自荐信范文
2014/01/03 职场文书
写景作文评语集锦
2014/12/25 职场文书
行政经理岗位职责
2015/04/15 职场文书
Mysql 文件配置解析介绍
2022/05/06 MySQL