Js_10_2_事件3

最新推荐文章于 2022-08-12 22:15:40 发布

小风儿

最新推荐文章于 2022-08-12 22:15:40 发布

阅读量448

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/littlewindy520/article/details/68932577

版权

JavaScript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

1.事件冒泡

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #wai{
                width: 300px;
                height: 300px;
                background: red;
                position: absolute;
                left: 300px;
                top: 300px;
            }

            #middle{
                width: 200px;
                height: 200px;
                background: green;
                position: absolute;
                left: 50px;
                top: 50px;
            }

            #nei{
                width: 100px;
                height: 100px;
                background: blue;
                position: absolute;
                left: 50px;
                top: 50px;
            }


        </style>
    </head>
    <body>
        <div id="wai">
            <div id="middle">
                <div id="nei">

                </div>
            </div>
        </div>
        <script type="text/javascript">
            var wai = document.getElementById("wai");
            var middle = document.getElementById("middle");
            var nei = document.getElementById("nei");
            wai.onclick = function(){
                console.log("wai");
            }
            middle.onclick = function(){
                console.log("middle");
            }
            nei.onclick = function(){
                console.log("nei");
            }
            document.body.onclick = function(){
                console.log("body");
            }
            document.onclick = function(){
                console.log("document");
            }
        </script>
    </body>
</html>
<!--
    1.什么事事件冒泡：就是当你点击目标标签，事件会从目标标签开始一直逐级向父级传递，直到html(document)
    2.传递过程中，无论是否实现相应的事件方法，都不会耽误事件向父级传递
    3.无论父级高度是否为0，只要实现了相应的事件方法，就会被冒泡过来的事件触发（但是你不能之间去点击这个标签触发事件，
    因为高度是0，你点不到它）
    //(改bug): 当你点击某个标签，不触发事件时候，去看一下它的宽度。
    4.不是所有的事件都支持冒泡（比如：onblur, onfocus, 就不支持冒泡）
-->

2.阻止冒泡

<script type="text/javascript">

middle.onclick = function(ev){
    console.log("middle");
    var evObj = ev || window.event;
//兼容性写法，判断某个属性或方法是否存在，不存在会返回undefined
    if(evObj.stopPropagation() != undefined){
        evObj.stopPropagation();         //停止传播 
    }else{
        evObj.cancelBubble = true;       //取消事件冒泡  IE 
    }
}

</script>

3.移入移出的区别

onmouseover（入） 会冒泡 onmouseout(出)

onmouseenter（入） 不会冒泡 onmouseleave（出）

4.默认事件：系统预先设置好的，

当你触发这个事件会执行一些特定的操作（比如：浏览器上右键弹出系统菜单）

1.在事件末尾，使用 return false;            阻止默认事件
2.非IE ：事件对象.preventDefault()         阻止默认事件
    IE ：事件对象.returnValue = false;     阻止默认事件

<style type="text/css">
    #myDiv{
        width: 100px;
        height: 300px;
        background: green;
        position: absolute;
        display: none;
    }
</style>
</head>
<body>
<div id="myDiv"></div>
<script type="text/javascript">
    var myDiv = document.getElementById("myDiv");
    document.oncontextmenu = function(ev){
        var evObj = ev || window.event;
        myDiv.style.display = "block";
        myDiv.style.left = evObj.clientX + "px";
        myDiv.style.top = evObj.clientY + "px";
        //return false;
        //ev.returnValue = false;  //IE专用
        //evObj.preventDefault();
    }
</script>

5.方法名可以当做变量一样，进行传递


<script type="text/javascript">
    var theFn = function(){
        console.log(132);
    }
    theFn();

    function youFn(){
        console.log(456);
    }
    youFn();
    //  方法名其实也是个变量
    //  方法名可以当做变量来使用

    function smallM(a, b){
        return a + b;
    }
    function girl(num1, num2, fn){//fn相当于是smallM
        return fn(num1, num2);
    }
    var me = girl(50, 20, smallM)
    console.log(me);
    //方法名可以当做变量一样，进行传递
</script>

6.addEventListener


<style type="text/css">
    #myDiv{
        width: 200px;
        height: 200px;
        background: red;
    }
</style>
</head>
<body>
<div id="myDiv"></div>
<script type="text/javascript">
    var myDiv = document.getElementById("myDiv");
    myDiv.addEventListener("click", function(){
        console.log("点我干啥");
    }, false)
    //格式：
    //标签.addEventListener("事件名"， 触发的方法， 冒泡 / 捕获阶段执行)
    //注意：所有的事件名 去掉 on
    //false ：可以省略 默认是false
    //false : 在冒泡阶段触发事件

    function clickFn(){
        console.log("别老点我！");
    }
    //绑定
    document.addEventListener("click", clickFn);
    //移除
    document.removeEventListener("click", clickFn);
    //注意： 绑定和移除的事件触发方法必须是同一个
    //参数三，也要保持一致
    //注意：即使同一个事件和触发方法，绑定了多次，但是只要移除一次，就全部移除

</script>

7.事件捕获

 当参数三为true 的时候，这个事件在捕获阶段执行
<div id="wai">
<div id="middle">
        <div id="nei">

        </div>
    </div>
</div>
<script type="text/javascript">
    var wai = document.getElementById("wai");
    var middle = document.getElementById("middle");
    var nei = document.getElementById("nei");

    wai.addEventListener("click", function(){
        console.log("wai");
    },true);
    middle.addEventListener("click", function(){
        console.log("middle");
    },true);
    nei.addEventListener("click", function(){
        console.log("nei");
    },true);
    document.body.addEventListener("click", function(){
        console.log("body");
    },true);
    document.addEventListener("click", function(){
        console.log("document");
    },true);
</script>


IE下的绑定事件监听的方式
<script type="text/javascript">
    //在IE下绑定事件监听的方式
    var myFn = function(){
        console.log("132");
    }
    //document.attachEvent("onclick", myFn);
    //删除
    //document.detachEvent("onclick",  myFn);
    //兼容性写法
    //参数1：标签
    //参数2：事件名
    //参数3：事件触发方法
    //参数4：事件句柄（专为addEventListener提供的）
    ldxAddEventListener(document, "click", myFn, true);
    function ldxAddEventListener(obj, type, fn, bol){
        if(obj.addEventListener != undefined){
            obj.addEventListener(type, fn, bol);//非IE
        }else{
            obj.attachEvent("on" + type, fn);//IE
        }
    }

</script>

8.两种绑定事件的区别


    DOM绑定事件会覆盖原来的
    addEventListener 绑定事件 会保留所有事件 可以在冒泡/捕获阶段，触发事件方法

    <script type="text/javascript">

            document.addEventListener("click", function(){
                console.log("我是第一次绑定");
            });
            document.addEventListener("click", function(){
                console.log("我是第二次绑定");
            });


            document.onclick = function(){
                console.log("我是第一次绑定");
            }
            document.onclick = function(){
                console.log("我是第二次绑定");
            }

            function clickFn(){
                console.log("点我！");
            }
            document.addEventListener("click", clickFn,false);
            document.onclick = clickFn;
            //只需要传方法，不需要调用
    </script>

9.事件委托

    1.事件委托，就是依靠事件冒泡的原理
    2.所有相同的子标签，把同一个事件委托共同给一个父级去实现
<body>
<ul id="myUL">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>       
<script type="text/javascript">
    var myUL = document.getElementById("myUL");
    myUL.addEventListener("click", function(ev){        
        var evObj = ev || window.event;//ev  火狐
        console.log(evObj);
        //利用事件对象里的target属性，为就能拿到真正触发事件的目标标签
        evObj.target.style.background = "red";
    })
</script>
</body>

10练习

//扣奖品
//5*5网格 div 
//每个div上放置一个黑色的div
//每当点击这个div，把黑色的div拿掉，显示后面的文字
//奖品信息，随机放在div中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">

            .fatherDiv{
                width: 100px;
                height: 100px;
                /*float: left;*/
                display: inline-block;
                margin-right: 5px;
                margin-bottom: 5px;
                position: relative;
                font-size: 48px;
                text-align: center;
                line-height: 100px;
            }
            .childDiv{
                width: 100px;
                height: 100px;
                margin-right: 5px;
                margin-bottom: 5px;
                position: absolute;
                left: 0;
                top: 0;
                background: black;
            }
        </style>
    </head>
    <body>
        <br />
        <div id="fatherDiv"></div>

        <script type="text/javascript">

            var fatherDiv = document.getElementById("fatherDiv");

            function createDiv(){
                for(var i = 1; i <= 25; i++){
                    var theDivFather = document.createElement("div");
                    var theDivChild = document.createElement("div");
                    theDivFather.className = "fatherDiv";
                    theDivFather.innerHTML = i;
                    theDivChild.className = "childDiv";

                    theDivFather.appendChild(theDivChild);
                    document.body.appendChild(theDivFather);
                    if(i % 5 == 0){
                        document.body.appendChild(document.createElement("br"));
                        //拼回车
                    }
                }
            }

            createDiv();
            document.onclick = function(ev){
                var evObj = ev || window.event;
                if(evObj.target.className == "childDiv"){
                    evObj.target.style.display = "none";
                    console.log(evObj);
                }
            }
            function prize(){
                var prizeArr = ["red", "yellow", "blue"];
                var divArr = document.querySelectorAll("body>div");
                for(var i = 0; i < prizeArr.length; i++){
                    var randNum = Math.floor(Math.random() * divArr.length);
                    divArr[randNum].style.background = prizeArr[i];
                }

            }
            prize()
        </script>
    </body>
</html>

小风儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Js_10_2_事件3

1.事件冒泡<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #wai{ width: 300px; height: 3
复制链接

扫一扫

专栏目录