day27（节点的增加（补充点）滚动事件以及事件（三要素，三注意，鼠标对象的兼容，事件流，以及浏览器的默认行为））

本文介绍: 一.节点增加（上条博客的补充点）二.滚动条事件（兼容性写法）5.浏览器的默认行为及阻止。1.三要素与三注意事项。2.事件对象的兼容获取。

一.节点增加（上条博客的补充点）

insertBefore

1.基本概念
	功能：按照指定位置添加子元素，将目标元素添加至参照元素之前；
	参数：父元素.insertBefore（目标元素，参照元素）（必须是父元素的直接子元素，如果隔代就会报错，在表格中，tr 的父元素默认是 tbody 而不是 table）
2.案例
		html：
	     <input type="text"&gt;
	    <ul&gt;
	        <li&gt;凢凢</li&gt;
	        <li&gt;峰峰</li>
	        <li>伦伦</li>
	    </ul>
	    <button>添加</button>
	script：
	    var oText = document.querySelector("input");
	    var oBtn = document.querySelector("button");
	    var oUl = document.querySelector("ul");
	
	    oBtn.onclick = function(){
	        if(oText.value != ""){
	            var oLi = document.createElement("li");
	            oLi.innerHTML = oText.value;
	            oUl.insertBefore(oLi,oUl.children[1]);-------------------children的含义为返回父元素所有子节点，其意义也就相当于将父元素所有的子元素存储在数组中，其调用方式也与数组相同，使用下标索引即可，且此处可设置为函数的形参变量
	            oText.value = "";-------------------------------点击添加之后input框清空
	        }
	    }

二.滚动条事件（兼容性写法）

滚动条事件：window.onscroll(与mousemove都是高频次事件）
滚动条的兼容写法:IE + 非IE
滚动条高度的读写：
    读：console.log(document.documentElement.scrollTop || document.body.scrollTop)
    写：document.documentElement.scrollTop = document.body.scrollTop = 0
案例：
    style:
         body{
                height: 1000px;
            }
            #btn{
                position: absolute;
                top:1000px;
            }
    html:
        <button id="btn">返回顶端</button>
    script:
        window.onscroll = function(){
            console.log(document.documentElement.scrollTop || document.body.scrollTop);------------------获取滚动条高度的兼容写法【读】
        }
        var oBtn = document.querySelector("#btn");
        oBtn.onclick = function(){
            document.documentElement.scrollTop = document.body.scrollTop = 0;----------------赋值滚动条高度的兼容写法【写】
        }

三.事件
1.三要素与三注意事项

	事件三要素：
	  1）事件元素：触发事件的元素
	  2）事件类型：触发事件的动作
	  3）事件对象：携带着相关事件的属性和方法，如果需要使用这些属性和方法则创建事件对象，反之不需要
	注意事项：
	  1）事件对象非必须（）
	  2）事件对象的产生必须有事件
	  3）事件对象只有鼠标事件对象和键盘事件对象

2.事件对象的兼容获取

事件对象的兼容获取：
    var e = evt || event;
    console.log(e);
案例：    
    document.onclick = function(evt){-------------此处event作为类似形参的对象，放在侦听函数的括号里面，当事件发生时，系统由此传参给函数体，event也可以自主命名，比如evt，e等（事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数）
        var e = evt || event;------------------------事件对象的兼容获取
        console.log(e);
    }
    
    document.onkeydown = function(){
            console.log(event);
    }

3.鼠标事件对象

三类坐标：
    1.page：针对页面的左顶点 常用
    2.client：针对可视窗口 不常用
    3.offset：针对于父元素的左顶点 常用于拖拽


案例1：
    document.onclick = function(evt){
        var e = evt || event;--------------------事件对象兼容性写法；
        console.log("page " + e.pageX + "," +e.pageY);----------page坐标，针对页面的左顶点
        
        console.log("client " + e.clientX + "," +e.clientY);-----------client坐标，针对可视窗口

        console.log("offset " + e.offsetX + "," +e.offsetY);---------offset坐标，针对于父元素的左顶点
    }


案例2：
    目标：实现页面内元素div跟随鼠标移动
    明确事件要素：
         大白板
         onmousemove
         事件对象----------使元素div位置和鼠标保持一致
    元素要在页面移动的核心思想：
        1.本质就是改变dom元素的left和top
        2.该dom元素一定要设置position: absolute;
    代码：
    style：
         #box{
            width: 100px;
            height: 100px;
            background-color: hotpink;
            position: absolute;
            left:200px;
            top:300px;
            cursor: move;
        }
    html：
        <div id="box"></div>
    script：
        var oBox = document.querySelector("#box");

    document.onmousemove = function(evt){
        var e = evt || event;
        oBox.style.left = e.pageX - oBox.offsetWidth/2 + "px";-----------获取width数据使用offsetWidth写法，直接获取数值，可用于计算。此处用鼠标在页面的坐标减去元素div一半的宽高赋值给元素div，是因为鼠标默认会在元素div左上角，我们希望将元素分别向上和向左平移宽高的一半，以便于鼠标位置在元素div中心点。
        oBox.style.top = e.pageY - oBox.offsetHeight/2 + "px";
    }

4.事件流

1）概念与注意事项
	事件流：父元素和子元素同时绑定相同事件时，会造成事件流的传递，当事件被触发时，事件流会由子到父或由父到子进行传递
	  1>冒泡：子->父 （默认）
	  2>捕获：父->子 （今天不讲）
	 注意事项：不是所有的事件都具备事件流冒泡效果，比如 onfocus（聚焦），onblur（失焦），onload（延迟）
2）阻止事件冒泡
	阻止子元素事件触发时波及添加了相同类型事件的父元素
	写法：
    1.阻止事件的冒泡（一般写法）
        e.stopPropagation();
        e.cancelBubble = true;

    2.兼容性阻止事件冒泡
        if(e.stopPropagation){-------------这里写的是一个函数对象，不是函数的调用，作用是检测该函数是否存在，存在则返回true，不存在返回false
            e.stopPropagation();
        }else{
            e.cancelBubble = true;
        }
        
     3.三目运算写法：e.stopPropagation?e.stopPropagation():e.cancelBubble = true;

	案例：
		需求：点击按钮列表出现，点击大白板列表消失
		
		style：
		     ul{
		            display: none;
		        }
		html：
		    <button>显示</button>
		    <ul>
		        <li>王思聪</li>
		        <li>李易峰</li>
		        <li>凢凢</li>
		    </ul>
		script：
		    var oUl = document.querySelector("ul");
		    var oBtn = document.querySelector("button");
		
		    oBtn.onclick = function(evt){
		        oUl.style.display = "block";
		
		        var e = evt || event;
		
		        e.stopPropagation?e.stopPropagation():e.cancelBubble = true;
		    }
		
		    document.onclick = function(){
		        oUl.style.display = "none";
		    }

5.浏览器的默认行为及阻止

1）基本概念
	我们没有给浏览器添加事件，而在一定条件下浏览器自己触发的事件
	比如说：1.a 标签的自动跳转 2。表单数据的提交 3。页面文字选中
2）阻止浏览器的默认行为
	如何阻止浏览器的默认行为：
	事件对象.属性或者方法
	一般写法：
	    e.preventDefault();-----------------------阻止浏览器默认行为的非IE写法
	    e.returnValue = false; ----------IE
	兼容性写法：
	    e.preventDefault?e.preventDefault():e.returnValue=false;
	补充写法：
	    return false; 


	案例：
	    oA.onclick = function(evt){
	        console.log("李逵");
	
	        var e = evt || event;
	        
	        e.preventDefault?e.preventDefault():e.returnValue=false;
	        或
	        return false;  
	    }
	 
	 
	案例：
	    鼠标右键点击oncontextmenu
	    document.oncontextmenu = function(){
	        console.log("嘿嘿");
	        return false;---------------------取消鼠标右键弹出设置菜单的默认行为；
	    }