事件二

事件的两个行为

事件冒泡

事件层叠范围从里往外触发

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

事件捕获

事件从外往里触发

阻止浏览器默认行为

// 阻止a标签默认跳转
1.e.preventDefault()  // 阻止默认行为
// ie写法 适用高版本浏览器 可能被废弃
1.e.returnValue = false

2.return false  // 阻止默认行为

鼠标右键菜单栏事件

document.oncontextmenu 上下文菜单
e.preventDefault() 阻止默认行为 可以自定义右键功能

拖拽

<div class="box"></div>
<script>
	var oBox = document.querySelector('.box');
    oBox.onmousedown = function (e) {
        e = e || window.event;
        // 包含不可见坐标pageX
        var curX = e.offsetX;
        var curY = e.offsetY;
        // 按下事件 添加 移动事件
        document.onmousemove = function (e) {
           	e = e || window.event;
            var tarX = e.pageX - curX;
            var tarY = e.pageY - curY;
            oBox.style.left = tarX + 'px';       
            oBox.style.top = tarY + 'px'; 
        }
        document.onmouseup = function () {
            document.onmousemove = false;
        }
    }
</script>

区间拖拽

offset家族 获取对应偏移的位置 基于加了定位的父元素，如无基于body
offsetParent 偏移的父元素
offsetLeft 左偏移距离
offsetTop 上偏移距离
offsetWidth 偏移元素的宽度
offsetKHeight 偏移元素的高度

- 鼠标在大盒子里面的位置其实就是 = 当前的鼠标在页面上的位置（page） - 大盒子离页面的距离（offset家族）
- 移动的位置 = 得到鼠标在大盒子里面的位置 - 鼠标在小盒子里面的位置
- 最大的移动区间 =  父元素的宽(高)度 - 子元素的宽(高)度

获取style样式

// 获取节点所有样式 通过属性名获取值
window.getComputedStyle(obj).backgroundColor
// 兼容写法
obj.currentStyle

事件监听器

1.采用了观察者模式(observer)
2.同一个事件有多个处理函数
3.在添加事件的时候对应处理的函数不能是匿名函数，否则不能被移除

// 添加事件监听
addEventListener(事件名, function名, 冒泡false捕获true)


// 移除事件监听 只会移除addeventListener
removeEventListener(事件名, function名)

// 兼容ie8以下
obj.attachEvent("onclick", fn)  // 添加
obj.detachEvent("onclick", fn)  // 移除