码迷，mamicode.com
首页 > 其他好文 > 详细

12、事件（下）

时间：2018-07-06 21:30:52      阅读：186      评论：0      收藏：0      [点我收藏+]

标签：取消   red   点击事件   微博   div2   ini   enter   pos   fse   

1、阻止右键菜单

        <style>
            #div1{
                width: 500px;
                height: 500px;
                background-color: red;
            }
            #menu{
                width: 100px;
                height: 100px;
                background-color: gray;
                position: absolute;
                display: none
            }
        </style>
        <script>

自定义右键菜单
1、阻止默认右键菜单
2、自定义右键菜单
<1>mousedown button == 2
<2>按下右键
右键菜单显示，并且移动到点击的位置
<3>按下鼠标上除右键的其他键，菜单隐藏

            window.onload = function(){

                //固定写法
                document.oncontextmenu = function(){
                    return false;
                }

                var oDiv1 = document.getElementById("div1");
                var oMenu = document.getElementById("menu");

                oDiv1.onmousedown = function(event){
                    var e = event || window.event;
                    if(e.button == 2){
                        //<1>menu显示
                        oMenu.style.display = "block";
                        //<2>将menu移动到鼠标点击的位置
                        oMenu.style.left = e.clientX + "px";
                        oMenu.style.top = e.clientY + "px";
                    }else{
                        oMenu.style.display = "none";
                    }
                }
            }
        </script>
        
    <body>
        <div id = "div1">
            <div id = "menu">
                <ul>
                    <li>选项1</li>
                    <li>选项2</li>
                    <li>选项3</li>
                </ul>
            </div>
        </div>
    </body>

2、阻止默认行为

            window.onload = function(){
                var oA = document.getElementById("a1");

绑定点击事件，函数中返回值为false；
window.confirm
点击确定返回true，点击取消返回false

oA.onclick = function(){
                    // return false;
                    var res = window.confirm("你确定要跳转吗？");
                    if(res){
                        return true;
                    }else{
                        return false;
                    }
                }
            }
        </script>
    </head>
    <body>

点击a，自动进行跳转，叫做浏览器的默认行为。

        <a id = "a1" href="https://www.baidu.com">百度</a>
    </body>

3、拖拽

        <style>
            #div1{
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
                left: 200px;
                top: 100px
            }
        </style>
        <script>

1、mousedown
记录，被拖拽物体和，鼠标按下的相对位置，
这个相对位置，在被拖动的过程中也保持。

2、同时按下并且拖拽的时候，才能拖拽着走
mousedown mousemove
3、鼠标抬起，停止拖拽
mouseup

            window.onload = function(){
                var oDiv = document.getElementById("div1");

                drag(oDiv);
            }

            function drag(node){
                //暂存相对位置
                var offsetX = 0;
                var offsetY = 0; 
                node.onmousedown = function(event){
                    //1、开始拖拽
                    var e = event || window.event;

                    offsetX = e.clientX - node.offsetLeft;
                    offsetY = e.clientY - node.offsetTop;
                    
                    //2、mousemove 改变被拖拽物体的位置
                    document.onmousemove = function(event){
                        var e = event || window.event;
                        node.style.left = e.clientX - offsetX + "px";
                        node.style.top = e.clientY - offsetY + "px";

                    }
                    //3、当鼠标抬起，取消拖拽
                    document.onmouseup = function(){
                        document.onmousemove = null;
                    }
                }
            }
        </script>
    </head>
    <body>
        <div id = "div1"></div>
    </body>

4、事件委托

<script>

委托:
母亲 ?委托方
你 ?? 代理方

事件委托:
li标签委托ul执行onclick事件。
委托方 li 收益
代理方 ul 执行

【注】li委托ul去执行onclick操作

            window.onload = function(){
                var oUl = document.getElementById("ul1");
                var aLis = oUl.getElementsByTagName("li");

背下去：
1、找到当前要添加事件的父级或者祖父节点
2、将事件绑定在父一级的标签
3、找出触发该事件的对象，进行判断

                oUl.onclick = function(event){
                    var e = event || window.event;
                    var target = e.target || e.srcElement;

                    //这里转成全小写更准确
                    if(target.nodeName.toLowerCase() == "li"){
                        //判断是我们的委托方
                        target.style.backgroundColor = "red";
                    }
                }

1、浪费资源 解决
2、后添加的li标签，没有拥有这个onclick

                var oBtn = document.getElementById("btn1");

                var count = 5;
                oBtn.onclick = function(){
                    //添加li
                    var node = document.createElement("li");
                    node.innerHTML = 111111111 * count++;
                    oUl.appendChild(node);
                }

            }
        </script>
    </head>
    <body>
        <ul id = "ul1">
            <li>111111111</li>
            <!-- onclick -->

            <li>222222222</li>
            <!-- onclick -->

            <li>333333333</li>
            <!-- onclick -->

            <li>444444444</li>
            <!-- onclick -->
            <div>div</div>
            <span>span</span>
        </ul>
        <button id = "btn1">增加</button>
    </body>

5、事件监听器

事件监听器：
removeEventListener()
addEventListener()

removeEventListener
格式：node.removeEventListener(事件类型, 要删除的函数的名字)

addEventListener
格式：node.addEventListener(事件类型, 函数, false)
参数：第一个参数 要绑定的事件类型
第二个参数 要绑定的函数
第三个参数 false 默认值 事件冒泡 从里向外
? ? ? ? true 事件捕获 从外向里

            window.onload = function(){
                var oDiv = document.getElementById("div1");

                //传统的事件绑定
                /*oDiv.onclick = function(){
                    alert(123);
                }*/

                /*oDiv.addEventListener("click", function(){
                    alert(123);
                }, false);*/


                var aBtns = document.getElementsByTagName("button");
                //增加
                aBtns[0].onclick = function(){
                    // aBtns[1].onclick = show;

                    aBtns[1].addEventListener("click", show, false);
                }


                //删除
                aBtns[2].onclick = function(){
                    // aBtns[1].onclick = null;
                    aBtns[1].removeEventListener("click", show);

                }

                function show(){
                    alert(123);
                }

            }
        </script>
    </head>
    <body>
        <!-- <div id = "div1">div</div> -->

        <button>增加点击事件</button>
        <button>按钮</button>
        <button>删除点击事件</button>
    </body>

6、传统事件问题

传统事件绑定的问题：

1、会覆盖，后添加的事件会把前面添加的事件覆盖掉。
            // alert(window.onload); //null

            window.onload = function(){
                alert(1);
            }
            /*
                【注】当window.onload绑定事件以后，数据类型会变成function。
            */
            // alert(typeof window.onload);

            if(typeof window.onload == "function"){
                //已经添加过一次
                var save = window.onload;
                // alert(save);
            }

            //100行代码
            window.onload = function(){
                //如果save里面有函数，说明添加过
                if(save){
                    save();
                }
                alert(2);
            }


            function addEvent(obj, eventType, funcName){
                if(typeof obj["on" + eventType] == "function"){
                    var save = obj["on" + eventType];
                }
                obj["on" + eventType] = function(){
                    if(save){
                        save();
                    }
                    funcName();
                }
            }
        addEvent(window, "load", function(){
                alert(1);
            })
            addEvent(window, "load", function(){
                alert(2);
            })
            addEvent(window, "load", function(){
                alert(3);
            })


            //添加事件
            function addEvent(obj, eventType, funcName){
                if(typeof obj["on" + eventType] == "function"){
                    var save = obj["on" + eventType];
                }
                obj["on" + eventType] = function(){
                    if(save){
                        save();
                    }
                    funcName();
                }
            }
2、this指向有问题，混乱。
        <style>
            .red{
                width: 100px;
                height: 100px;
                background-color: red;
            }
            .blue{
                width: 100px;
                height: 100px;
                background-color: blue
            }
        </style>
        <script>
            /*
                传统事件绑定的问题：
                1、会覆盖，后添加的事件会把前面添加的事件覆盖掉。
                2、this指向有问题，混乱。
            */
            window.onload = function(){
                var oDiv = document.getElementById("div1");

                addEvent(oDiv, "click", toBlue);
                /*oDiv.onclick = toBlue;

                oDiv.onclick = function(){
                    alert(123);
                }*/

                function toRed(){
                    this.className = "red";
                    addEvent(this, "click", toBlue);
                }

                function toBlue(){
                    this.className = "blue";
                    addEvent(this, "click", toRed);
                }
            }

            //添加事件
            function addEvent(obj, eventType, funcName){
                if(typeof obj["on" + eventType] == "function"){
                    var save = obj["on" + eventType];
                }
                obj["on" + eventType] = function(){
                    if(save){
                        save();
                    }
                    funcName.call(obj);
                }
            }
        <script>
            var show = function(){
                alert(this);
            }

            show(); //windows

            var xiaoming = {
                name: "小明",
                xxx: show
            }

            // xiaoming.xxx();

            window.onload = function(){
                document.onclick = show;
            }
        </script>
强制改掉某一函数中的this

函数名.call(参数)
参数：函数内部，this的指向
功能：强制将函数内部的this改掉
【注】如果this传参用掉第一个参数，那么后续所有的参数向后移动一位。

        function show(num1, num2){
                alert(this);
                alert(num1 + ", " + num2);
            }

            show.call("xxxx", 10, 20);

            show.call("hello world", 10, 20);
3、too much recursion 过多的递归
        <style>
            .red{
                width: 100px;
                height: 100px;
                background-color: red;
            }
            .blue{
                width: 100px;
                height: 100px;
                background-color: blue
            }
        </style>
        <script>
            传统事件绑定的问题：
            1、会覆盖，后添加的事件会把前面添加的事件覆盖掉。
            2、this指向有问题，混乱。
            3、too much recursion 过多的递归
            window.onload = function(){
                var oDiv = document.getElementById("div1");

                var i = 0;

                addEvent(oDiv, "click", toBlue);
                /*addEvent(oDiv, "click", function(){
                    alert(123);
                })*/
                
                function toRed(){
                    this.className = "red";
                    addEvent(this, "click", toBlue);
                    document.title = i++;
                }

                function toBlue(){
                    this.className = "blue";
                    addEvent(this, "click", toRed);
                    document.title = i++;
                }
            }

            //添加事件
            function addEvent(obj, eventType, funcName){
                if(typeof obj["on" + eventType] == "function"){
                    var save = obj["on" + eventType];
                }
                obj["on" + eventType] = function(){
                    if(save){
                        save();
                    }
                    funcName.call(obj);
                }
            }
        </script>
    </head>
    <body>
        <div id = "div1" class = "red"></div>
    </body>
4、添加的函数，不能去重
        <style>
            .red{
                width: 100px;
                height: 100px;
                background-color: red;
            }
            .blue{
                width: 100px;
                height: 100px;
                background-color: blue
            }
        </style>
        <script>

传统事件绑定的问题：
1、会覆盖，后添加的事件会把前面添加的事件覆盖掉。
2、this指向有问题，混乱。
3、too much recursion 过多的递归
4、添加的函数，不能去重

function init(){
                alert(123);
            }

            addEvent(window, "load", init);
            addEvent(window, "load", init);
            addEvent(window, "load", init);

            //添加事件
            function addEvent(obj, eventType, funcName){
                if(typeof obj["on" + eventType] == "function"){
                    var save = obj["on" + eventType];
                }
                obj["on" + eventType] = function(){
                    if(save){
                        save();
                    }
                    funcName.call(obj);
                }
            }
        </script>
    </head>
    <body>
        <div id = "div1" class = "red"></div>
    </body>

7、传统事件绑定

一、
1、会覆盖
2、this混乱
3、容易造成递归
4、不会去重

            事件监听器
            addEventListener
            removeEventListener

        window.addEventListener("load", function(){
            alert(123);
        }, false);

        window.addEventListener("load", function(){
            alert(456);
        }, false);

二、

        <style>
            .red{
                width: 100px;
                height: 100px;
                background-color: red
            }
            .blue{
                width: 100px;
                height: 100px;
                background-color: blue;
            }
        </style>
        <script>

1、会覆盖
2、this混乱
3、容易造成递归
4、不会去重

            事件监听器
            addEventListener
            removeEventListener
        

        window.onload = function(){
            var oDiv = document.getElementById("div1");

            oDiv.addEventListener("click", toBlue, false);

            function toBlue(){
                this.className = "blue";
                oDiv.removeEventListener("click", toBlue);
                oDiv.addEventListener("click", toRed, false);
            }
            function toRed(){
                this.className = "red";
                oDiv.removeEventListener("click", toRed);
                oDiv.addEventListener("click", toBlue, false);
            }
        }
    </script>
</head>
<body>
    <div id = "div1" class = "red">
        
    </div>
</body>

三、去重

1、会覆盖
2、this混乱
3、容易造成递归
4、不会去重

事件监听器 IE8及IE8以下不兼容
addEventListener
removeEventListener

            function init(){    
                alert(123); 
            }   
事件监听器可以去重，只输出一个。      
            window.addEventListener("load", init, false);
            window.addEventListener("load", init, false);
            window.addEventListener("load", init, false);
            window.addEventListener("load", init, false);
            window.addEventListener("load", init, false);
            window.addEventListener("load", init, false);

四、事件绑定兼容

        <script>
            addEvent(window, "load", function(){
                alert(123);
            })
            addEvent(window, "load", function(){
                alert(456);
            })

            function addEvent(obj, eventType, func){
                if(obj.addEventListener){
                    obj.addEventListener(eventType, func, false);//IE不兼容
                }else{
                    obj.attachEvent("on" + eventType, func);//IE
                }
            }

            function removeEvent(obj, eventType, func){
                if(obj.removeEventListener){
                    obj.removeEventListener(eventType, func);//IE不兼容
                }else{
                    obj.detachEvent("on" + eventType, func);//IE
                }
            }
        </script>

五、阻止默认行为（兼容）

        <script>
            window.onload = function(){
                var oA = document.getElementById("a1");
                oA.onclick = function(event){

                    var e = event || window.event;

                    alert(123);

1、阻止默认行为return false只能放在函数最后
2、如果想阻止默认行为以后，还想做一些别的操作，是不可能的。

                    // return false;

                    // e.preventDefault(); //IE不兼容
                    preDef(e);

                    alert(456);
                }
            }

阻止默认行为跨浏览器兼容,超链接

            function preDef(event){
                if(event.preventDefault){
                    event.preventDefault();//IE不兼容
                }else{
                    event.returnValue = false;//IE
                }
            }
        </script>
    </head>
    <body>
        <!-- a标签的默认行为 -->
        <a id = "a1" href="https://www.baidu.com">百度</a>
    </body>

练习测试

1、微博（事件委托）

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            *{
                margin: 0px;
                padding: 0px
            }
            #div1{
                width: 300px;
                height: 200px;
                background-color: gray;
                border: 1px solid black;
                display: none;
                position: absolute;
                left: 50px;
                top: 50px;
            }
            #title{
                width: 300px;
                height: 40px;
                background-color: blue;
                position: relative;
            }
            #text1{
                width: 298px;
                height: 158px;
            }
            #title button{
                height: 40px;
                line-height: 40px;
                font-size: 18px;
                background-color: orange;
                color: white
            }
            #close{
                position: absolute;
                right: 0px;
                width: 40px
            }
            #div2{
                width: 500px;
                height: 600px;
                border: 1px solid black;
                margin: 50px auto;
                text-align: center;
            }
            #div2 div{
                border-bottom: 1px dashed black;
                position: relative;
            }
            #div2 div button{
                position: absolute;
                right: 15px;
                height: 20px;
            }
        </style>
        <script src = "../js/tool.js"></script>
        <script>
            window.onload = function(){
                $("#issue").onclick = function(){
                    //发布,显示输入框
                    $("#div1").style.display = "block";
                }

                //关闭按钮，点击关闭，让输入框隐藏掉
                $("#close").onclick = function(){
                    $("#div1").style.display = "none";
                }

                //发送消息
                $("#msg").onclick = msgFunc;


                //让输入框可以被拖拽
                drag($("#div1"));

                //点击ctrl+回车执行发送消息
                window.onkeydown = function(event){
                    var e = event || window.event;
                    if(e.keyCode == 13 && e.ctrlKey){
                        msgFunc();
                    }
                }




                function msgFunc(){
                    //1、拿到输入框的value
                    if($("#text1").value == ""){
                        alert("输入不能为空");
                    }else{
                        //2、创建节点，将节点插入div2
                        var newDiv = document.createElement("div");
                        newDiv.innerHTML = $("#text1").value;
                        //清空输入框的内容
                        $("#text1").value = "";
                        var newButton = document.createElement("button");
                        newButton.innerHTML = "X";
                        //将button插入到div中
                        newDiv.appendChild(newButton);
                        $("#div2").appendChild(newDiv);
                    }
                }

                /*
                    1、找到要添加事件的父节点或者祖父节点
                    2、给找到父节点或者祖父节点，添加事件
                    3、找到触发该事件的对象，进行判断
                */
                $("#div2").onclick = function(event){
                    var e = event || window.event;
                    var target = e.target || e.srcElement;
                    if(target.nodeName.toLowerCase() == "button"){
                        $("#div2").removeChild(target.parentNode);
                    }
                }

            }
        </script>
    </head>
    <body>
        <button id = "issue">发布</button>
        <div id = "div1">
            <div id = "title">
                <button id = "msg">发送消息</button>
                <button id = "close">X</button>
            </div>
            <textarea id="text1" cols="30" rows="10"></textarea>
        </div>
        <div id = "div2">
            <!-- <div>aasdadadadadada
                <button>X</button>
            </div>
            <div>aasdadadadadada
                <button>X</button>
            </div>
            <div>aasdadadadadada
                <button>X</button>
            </div> -->
        </div>
    </body>
</html>

2、跟随鼠标一串效果

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            #div1 div{
                width: 10px;
                height: 10px;
                background-color: red;
                position: absolute;
            }
        </style>
        <script>
            window.onload = function(){
                var oDiv = document.getElementById("div1");
                var aDivs = oDiv.getElementsByTagName("div");

                document.onmousemove = function(event){
                    var e = event || window.event;

                    for(var i = aDivs.length - 1; i > 0; i--){
                        aDivs[i].style.left = aDivs[i - 1].offsetLeft + "px";
                        aDivs[i].style.top = aDivs[i - 1].offsetTop + "px";
                    }
                    //0的位置等于鼠标的位置
                    aDivs[0].style.left = e.clientX + "px";
                    aDivs[0].style.top = e.clientY + "px";
                }

            }
        </script>
    </head>
    <body>
        <div id = "div1">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </body>
</html>

12、事件（下）

标签：取消   red   点击事件   微博   div2   ini   enter   pos   fse   

原文地址：https://www.cnblogs.com/zhongchao666/p/9275516.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！