webAPI的基础理解与运用文本框DOM节点事件流鼠标事件（九）

添加元素的其他方式

注意

    通过 父元素DOM对象.appendChild(元素), 将创建好的元素添加到了父元素中的末尾。

insertBefore

   语法：
     父DOM对象.insertBefore(新节点,旧节点);

    参数介绍：
        1. 第一个参数表示的就是要在父容器中添加的新元素

        2. 第二个参数表示的是要将新元素添加到哪个元素之前（目标元素）

cloneNode(true|false)

   语法：
      DOM对象.cloneNode(boolean);

   参数介绍：
       1. 参数是一个布尔类型的参数

       2. 如果参数是false，只克隆标签本身，不包括标签中的内容

       3. 如果参数是true，不仅要克隆标签本身，还包括标签中的所有内容

replaceChild

   语法：

     父DOM对象.replaceChild(新节点,旧节点);

   参数介绍：
      1. 第一个参数代表的是新节点（元素）

      2. 第二个参数代表的是被替换的节点（元素）

oninput事件

    
    事件特点：

         当用户在输入的时候，就会触发该事件。

注册事件

on方式注册事件

   语法：
      DOM对象.on事件名称 = function() {

      };

   特点：

     1. 如果给元素注册的事件是相同的事件，那么后面的事件会将前面的事件覆盖掉
      

addEventListener方式注册事件

   语法：
      DOM对象.addEventListener('事件名', function(){});

   特点：
      1. 通过addEventListener可以给元素注册多个事件

      2. 如果注册的事件名字相同，不会发生事件覆盖的问题。

attachEvent方式注册事件（解决IE8以上浏览器兼容问题）

   语法：
      DOM对象.attachEvent('on+事件名', function(){});

   特点：
      1. 该方式可以给元素注册多个事件
      2. 该方法只适合在IE浏览器环境下使用 【了解】

移除事件

移除通过on方式注册的事件

   语法：
       DOM对象.on事件名 = null;
    总结：
        1. 该种移除事件的方式，仅限在注册事件的时候就使用的是 on 方式

移除通过addEventListener注册的事件

   语法：
      DOM对象.removeEventListener('事件名', 函数名)
   特点：
      1. 要通过removeEventListener移除事件时候，要通过函数名的方式移除

      2. 必须保证在注册事件的时候，处理程序就得是命名函数

      3. 例如：
        div.addEventListener('click', fn);      
        function fn() {
           alert(1);
        }

        //移除
        div.removeEventListener('click', fn);

移除通过attachEvent注册的事件【兼容IE低版本】

   语法：

      DOM对象.detachEvent('事件名', 函数名);

   特点：
      1. 使用detachEvent移除事件时候，要通过函数名移除（注册的时候需要是命名函数）

      2. 使用detachEvent移除事件的时候，方式与removeEventListener一样

      3. detachEvent移除事件的时候，事件名称前需要加 'on'

事件流

组成

    1. 事件捕获 : 事件从外向内传递执行

    2. 事件执行： 开始执行事件中的代码
    
    3. 事件冒泡： 事件从内向外传递执行

委托思想

    
    委托思想：

        1. 可以将自己完成的事情（事件）交给父元素完成 [冒泡和捕获]

        2. 通过事件对象参数获取具体的值


     事件对象参数：

         1. 本质上就是参数

         2. 事件对象参数是保存，事件执行过程中产生的数据（值）

         3. 例如

          ul.onclick = function(e) {

            //e: 事件对象参数
             
            //获取当前点击标签的文字
            console.log(e.target.innerText);
          }


          4. 事件对象参数就是一个对象

事件对象参数

    e.target:  得到的就是当前点击的具体的那个对象
    
    e.clientX:   鼠标点击位置相对可视区域左上角的横坐标
    e.clientY：  鼠标点击位置相对可视区域左上角的纵坐标

    e.offsetX:   鼠标点击位置相对当前事件源左上角横坐标
    e.offsetY：  鼠标点击位置相对当前事件源左上角纵坐标

    e.pageX:     鼠标点击位置相对于整个页面（包括滚动条出去的位置）【非标准属性】
    e.pageY:     鼠标点击位置相对于整个页面

    e.screenX:   鼠标点击位置相对整个浏览器的横坐标
    e.screenY:   鼠标点击位置相对整个浏览器的纵坐标

    e.stopPropagation();   //阻止事件冒泡

    例如：
       var divs = document.querySelectorAll('div');

       for(var i = 0; i < divs.length; i++) {

          //点击每一个div
            divs[i].addEventListener('click', function(e) {

                console.log(this.className);
                //阻止事件冒泡
                e.stopPropagation();
            })
       }

鼠标移动事件

onmousemove

    
    事件：onmousemove 

       鼠标移动的时候就会触发该事件。

    注意：
        1. 在修改元素位置的时候,一般是将元素先设置为绝对定位

键盘事件

onkeydown

    当前键盘上任意的一个键被按下去，会触发onkeydown事件

onkeyup

   当前键盘上的任何一个键抬起时候，触发onkeyup事件

onkeypress

   当前键盘上任意的一个键被按下去，触发onkeypress

   特点：
       1. 键盘上的一些功能键无法获取（方向键， alt， ctrl）

键盘事件对象参数

    e.key  | e.code ----> 键的名字（字符串）

    e.keyCode   -----> 每一个键对应的一个值

BOM阶段

概念

    BOM（Browser Object Model）即浏览器对象模型。

js中的顶级对象

    window对象是js中的顶级对象，定义在全局作用域中的变量、函数都会变成window对象的属性和方法，在调用的时候可以省略window。

页面加载事件

   window.onload = function() {};

   特点：
   页面上的所有元素都创建完成，并且引用的外部资源都下载完毕（js,css）

定时器

setTimeout()

    
   语法：

      setTimeout(function(){}, time)

   总结：
       1. 返回一个当前定时器的id
       2. time毫秒

setInterval()

   语法：
      setInterval(function(){}, time);

   总结：
      1. 返回当前定时器的id
      2. time毫秒

location对象

    
    1. href属性

    2. window.open('url路径'); 

    3. reload(boolean);