DOM事件处理详解-优快云博客

obj.onlick:

<div style="width: 100px; height: 100px; background-color:red;position: absolute;left: 0px;"></div>
        <script type="text/javascript">
            var div=document.getElementsByTagName("div")[0];
            div.onclick=function(){
                this.style.backgroundColor="green";
            }
        </script>

点击这个红正方形就会变成绿色

但是这个一个对象的一个处理事件只能实现一个方法

obj.addEventLinstener(type,function,false)

addEventListener

<ul>
            <li>0</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul> 
        <!-- <div style="width: 100px; height: 100px; background-color:red;position: absolute;left: 0px;"></div> -->
        <script type="text/javascript">
            var liCol=document.getElementsByTagName("li"),
            len=liCol.length;
            for(var i=0;i<len;i++){
                (function(i){
                    liCol[i].addEventListener("click",function(){
                        console.log(i);
                    },false)
                }(i))
            }
        </script>

这个实现了

点击什么数字打印出什么数字

ele.removeEvetListener()

<div style="width: 100px; height: 100px; background-color:red;position: absolute;left: 0px;"></div>
        <script type="text/javascript">
        var div=document.getElementsByTagName("div")[0];
        div.addEventListener("click",test,false);
        function test(){
            console.log("a");
        }
        div.removeEventListener("click",test,false);

这样以后就点击不了下面的这个小方块了

事件冒泡：

<div class="wrapper">
            <div class="oppset">
                <div class="dirren"></div>
            </div>
        </div>
        <!-- <div style="width: 100px; height: 100px; background-color:red;position: absolute;left: 0px;"></div> -->
        <script type="text/javascript">
            var wrapper=document.getElementsByClassName("wrapper")[0];
            var oppset=document.getElementsByClassName("oppset")[0];
            var dirren=document.getElementsByClassName("dirren")[0];
            wrapper.addEventListener("click",function(){
                console.log("wrapper");
            },false)
            oppset.addEventListener("click",function(){
                console.log("oppset");
            },false)
            dirren.addEventListener("click",function(){
                console.log("dirren");
            },false)

这三个重叠的正方形，点击最小的那个就会打印出：

这就是事件冒泡的意思，好像会“漏”下去一样，因为这三个div结构是嵌套的，所以才会这样，而不是因为视觉上的重叠

事件捕获：

将后面的参数改成true

wrapper.addEventListener("click",function(){
                console.log("wrapper");
            },true)
            oppset.addEventListener("click",function(){
                console.log("oppset");
            },true)
            dirren.addEventListener("click",function(){
                console.log("dirren");
            },true)

打印的顺序是反的，再来看：

 wrapper.addEventListener("click",function(){
                console.log("wrapper");
            },false)
            oppset.addEventListener("click",function(){
                console.log("oppset");
            },false)
            dirren.addEventListener("click",function(){
                console.log("dirren");
            },false)
            wrapper.addEventListener("click",function(){
                console.log("wrapperB");
            },true)
            oppset.addEventListener("click",function(){
                console.log("oppsetB");
            },true)
            dirren.addEventListener("click",function(){
                console.log("dirrenB");
            },true)

先设定了三个事件执行，再设定了三个事件捕获，点击最小的正方形就会出现：

可以发现点击最小的正方形就会先捕获，然后到了小正方形的时候就会事件执行，然后是最小的正方形的事件捕获，再依次事件执行

event.stopPropagation():

wrapper.addEventListener("click",function(e){
                e.stopPropagation();
                console.log("wrapper");
            },false)
            oppset.addEventListener("click",function(e){
                e.stopPropagation();
                console.log("oppset");
            },false)
            dirren.addEventListener("click",function(e){
                console.log("dirren");
                e.stopPropagation();
            },false)

这样就会取消冒泡，点击小正方形就会只打印一个：

封装取消绑定的方法：

function stopBubble(event){
                if(event.stopPropagation()){
                    event.stopPropagation();
                }else{
                    event.stopBubble=true;
                }
            }

取消默认事件的方法：

1.return false

document.oncontextmenu=function(){
                console.log("a");
                return false;
            }

oncontextmenu是一个网页中点击鼠标右键的一个默认事件，然而这样return false之后单击右键就只会打印a，但是不会出现菜单了

2.event.preventDefault()

这里传入一个对象e，因为系统默认就会给函数加上一个对象e

document.oncontextmenu=function(e){
                console.log("a");
                e.preventDefault();
            }

3.event.returnValue=false

document.oncontextmenu=function(e){
                console.log("a");
                e.returnValue=false;
            }

4.封装取消默认事件的函数

 function cancelHandeler(event){
                if(event.preventDefault()){
                    event.preventDefault();
                }else{
                    event.returnValue=false;
                }
            }