06-BOM+DOM+事件

一.BOM

1.BOM介绍
  JavaScript由三部分组成: 
  1. 核心(ECMAScript)
  2. 浏览器对象模型(BOM)
  3. 文档对象模型(DOM)
  
  ECMAScript:是一种由ECMA国际(前身为欧洲计算机制造商协会,英文名称是European Computer       Manufacturers Association)通过ECMA-262标准化的脚本程序设计语言。ECMAScript 定义的只是这门语言的>基础,他的组成部分有:语法、类型、语句、关键字、保留字、操作符、对象等
  
  BOM: Browse Object Model, 浏览器对象模型,提供与浏览器交互的方法和接口(API ), 开发人员使用BOM可>以控制浏览器显示页面以外的部分.
  
  DOM: Document  Object Model, 文档对象模型,提供访问和操作网页HTML内容的方法和接口
2.BOM中的对象和方法
  BOM的核心是window对象(全局)
  window对象的方法:
  alert(text): 弹出提示框(警告框)
  confirm(): 创建一个需要用户确认的对话框
  prompt(text,defaultInput) : 创建一个对话框要求用户输入信息
  open(url,name,[options]) : 打开一个新窗口并返回新 window 对象
  
  location对象中的方法:
  location.href = 'http://www.baidu.com'  //跳转到指定的URL
  location.assign('http://www.baidu.com');    //跳转到指定的URL
  location.reload();      //最有效的重新加载,有缓存加载

二.DOM

1.DOM的概念
  DOM就是Document  Object Model(文档对象模型)的缩写,DOM 是 W3C(万维网联盟)的标准。
  DOM是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。
  HTML-页面结构   css-页面样式    javascript –页面行为操作
2.DOM节点分类
  DOM节点分为三种:  元素节点, 属性节点和文本节点
  例如: <div title= "属性节点" >测试Div</div>
  <div></div>:  元素节点(最重要)
  title="属性节点":  属性节点
  测试Div :  文本节点
3.DOM节点和属性
  1, 元素节点对象的获取方式: 
     getElementById():  获取特定ID元素的节点对象(返回一个对象)
     getElementsByTagName():  获取指定标签名的节点列表(返回一个数组)
     getElementsByName():  获取相同name属性值的节点列表(返回一个数组)
  2, getElementById()
        getElementById()需要给一个参数: 元素节点的id属性值。如果找到相应的元素则返回该元素的元素节点对象,如果不存在,则返回 null。
     例如: 获取 id 为 box 的元素节点
        var box = document.getElementById('box'); 

  注意: 如果id值存在, 但是返回null,则是执行顺序的问题
  解决方法:
    1. 把<script>标签(JS代码)移到html结构后面;
    2. 使用onload事件来处理, onload事件会在html加载完毕后再调用。 
    //加载 html 后执行 
    window.onload=function() {      
          document.getElementById('box');  //id具有唯一性
    };
  3, 元素节点的属性
     tagName: 元素节点对象所指向的标签名称
     innerHTML: 元素节点中的内容
     className: 元素节点的class属性值
     style: css内联样式对象
     children: 某元素的所有子元素节点
     value: 输入框的内容
4.DOM操作
  DOM节点操作
        DOM节点操作指的是: 创建节点、复制节点、插入节点、删除节点和替换节点等. 

  DOM操作所涉及的方法有: 
        createElement(); 创建一个元素节点
        appendChild(); 添加一个新子节点到子节点的末尾
        createTextNode(); 创建一个文本节点
        insertBefore(); 将新节点插入到某节点前面
        replaceChild(); 将新节点替换旧节点
        cloneNode(); 复制节点
        removeChild(); 移除节点

  在JS事件中, this表示触发事件的元素节点对象;

  var box = document.getElementById('box'); 
  box.onclick = function() { 
        console.log(this);  //this表示box对象 
  };

  通过for循环添加事件, 使用this
  var aInput = document.getElementsByTagName('input');
  for (var i=0; i<aInput.length; i++) { 
          aInput[i].onclick = function() { 
                  console.log(this.value);  //这里的this表示被点击的那个input元素节点对象 
          };
  }

三.事件

  脚本模式: 
        脚本模式能将JS代码和HTML代码分离, 符合代码规范. 
        使用脚本模式我们需要先获取到元素节点对象, 再针对该节点对象添加事件; 如我们可以采用三种方式            来获得节点对象: getElementById(), getElementsByTagName(), getElementsByName()

  例如: 
  var box = document.getElementById('box'); 
  添加事件方式一 :  通过匿名函数,可以直接触发对应的代码 (推荐)
  box.onclick = function() {  //给box节点对象添加点击事件onclick
           console.log('Hello world!'); 
  };

  添加事件方式二 :  通过指定的函数名赋值的方式 来执行函数
  box.onclick = func;    //注意这里不能写成func()
  function func() {        //给box节点对象添加点击事件onclick
           console.log('Hello world!'); 
  };
1.事件的分类
 事件的分类
        JavaScript 可以处理的事件种类有三种:鼠标事件, 键盘事件和 HTML事件.

  1,  鼠标事件
       鼠标事件,页面所有元素都可触发鼠标事件;

      click: 当单击鼠标按钮并在松开时触发
      onclick = function() {
               console.log('单击了鼠标'); 
      };
      dblclick: 当双击鼠标按钮时触发。
      ondblclick = function() {
                console.log('双击了鼠标'); 
      };
      mousedown:当按下了鼠标还未松开时触发。 
      onmousedown = function() {
                console.log('按下鼠标'); 
      };
      mouseup: 释放鼠标按钮时触发。 
      onmouseup = function() {
              console.log('松开了鼠标'); 
      };
      mousemove:当鼠标指针在某个元素上移动时触发。
      onmousemove = function() {
               console.log('鼠标移动了'); 
      };  
      mouseenter:当鼠标移入某个元素的那一刻触发。
      onmouseenter = function() {
              console.log('鼠标移入了'); 
      }; 
      mouseleave:当鼠标刚移出某个元素的那一刻触发。 
      onmouseleave = function() {
              console.log('鼠标移出了'); 
      };

 2. 键盘事件 
       键盘事件,在键盘上按下键时触发的事件; 
      (一般由window对象或者document对象调用)

      keydown:当用户按下键盘上某个键触发,如果按住不放,会重复触发。
      window.onkeydown = function() {
              console.log(按下了键盘上的某个键); 
      };

      keypress:当用户按下键盘上的字符键触发,如果按住不放,会重复触发
      window.onkeypress = function() { 
              console.log('按下了键盘上的字符键'); 
      };

      keyup:当用户释放键盘上的某个键触发。
      window.onkeyup = function() {
              console.log(松开键盘上的某个键); 
      };

 3. HTML事件 
       HTML事件,跟HTML页面相关的事件; 

      load:当页面完全加载后触发
      window.onload = function() { 
              console.log('页面已经加载完毕'); 
      };
      unload:当页面完全卸载后触发
      window.onunload = function() { 
              console.log('页面已经卸载完毕'); 
      };
      select:当用户选择文本框(input 或 textarea)中的内容触发。 
      input.onselect = function() { 
              console.log('选择了文本框中的内容'); 
      };
      change:当文本框(input 或 textarea)内容改变且失去焦点后触发。 
      input.onchange = function() { 
              console.log('文本框中内容改变了'); 
      };
      focus:当页面或者元素获得焦点时触发。 
      input.onfocus = function() { 
              console.log('文本框获得焦点'); 
      };
      blur:当页面或元素失去焦点时触发。
      input.onblur = function() { 
              console.log('文本框失去焦点'); 
      };
      submit:当用户点击提交按钮在<form>元素节点上触发。
      form.onsubmit = function() { 
              console.log(‘提交form表单’);  
      };
      reset:当用户点击重置按钮在<form>元素节点上触发。 
      form.onreset = function() { 
              console.log('重置form表单'); 
      };
      scroll:当用户滚动带滚动条的元素时触发。
      window.onscroll= function() { 
              console.log('滚动了滚动条了'); 
      };
2.事件对象Event
 通过事件的执行函数传入的event对象(事件对象) 不是在所有浏览器都有值,  在IE浏览器上event对象并没有传过来, 这里我们要用window.event来获取, 而在火狐浏览器上window.event无法获取, 而谷歌浏览器支持event事件传参和window.event两种, 为了兼容所有浏览器, 我们使用以下方式来得到event事件对象: 

box.onclick = function(evt){ 
     var e= evt || window.event; //获取到event对象(事件对象)
     console.log(e);
};

其中window.event中的window可以省略, 最终我们可以写成: 
box.onclick = function(evt){ 
     var e= evt || event; //获取到event对象(事件对象)
     console.log(e);
};

注意: evt||event不要倒过来写

事件对象Event的属性:

    button: 鼠标按键
    clientX: 浏览器可视区域的x坐标
    clientY: 浏览器可视区域的y坐标
    pageX: 浏览器内容区域的x坐标
    pageY: 浏览器内容区域的y坐标
    screenX: 显示器屏幕的x坐标
    screenY: 显示器屏幕的y坐标
    offsetX: 鼠标点击的元素位置距离元素左边界的x坐标
    offsetY: 鼠标点击的元素位置距离元素上边界的y坐标
3.阻止事件冒泡和默认行为
 冒泡传递事件
 document.onclick=function(){ 
       console.log('我是 document'); 
 }; 
 document.documentElement.onclick=function() { 
       console.log('我是 html'); 
 }; 
 document.body.onclick= function(){ 
       console.log('我是 body'); 
 };
 document.getElementById('box').onclick=function() { 
       console.log('我是 div'); 
 }; 
 document.getElementsByTagName('input')[0].onclick= function(){
       console.log('我是 input'); 
 };
 但是一般我们只在指定的节点上添加事件, 而不想让其传递到下层节点触发事件, 这样我们就需要阻止事件冒泡;

 阻止事件冒泡有两个方法: 
      ( 在指定不想再继续传递事件的节点的事件执行函数中使用)
      1, 取消冒泡,  IE
        e.cancelBubble = true; 
      2, 停止传播, 非IE
       e.stopPropagation(); 

      例如: 
      document.getElementsByTagName('input')[0].onclick= function(evt){
           var e = evt || window.event;
           //可以通过下述两个方法取消事件冒泡
           if(e.stopPropagation){
          e.stopPropagation();
           }else{
              e.cancelBubble = true 
           };
 阻止浏览器默认行为
       if (e.preventDefault) {
     e.preventDefault();   //非IE
       }
       else {
               e.returnValue = false;  // IE
       }
4.拖拽
 所谓拖拽: 就是按住元素后移动位置, 最后松开的过程
 1, 实现拖拽相关的三大事件:
     onmousedown : 鼠标按下
     onmousemove : 鼠标移动
     onmouseup : 鼠标松开
 2, 实现拖拽思路:

     1, 给目标元素添加onmousedown事件(鼠标按下事件)
         在鼠标按下的瞬间, 记录鼠标所在位置与目标元素左边界的距离disX, 以及与上边界的距离disY

     2, 当onmousedown事件发生以后(鼠标按下后),就给document添加onmousemove事件(鼠标移动事件)
        在onmousemove(鼠标移动事件)中, 根据以下公式不断刷新目标元素所在的位置:
        公式: 目标元素的left = oEvent.clientX – disX + “px”;
              目标元素的top = oEvent.clientY – disY + “px”;

     3, 在onmousedown事件(鼠标按下事件)发生以后,给document再添加onmouseup事件(鼠标松开事件),且在onmouseup事件中,取消document的onmousemove事件;

     onload = function() {
         var box = document.getElementById("box");
         //鼠标按下
         box.onmousedown = function(evt) {
             var e = evt || event;
             //计算鼠标位置与div左边和上边的距离
             var disX = e.offsetX;
             var disY = e.offsetY;
             //鼠标移动
             document.onmousemove = function(evt) {
                 var e = evt || event;
                 box.style.left = e.pageX - disX + "px";
                 box.style.top = e.pageY - disY + "px";
             }
             //鼠标松开
             document.onmouseup = function() {
                 document.onmousemove = null;
                 document.onmouseup = null;
             }
         }
     }

推荐阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 2,681评论 1 11
  • 事件流 JavaScript与HTML之间的交互是通过事件实现的。事件,就是文档或浏览器窗口中发生的一些特定的交互...
    DHFE阅读 358评论 0 3
  • 初级-DOM详解系列 1-初识DOM DOM: Document Object Model (文档对象模型)简单来...
    2点半阅读 399评论 0 2
  • 这次旅行使我见识到了许多了解到许多自身的不足,也了解到好学生是如何学习。在初到校园时,之前李老师一直跟我们说廊坊的...
    三月孙记风阅读 65评论 1 1
  • 1,树:添加编辑页面只允许选中子节点,查询界面树干也是可以有选中的
    TC_25fe阅读 96评论 0 0