JS--Day11(事件对象+阻止冒泡)

一.insertBefore

父元素.insertBefore(目标节点,参照节点):将目标节点添加至参照节点之前

二.onscroll

浏览器高度的兼容写法:document.body.scrollTop || document.documentElement.scrollTop

三.事件

①事件的三要素

1.事件源:操作事件的元素

2. 事件类型:事件属于哪种类型,鼠标事件类型，键盘看事件类型，onclick,ondblclick,onmouseout...

3.事件对象: 必须得有事件触发,它携带者相关事件类型的属性和方法,是非必须的

②事件对象获取的兼容写法: 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);

五.事件流

事件流:事件是可以传递的,当父子元素同时绑定相同的事件类型时，父元素和子元素会相互影响

事件冒泡:子--->父（常见）,onload,onblur,onfocus不会触发冒泡

事件捕获:父--->子 (一辈子见不到)

六.阻止事件冒泡

阻止事件冒泡:添加在子元素中

阻止事件冒泡兼容性写法: e.stopPropagation?e.stopPropagation():e.cancelBubble = true;

七.取消浏览器的默认行为

取消浏览器的默认行为兼容性写法：e.preventDefault?e.preventDefault():e.returnValue = false;

  //取消浏览器的默认行为
    oA.onclick = function(evt){
        console.log("heihei");
        var e = evt || event;
        // e.preventDefault();
        // e.returnValue = false;
        // e.preventDefault?e.preventDefault():e.returnValue = false;
       return false;
    }

//a标签默认行为
 <!-- 只要跳转就会刷新页面 --> <a href="">跳转</a>
 默认行为；oncontextmenu鼠标右键

课堂案例

//1.小老虎跳一跳
 var oTiger = document.querySelector("#tiger");

    document.onclick = function(){
        oTiger.style.top = oTiger.offsetTop - 100 + "px";
        setTimeout(function(){
            oTiger.style.top = "500px";  
        },3000);
    }

//2.图片跟随鼠标移动
  var oTiger = document.querySelector("#tiger");

    document.onmousemove = function(evt){
        //元素的位移本质就是改变其left和top
        var e = evt || event;
        oTiger.style.left = e.pageX - oTiger.offsetWidth/2 + "px";
        oTiger.style.top = e.pageY - oTiger.offsetHeight/2 + "px";
    }