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 相关文章推荐
JS 面向对象的5钟写法
Jul 31 Javascript
jQuery的缓存机制浅析
Jun 07 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
Jan 12 Javascript
jQuery取得iframe中元素的常用方法详解
Jan 14 Javascript
浅谈window.onbeforeunload() 事件调用ajax
Jun 29 Javascript
jquery实现表单获取短信验证码代码
Mar 13 Javascript
详解vuex 中的 state 在组件中如何监听
May 23 Javascript
Vue.js图片预览插件使用详解
Aug 27 Javascript
使用electron实现百度网盘悬浮窗口功能的示例代码
Oct 24 Javascript
微信小程序使用二次贝塞尔曲线画波浪
Dec 25 Javascript
基于VUE实现判断设备是PC还是移动端
Jul 03 Javascript
Antd的table组件表格的序号自增操作
Oct 27 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
phpmyadmin导入(import)文件限制的解决办法
2009/12/11 PHP
实现复选框全选/全不选切换
2006/12/23 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
2014/11/28 Javascript
node.js中的fs.createReadStream方法使用说明
2014/12/17 Javascript
javascript常见数据验证插件大全
2015/08/03 Javascript
学习使用AngularJS文件上传控件
2016/02/16 Javascript
值得分享和收藏的Bootstrap学习教程
2016/05/12 Javascript
js 数据存储和DOM编程
2017/02/09 Javascript
angularJS深拷贝详解
2017/03/23 Javascript
jquery.masonry瀑布流效果
2017/05/25 jQuery
vuejs+element-ui+laravel5.4上传文件的示例代码
2017/08/12 Javascript
深入浅出webpack之externals的使用
2017/12/04 Javascript
基于webpack.config.js 参数详解
2018/03/20 Javascript
pageGroup.js实现分页功能
2019/07/27 Javascript
javascript 高级语法之继承的基本使用方法示例
2019/11/11 Javascript
javascript 原型与原型链的理解及应用实例分析
2020/02/10 Javascript
Python深入学习之上下文管理器
2014/08/31 Python
python实现自动登录人人网并访问最近来访者实例
2014/09/26 Python
python利用MethodType绑定方法到类示例代码
2017/08/27 Python
Python读取Json字典写入Excel表格的方法
2018/01/03 Python
python装饰器深入学习
2018/04/06 Python
对sklearn的使用之数据集的拆分与训练详解(python3.6)
2018/12/14 Python
Jupyter Notebook的连接密码 token查询方式
2020/04/21 Python
英国乡村时尚和宠物用品专家:Pet & Country
2018/07/02 全球购物
Oracle里面常用的数据字典有哪些
2014/02/14 面试题
Python面试题:Python里面如何生成随机数
2015/03/12 面试题
毕业生个人求职的自我评价
2013/10/28 职场文书
公司财务自我评价分享
2013/12/17 职场文书
婚礼证婚人演讲稿
2014/09/13 职场文书
公司领导班子民主生活会对照检查材料
2014/10/02 职场文书
国庆节标语大全
2014/10/08 职场文书
优秀志愿者感言
2015/08/01 职场文书
消防演习感想
2015/08/10 职场文书
golang中实现给gif、png、jpeg图片添加文字水印
2021/04/26 Golang
Python OpenCV实现传统图片格式与base64转换
2021/06/13 Python
深入理解python协程
2021/06/15 Python