day12 事件注册、解绑、事件流（冒泡、捕获）、默认阻止事件、阻止冒泡

注册及解绑事件的3中方式：

1. DOM 0级：

• 注册事件：element.[‘on’+type]=fn =function(){}
• 解绑事件： oDiv.οnclick=null

    注册
    oDiv.onclick = function () {
        this.style.background = 'red'
    }
    //解绑
    oDiv.onclick=null

2.DOM 2级：

• element.addEventListener(‘type’,fn, false)
  • false为冒泡事件 自下而上显示
  • true为捕获事件 自上而下显示
• 注册事件：element.addEventListener(‘type’,fn, false)
• 解绑事件：element.removeEventListener(‘type’,fn, false)

    先将函数提炼出来为fn  再把fn放入DOM2的注册事件和解绑事件中

    function fn() {
        this.style.background = 'red'
    }
    //注册
    oDiv.addEventListener('click', fn, false)
    //解绑
    oDiv.removeEventListener('click', fn, false)

3.IE注册

• 注册事件：element.attachEvent(‘on’+type,fn)
• 解绑事件：element.detachEvent(‘on’+type,fn)

    先将函数提炼出来为fn  再把fn放入DOM2的注册事件和解绑事件中
        function fn() {
        this.style.background = 'red'
        }
    //注册
    oDiv.attachEvent('onclick', fn)
    //解绑
    oDiv.detachEvent('onclick', fn)

注册方式的函数封装

    //注册方式的函数封装
    function addEventListener(element, type, fn) {
        if (element.addEventListener) {
            element.addEventListener(type, fn, false)
        } else if (element.attachEvent) {
            element.attachEvent('on' + type, fn)
        } else {
            element['on' + type] = function () { }
        }
    }

解绑方式的函数封装

    //解绑方式的函数封装
    function removeEventListener(element, type, fn) {
        if (element.removeEventListener) {
            element.removeEventListener(type, fn, false)
        } else if (element.detachEvent) {
            element.detachEvent('on' + type, fn)
        } else {
            element['on' + type] = null
        }
    }

事件流：

• 页面接收事件的顺序

1. DOM事件流：

• 事件在元素节点之间按照特定的顺序进行传播

2.特定的顺序：

• IE： 冒泡，事件触发时，是从最具体(触发的元素)的元素向上逐层传播，直达最顶层元素
• 网景：捕获，事件触发时，是从最顶层逐层向下传播，直达最具体元素

3.W3C：DOM事件流的标准：

• 1、捕获阶段
• 2、目标阶段
• 3、冒泡阶段

4.1 DOM0级和IE事件处理都不支持捕获

4.2 DOM2级支持冒泡和捕获 false:冒泡；true捕获

冒泡事件：

• 冒泡: 多个元素（层级）绑定同样的事件，事件触发时，从具体的元素向上逐层传递
• element.addEventListener(‘type’,fn, false)

        var oSon = document.querySelector('.son')
        var oFather = document.querySelector('.father')
        var oGradfther = document.querySelector('.gradfther')

        // DOM0级和IE事件处理都不支持捕获

        // DOM2级支持冒泡和捕获
        // ele.addEventListener('click',fn,false) ;  false:冒泡。true捕获

        // oSon.onclick DOM0:不支持捕获  ,冒泡  

        冒泡事件   先显示 1.儿子  2.爸爸  3.爷爷
        oSon.onclick = function(){
            alert('儿子')
        }
        oFather.onclick = function(){
            alert('爸爸')
        }
        oGradfther.onclick = function(){
            alert('爷爷')
        }  

捕获事件：

• 多个元素（层级）绑定同样的事件，事件触发时，从最不具体的依次向下传播
• element.addEventListener(‘type’,fn, true)
• DOM2级支持冒泡和捕获：先捕获事件后冒泡事件

        先捕获事件后冒泡事件   1.爷爷  2.爸爸  3.儿子  4.儿子  5.爸爸  6.爷爷
        oSon.addEventListener('click',function(){
            alert('儿子')
        },true)
        oFather.addEventListener('click',function(){
            alert('他爸')
        },true)
        oGradfther.addEventListener('click',function(){
            alert('他爷')
        },true)


        oSon.addEventListener('click',function(){
            alert('儿子')
        },false)
        oFather.addEventListener('click',function(){
            alert('他爸')
        },false)
        oGradfther.addEventListener('click',function(){
            alert('他爷')
        },false)

阻止默认行为事件

• a标签的链接跳转、鼠标右击的菜单
• var e = e || window.event 事件对象的兼容性写法

1. DOM 0级阻止事件：return false

2.DOM2级的阻止方式 e.preventDefault() ：

3.ie阻止事件：e.returnValue=false

阻止a标签链接跳转

    阻止a标签链接跳转
    var oA = document.querySelector('a')
    var oDiv = document.querySelector('div')
    //DOM0级阻止事件：   return false
    oA.onclick = function (e) {
        // oDiv.style.display = 'block'
        this.nextElementSibling.style.display = 'block'   //设置odiv显示 无需获取
        var e = e || window.event
        // return false         //DOM0级阻止事件
        // e.preventDefault()   //DOM2级的阻止方式
        e.returnValue = false     //ie阻止事件
    }

4.禁止复制

        // 禁止复制
        document.onselectstart = function(){
            return false;
        }

阻止事件冒泡：

• var e = e || window.event

1. 1.标准写法：e.stopPropagation();

2.ie不兼容写法： e.cancleBubble=true; 或者window.event.cancelBubble = true;

• 非标准 cancel 取消 bubble 泡泡

• element.addEventListener(‘type’,fn, false)

• false为冒泡事件 自下而上显示

• true为捕获事件 自上而下显示

   var son = document.querySelector('.son');

    // 给son注册单击事件    
    son.addEventListener('click', function (e) {
        alert('son');
        e.stopPropagation(); // stop 停止 Propagation 传播        
        window.event.cancelBubble = true; // 非标准 cancel 取消 bubble 泡泡   
    }, false);

    var father = document.querySelector('.father');

    // 给father注册单击事件    
    father.addEventListener('click', function () {
        alert('father');
    }, false);

    // 给document注册单击事件    
    document.addEventListener('click', function () {
        alert('document');
    })

案例

1、页面拖拽

拖拽相关事件：onmousedown  onmousemove onmouseup
        拖拽的思路：
        1. 先鼠标按下 ，得到一个元素点击位置距离元素自身的坐标 x
        2. 鼠标移动，得到一个新的坐标（相对于浏览器窗口的）newx -x，得到一个新的移动到的位置  
        3. 可以设置给元素的做偏移量和上偏移量
        4. 鼠标抬起，清除按下和移动事件
 <style>
        div {
            width: 100px;
            height: 100px;
            background-color: blueviolet;
            position: absolute;
        }
    </style>
    //拖拽事件：onmonusedown   onmousemove   onmouseup
    // 思路：按下-->再移动，抬起时不动
    var oDiv = document.querySelector('div');
    oDiv.onmousedown = function (e) {
        // 光标位置距离元素自身的left和top值
        var x = e.clientX - this.offsetLeft;
        var y = e.clientY - this.offsetTop;

        document.onmousemove = function (e) {
            var dis_x = e.clientX - x;
            var dis_y = e.clientY - y;
            oDiv.style.left = dis_x + 'px';
            oDiv.style.top = dis_y + 'px';
        }
        document.onmouseup = function () {
            document.onmousemove = null;
        }
    }

2、鼠标右键：默认阻止事件

        // 鼠标右键：默认事件  DOM0级( return false;)
        document.oncontextmenu = function (e) {
            var ev = window.event || e;
            oDiv.style.display = 'block'
            oDiv.style.left = ev.pageX + 'px'
            oDiv.style.top = ev.pageY + 'px'
            return false;
        }