事件流

insertBefore

功能:将目标节点添加至参照节点之前
参数:dom.insertBefore(目标节点,参照节点)
    var oBtn = document.querySelector("button");
    var oInput = document.querySelector("input");
    var oUl = document.querySelector("ul");
​
    oBtn.onclick = function() {
        if (oInput.value != "") {
            var oLi = document.createElement("li");
            oLi.innerHTML = oInput.value;
            oUl.insertBefore(oLi, oUl.children[1]);
            oInput.value = "";
        }
    }

onscroll

滚动条事件
    window.onscroll = function() {
        // console.log("heihei");
        //获取滚动条高度:兼容写法
        // 读
        // var h = document.documentElement.scrollTop || document.body.scrollTop;
        // console.log(h);
    }
    // 返回顶端
    var oBtn = document.querySelector("button");
    oBtn.onclick = function() {
        //写
        document.documentElement.scrollTop = document.body.scrollTop = 0;
    }

事件与事件对象

事件三要素
    元素:触发事件的dom元素
    类型:事件的类型
    事件对象:事件对象包含着该事件的相关属性和方法,事件对象的产生必需得有事件
    document.onclick = function() {
        console.log(event);
    }
​
    document.onkeypress = function() {
        console.log(event);
    }
获取事件对象的兼容写法
    document.onclick = function(evt) {
        //无脑兼容
        var e = evt || event;
        console.log(e);
    }
注意事项:
// 事件对象的产生必须要有事件
// document.onclick = function() {
console.log(event); //undefined
// }

鼠标事件对象的属性

坐标
    document.onclick = function(evt) {
        var e = evt || event;
page针对于整个页面的左顶点 常用
    console.log("page:" + e.pageX + "," + e.pageY);
client针对于可视窗口的左顶点 用的少
    console.log("client:" + e.clientX + "," + e.clientY);
offset针对于父元素的左顶点 常用于拖拽
    console.log("offset" + e.offsetX + "," + e.offsetY);
    }

图片跟随鼠标移动

一个元素在页面发生位移，核心本质就是改变其left和top
    document.onmousemove = function(evt) {
        var e = evt || event;
        oTiger.style.left = e.pageX - oTiger.offsetWidth / 2 + "px";
        oTiger.style.top = e.pageY - oTiger.offsetHeight / 2 + "px";
    }

事件流

事件流: 当父子元素绑定相同的事件时， 子元素会向父元素传递， 或父元素会向子元素传递， 称为事件流。
冒泡: 子元素会向父元素传递
    onfocus onblur onload不会产生冒泡问题
捕获: 父元素向子元素传递

阻止冒泡

阻止冒泡
在事件传播的子元素上，通过事件对象调用函数
 oBtn.onclick = function(evt) {
    var e = evt || event;
    oUl.style.display = "block";
    // 阻止事件冒泡
    // e.stopPropagation();
    // e.cancelBubble = true;
​
    // 兼容阻止事件冒泡
    // 判断e.stopPropagation对象是否存在
    // if (e.stopPropagation) {
    //     e.stopPropagation();
    // } else {
    //     e.cancelBubble = true;
    // }
    //1.兼容写法
   e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
}
document.onclick = function() {
    oUl.style.display = "none";
}

阻止浏览器默认行为

a标签默认行为会刷新页面
    var oA = document.querySelector("a");
    oA.onclick = function(evt) {
        var e = evt || event;
        console.log("heihei");
        //阻止浏览器的默认行为
        // e.preventDefault();
        // e.returnValue = false;
        //1.兼容写法
        e.preventDefault ? e.preventDefault() : e.returnValue = false;
    }
    鼠标右键
    var oDiv = document.querySelector("div");  
    document.oncontextmenu = function(evt) {
        var e = evt || event;
        oDiv.style.left = e.pageX + "px";
        oDiv.style.top = e.pageY + "px";
        // e.preventDefault ? e.preventDefault() : e.returnValue = false;
        return false;
    }