JavaScript-⑧代码

最新推荐文章于 2024-08-17 23:10:04 发布

宝拉不想努力了

最新推荐文章于 2024-08-17 23:10:04 发布

阅读量122

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_41056807/article/details/83315956

版权

js 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

一.Event绑定事件

在html绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 绑定事件1
        //冒泡阶段
        function fn(){
            alert("clicked");
        }
    </script>
</head>
<body>
    <div>
        <p id="p">
            <button id="btn" onclick="fn()">点我</button>
        </p>
    </div>
</body>
</html>

在这里插入图片描述
点击按钮：

对象给onclick赋值，这两个都是DOM0级别。
注意：这次绑定事件会覆盖之前在html绑定的事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 绑定事件1
        //冒泡阶段
        function fn(){
            alert("clicked");
        }
        // 绑定事件2,对象给onclick赋值，这两个都是DOM0级别。
        //这次绑定会覆盖前一次（在html调用onclick的这种）
        window.onload=function(){
            let btn=document.getElementById("btn");
            btn.onclick=function(){
                alert("2clicked");
            }
    </script>
</head>
<body>
    <div>
        <p id="p">
            <button id="btn" onclick="fn()">点我</button>
        </p>
    </div>
</body>
</html>

在这里插入图片描述
点击之后只出现一个2click，说明这次事件将前面一次覆盖

DOM2绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>

        // 绑定事件1
        //冒泡阶段
        function fn(){
            alert("clicked");
        }
        // 绑定事件2,对象给onclick赋值，这两个都是DOM0级别。
        //这次绑定会覆盖前一次（在html调用onclick的这种）
        window.onload=function(){
            let btn=document.getElementById("btn");
            btn.onclick=function(){
                alert("2clicked");
            }
            // 绑定事件3冒泡阶段
            btn.addEventListener("click",function(){
                alert("3click");
            })
        }
    </script>
</head>
<body>
    <div>
        <p id="p">
            <button id="btn" onclick="fn()">点我</button>
        </p>
    </div>
</body>
</html>

点击按钮之后：
在这里插入图片描述

完整源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 绑定事件1
        //冒泡阶段
        function fn(){
            alert("clicked");
        }
        // 绑定事件2,对象给onclick赋值，这两个都是DOM0级别。
        //这次绑定会覆盖前一次（在html调用onclick的这种）
        window.onload=function(){
            let btn=document.getElementById("btn");
            btn.onclick=function(){
                alert("2clicked");
            }
            // 绑定事件3冒泡阶段
            btn.addEventListener("click",function(){
                alert("3click");
            })
            //冒泡阶段
            let p=document.getElementById("p");
            p.addEventListener("click",function(){
                alert("p is clicked");//冒泡阶段处理
            })
        }
        // 问题：到底先点击什么事件？形成两个事件处理机制
        // 下降：捕获阶段，目标阶段，上传：冒泡阶段 
    </script>
</head>
<body>
    <div>
        <p id="p">
            <button id="btn" onclick="fn()">点我</button>
        </p>
    </div>
</body>
</html>

效果：
依次弹出对话框
在这里插入图片描述

二.阻止事件event.stopPropagation（）;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>

        // 绑定事件1
        //冒泡阶段
        function fn(){
            alert("clicked");
        }
        // 绑定事件2,对象给onclick赋值，这两个都是DOM0级别。
        //这次绑定会覆盖前一次（在html调用onclick的这种）
        window.onload=function(){
            let btn=document.getElementById("btn");
            btn.onclick=function(event){
                alert("2clicked");
            }
            // 绑定事件3冒泡阶段
            btn.addEventListener("click",function(){
                alert("3click");
                //阻止传播
                event.stopPropagation();
            },true)
            //冒泡阶段
            let p=document.getElementById("p");
            p.addEventListener("click",function(){
                alert("p is clicked");//冒泡阶段处理
            },true)
        }
        //事件是一个对象，有自己的属性
    </script>
</head>
<body>
    <div>
        <p id="p">
            <button id="btn" onclick="fn()">点我</button>
        </p>
    </div>
</body>
</html>

效果：
在这里插入图片描述

三.阻止链接跳转

第一种

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        window.onload=function(){
            let link=document.getElementById("link");
            //冒泡事件
             link.addEventListener("click",function(event){
                 alert("here");
                 //不执行事件的默认行为
                 event.preventDefault();
             })
        }
    </script>
</head>
<body>
    <a href="http://www.neusoft.edu.cn" id="link">东软</a>
    <!-- 不希望做默认的事件（跳转a链接） -->
</body>
</html>

效果：点击链接后
在这里插入图片描述

第二种

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        window.onload=function(){
            let link=document.getElementById("link");
            // dom0通过事件返回值false阻止事件
            link.onclick=function(){
                return false;
            }
        }
    </script>
</head>
<body>
    <a href="http://www.neusoft.edu.cn" id="link">东软</a>
    <!-- 不希望做默认的事件（跳转a链接） -->
</body>
</html>

效果就是点击链接没有反应

四.鼠标移动 div跟随鼠标移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
    #show{
        width: 200px;
        height: 200px;
        background-color: blueviolet;
        position: absolute;
    }
    </style>
    <script>
        window.onload=function(){
            let show =document.getElementById("show");
            show.addEventListener("mousemove",function(event){
                event.target.style.left=(event.clientX-100)+"px";
                event.target.style.top=(event.clientY-100)+"px";
                // 事件处理的第一个参数必须是事件
            })
        }
    </script>
</head>
<body>
    <div id="show"></div>
</body>
</html>

在这里插入图片描述

五.keyboard

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        window.onload=function(){
            //键盘事件
            let user=document.getElementById("user");
            user.addEventListener("keydown",function(event){
                //输出键盘码判断 按键（组合码）
                console.log(event.keyCode);
            })
            //鼠标事件button=1左键，=2右键，=3中间，clientX/y据浏览器。screenX/Y。offsetX/Y距父容器的边框的距离
        }
    </script>
</head>
<body>
        <!-- input:text#user  -->
    <input type="text" name="" id="user">
</body>
</html>

效果：通过键盘码判断输入的是什么字母（区分大小写）
在这里插入图片描述

六.右键——可以出现文本链接点击后跳转到该链接

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

     <style>
      #container{
          width: 500px;
          height: 500px;
          background-color: brown;
      }
     </style>
    
    <script>
      window.onload = function () {
                var menu=document.createElement("div");
                var ul=document.createElement("ul");
                var li=document.createElement("li")
                    var link=document.createElement("a");
                    link.href="http://www.sina.com.cn";
                 var text=document.createTextNode("点击链接");
                 link.appendChild(text);
                 li.appendChild(link);
                 ul.appendChild(li);
                 menu.appendChild(ul);
                 menu.style.position="absolute";
                 menu.style.border="2px solid red";
                 menu.style.boxShadow="5px 5px 5px rgba(0, 0, 0, .6)"
                 menu.style.zIndex=1000;
                 menu.style.backgroundColor="rgba(255,255,255,1)";
            document.onmousedown=function(evt){
                if(evt.button==0){
                    setTimeout(function() {
                        document.body.removeChild(menu);
                    }, 100);
                   
                }
            }
            document.oncontextmenu = function (evt) {
                   menu.style.left=evt.clientX+"px";
                   menu.style.top=evt.clientY+"px";
                  document.body.appendChild(menu); 
                    evt.preventDefault();
            }
        }
    </script>
</head>
<body>
    <div id="container"></div>
</body>
</html>

在这里插入图片描述

七.表单form

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- dom0 -->
    <script>
        window.onload=function(){
            // 找表单找节点，判断节点类型
            let form = document.getElementById("form");
            form.onsubmit=function(){
                let user=form.user.value;
                let rule1=/\w{6,}/g;
                if(!rule1.test(user)){
                    //测试不通过
                    alert("用户名不合法");
                    return false;                   
                }
                let checked=false;
                for(let i=0;i<form.sex.length;i++){
                    if(form.sex[i].checked){
                        checked=true;
                        break;
                    }
                }
                if(!checked){
                    alert("性别未选中");
                    return false;
                }
                if(form.degree.selectedIndex<=0){
                    alert("请选个学历");
                    return false;
                }
                return true;
            }
            form.addEventListener("submit",function(event){
                // event.preventDefault();
            })
        }
    </script>
</head>
<body>
    <form action="" id="form">
        用户名： <input type="text" id="user" name="user">
        <br>
       性别： <input type="radio" name="sex" value="male" id="">男
        <input type="radio" name="sex" value="female" id="">女
        <br>
        学历：<select name="degree" id="degree">
            <option value="">请选择</option>
            <option value="学历1">学历1</option>
            <option value="学历2">学历2</option>
            <option value="学历3">学历3</option>
        </select>
        <input type="submit" value="注册">
    </form>
</body>
</html>