Day12 默认行为和事件冒泡

2018-01-15 本文已影响0人 azure_1122

浏览器的默认行为以及阻止浏览器的默认行为（兼容）

javascript中的默认行为是指javascript中事件本身具有的属性，如<a>标签可以跳转，文本框可输入文字、字母、图片路径等，右键浏览器会出现菜单等行为便被称为浏览器的默认行为。

return false; 退出执行, 所有触发事件和动作都不会被执行.
可以用来替代 preventDefault()（取消默认事件）
ev.preventDefault(); 标准浏览器阻止默认事件,DOM事件使用此方法取消默认事件。
ev.returnValue = false;

<script type="text/javascript">
        var oA=document.getElementsByTagName('a')[0];
        oA.onclick=function(ev){
            return false;//阻止浏览器的默认行为
            var ev=ev||window.event;
            ev.preventDefault();//标准
            ev.returnValue=false;
        }
</script>

非标准浏览器（IE8）阻止默认事件

事件监听器（事件绑定）

target.addEventListener("click", fun, false); --标准浏览器
target.attachEvent("onclick",fun); --IE浏览器（执行顺序按照绑定的反序）
removeEventListener()/detachEvent() 移除事件绑定的参数和添加事件绑定是一致的。注意匿名函数的问题。

可以绑定多个函数在一个对象上。
执行顺序按照绑定的顺序来（IE反向）。
第三个参数是否使用捕捉(反向冒泡)，默认false，为冒泡。
标准浏览器和非标准浏览器事件绑定的区别。
DOM 0级和 DOM 2级的区别：
0级
- onclick/onmousedown 普通事件
- DOM 0级事件取消：将结果设为空 (null)
- 一个对象上面只能绑定同一个事件(事件处理函数)
2级
- 一个元素对象上面可以绑定多个事件处理函数。
- 标准浏览器：addEventListener('事件类型',函数,是否捕获);
- 1.事件类型：click,mouseover,mousedown,keyup
- 2.处理的函数
- 3.是否捕获:true:捕获 false:冒泡
区别：
- 普通事件绑定一个事件，事件绑定多个事件
- 普通事件取消赋值为null,事件绑定removeEventListener,detachEvent
- 注意事件类型。事件绑定不带on

事件捕获

“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。

Netscape团队提出的另一种事件流叫做事件捕获,即事件开始时由最不具体的节点应该早接收到事件，而最具体的节点应该最后接收到事件。

事件委托机制

利用冒泡机制，将子元素事件委托给父元素执行。

<body>
            <input type="text" /> <br />
            <button>创建li</button>
            <ul id="ul1">
                <li>aaaaaaaaaaaaaaaa</li>
                <p>pppppppppppppppppp</p>
                <li>bbbbbbbbbbbbbbbb</li>
                <p>pppppppppppppppppp</p>
                <li>cccccccccccccccc</li>
            </ul>
    <script type="text/javascript">
            var oInput=document.getElementsByTagName('input')[0];
            var oBtn=document.getElementsByTagName('button')[0];
            var oUl=document.getElementById('ul1');
            
            
            
        事件处理函数能够做到的事情，事件绑定肯定可以完成，反之不行。
            oBtn.onclick=function(){
                var cli=document.createElement('li');
                cli.innerHTML=oInput.value;
                oUl.appendChild(cli);
            
            };
            
            
        选择所有的li，添加点击事件，输出li里面的文本
            var aLi=document.getElementsByTagName('li');
            for(var i=0;i<aLi.length;i++){
                aLi[i].onclick=function(){
                    alert(this.innerHTML);
                }
            }
            
            
        事件委托：利用冒泡的原理，将子元素的事件委托父元素来完成。
            ev.target:当前点击的元素对象。
            ev.srcElement:当前点击的元素对象。//ie
            ev.type:事件类型，onclick
            
            oUl.onclick=function(ev){
                var ev=ev||window.event;
                alert(ev.target);
                var ele=ev.target||ev.srcElement;//当前点击的元素对象
            alert(ele.nodeName);//节点的元素名称，全部大写的名称
                if(ele.nodeName=='LI'){
                    alert(ele.innerHTML);
                }
            }
            
            
            document.onclick=function(ev){
            console.log(ev);
            }
            </script>
            </body>

拖拽效果（onmousedown/onmousemove/onmouseup）

拖拽的过程中，短线的位置是不变的，鼠标的位置是随着move时候发生变化，通过可变的move 和不可变的短线求盒子的位置

应用

1．鼠标拖拽轨迹

2．弹出窗口拖拽（百度的登录框）

3．扩展案例：拖拽轨迹回放

综合应用

1．九宫格拖拽交换位置