Dom | 青训营

卷霜
63 阅读4分钟

DOM模型（续）

事件类型之键盘事件

  • 键盘事件由用户击打键盘触发，主要有keydown、keypress、keyup三个事件
  1. keydown：按下键盘时触发。
  2. keypress：按下有值的键时触发，即按下 Ctrl、Alt、Shift、Meta 这样无值的键，这个事件不会触发。对于有值的键，按下时先触发keydown事件，再触发这个事件。
  3. keyup：松开键盘时触发该事件
 username.onkeypress = function(e){
   console.log("keypress事件");
 }

event对象

  • keyCode:唯一标识
 var username = document.getElementById("username");
 username.onkeydown = function(e){
   if(e.keyCode === 13){
     console.log("回车");
    }
 }

事件类型之表单事件

  • 表单事件是在使用表单元素及输入框元素可以监听的一系列事件

    1. input事件
    2. select事件
    3. Change事件
    4. reset事件
    5. submit事件

input事件

  • input事件当<input>、<select>、<textarea>的值发生变化时触发。
  • 对于复选框（<input type=checkbox>）或单选框（<input type=radio>），用户改变选项时，也会触发这个事件
  • input事件的一个特点，就是会连续触发，比如用户每按下一次按键，就会触发一次input事件。
  <input type="text" id="search">
 ​
 var search = document.getElementById("search");//byid!!!要看清楚是id还是name
 ​
         search.oninput = function (e) {
 ​
             console.log(e.target.value);//value是获取输入框中数据的
 ​
         }

select事件

  • select事件当在*<input>、<textarea>*里面选中文本时触发
 // HTML 代码如下
 // <input id="test" type="text" value="Select me!" />
 ​
 var elem = document.getElementById('test');
 elem.addEventListener('select', function (e) {
  console.log(e.type); // "select"
 }, false);

Change 事件

  • Change事件当*<input>、<select>、<textarea>*的值发生变化时触发。
  • 它与input事件的最大不同，就是不会连续触发，只有当全部修改完成时才会触发（回车才会打印）
 var email = document.getElementById("email");
 email.onchange = function(e){
   console.log(e.target.value);
 }

reset 事件，submit 事件

  • 这两个事件发生在表单对象<form>上，而不是发生在表单的成员上。
  • reset事件当表单重置（所有表单成员变回默认值）时触发。
  • submit事件当表单数据向服务器提交时触发。
  • 注意，submit事件的发生对象是<form>元素，而不是<button>元素，因为提交的是表单，而不是按钮
 <form id="myForm" onsubmit="submitHandle">
   <button onclick="resetHandle">重置数据</button>
   <button>提交</button>
 </form>

 var myForm = document.getElementById("myForm")
 function resetHandle(){
   myForm.reset();//重置表单
 }
 function submitHandle(){
   console.log("提交");//提交到后台
 }

事件类型之窗口事件

  1. scroll 事件
  2. resize 事件
  • scroll事件在文档或文档元素滚动时触发，主要出现在用户拖动滚动条
     <script>
         /* 添加监听事件——监听了滚动事件 */
         window.addEventListener("scroll",function(){
             // console.log("页面发生了滚动");
             /* 绝大多数的应用场景：获得页面滚动的高度 */
             var scrollheight = document.documentElement.scrollTop;
             console.log(scrollheight);
         })
     </script>
  • resize事件在改变浏览器窗口大小时触发
 window.onresize = function(){
   console.log("窗口发生变化");
 }

焦点/剪贴板事件

焦点事件

  • 焦点事件发生在元素节点和document对象上面，与获得或失去焦点相关。
  • 它主要包括以下四个事件:
  1. focus：元素节点获得焦点后触发，该事件不会冒泡。
  2. blur：元素节点失去焦点后触发，该事件不会冒泡。
  3. focusin：元素节点将要获得焦点时触发，发生在focus事件之前。该事件会冒泡。
  4. focusout：元素节点将要失去焦点时触发，发生在blur事件之前。该事件会冒泡。
 var username = document.getElementById("username");
 username.onfocus = function(e){
   console.log("获得焦点",e.target.value);
 }
 username.onblur = function(e){
   console.log("失去焦点",e.target.value);
 }

特殊点：focus（）和blur（）可以当方法来使用

  • username.focus(); // 获得焦点
  • username.blur(); // 失去焦点

剪贴板事件

以下三个事件属于剪贴板操作的相关事件

  1. cut：将选中的内容从文档中移除，加入剪贴板时触发。
  2. copy：进行复制动作时触发。
  3. paste：剪贴板内容粘贴到文档后触发。
 var password = document.getElementById("password");
 password.oncut = function(e){
   console.log("剪切");
 }
 password.oncopy = function(e){
   console.log("复制");
 }
 var email = document.getElementById("email");
 email.onpaste = function(){
   console.log("粘贴");
 }

网页状态事件

  • 资源加载进度，触发状态事件

    1. load
    2. DOMContentLoaded 事件
    3. readystatechange 事件

Load事件

  • 资源加载完成之后触发，包含DOM和图片等资源都加载完成后，才会触发load
 var image = new Image();
 image.src = "http://iwenwiki.com/banner1.png"
 image.onload = function(){
   console.log("图片的资源加载完成了");
   document.body.appendChild(image);//等这张图片完全加载出来之后，才会显现在页面上
 }

DOMContentLoaded 事件

  • 网页下载并解析完成以后，浏览器就会在document对象上触发 DOMContentLoaded 事件。
  • 这时，仅仅完成了网页的解析（整张页面的 DOM 生成了），所有外部资源（样式表、脚本、iframe 等等）可能还没有下载结束。也就是说，这个事件比load事件，发生时间早得多
  • DOM加载完成会在图片加载完成之前
 document.addEventListener('DOMContentLoaded', function (event) {
  console.log('DOM生成');
 });

readystatechange 事件

此事件我们会放在网络请求部分讲解

Touch事件

  • 触摸引发的事件，有以下几种。（移动端）
  • 可以通过TouchEvent.type属性，查看到底发生的是哪一种事件
  1. touchstart：用户开始触摸时触发，它的target属性返回发生触摸的元素节点
  2. touchend：用户不再接触触摸屏时触发
  3. touchmove：用户移动触摸点时触发
  4. touchcancel：系统取消touch事件的时候触发（使用率低）
  • 转化为手机页面在实验
 var box = document.getElementById("box");
 box.addEventListener("touchend",function(){
   console.log("离开了屏幕");
 })
 ​
 box.addEventListener("touchstart",function(e){
   console.log("触摸屏幕",e);
 })
 ​
 box.addEventListener("touchmove",function(){
   console.log("移动");
 })

温馨提示

上述所有事件，都必须用DOM2级事件处理

avatar
文章
阅读
粉丝