zoukankan      html  css  js  c++  java
  • dom事件

    一、属性

    2、this

     this特殊的。表示谁点击当前的标签,那么this就代表点击的标签。即谁点击,就代表谁

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <div onclick="func(123,'123');">ads</div>
    <div onclick="func1(this);">111</div>
    <div onclick="func2(this);">222</div>
    <script>
        function func(arg){
            console.log(arg);
        }
        function func1(arg){
            console.log(arg);
        }
        function func2(arg){
            console.log(arg);
        }
    </script>
    </body>
    </html>

    下面就是分别点击下面显示的内容

     

    例子:折叠菜单

    margin和padding是在html中的盒模型的基础上出现的,margin是盒子的外边距,即盒子与盒子之间的距离,而pdding是内边距,是盒子的边与盒子内部元素的距离

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            ul{
                padding: 0;
                margin: 0;
            }
            .menu{
                background-color: #00CCFF;
                border:solid 2px red;
                height: 700px;
                 300px;
            }
            .menu .title{
                background-color: #00CC00;
                cursor:pointer ;
            }
            .menu .content{
                background-color: white;
            }
            .hide{
                display:none;
            }
        </style>
    </head>
    <body>
    <div class="menu">
        <div class="item">
            <div class="title" onclick="show(this)">菜单一</div>
            <div class="content hide">
                <ul>
                    <li>内容一</li>
                    <li>内容二</li>
                    <li>内容三</li>
                </ul>
            </div>
        </div>
        <div class="item">
            <div class="title" onclick="show(this)">菜单二</div>
            <div class="content hide">
                <ul>
                    <li>内容一</li>
                    <li>内容二</li>
                    <li>内容三</li>
                </ul>
            </div>
        </div>
        <div class="item">
            <div class="title" onclick="show(this)">菜单三</div>
            <div class="content hide">
                <ul>
                    <li>内容一</li>
                    <li>内容二</li>
                    <li>内容三</li>
                </ul>
            </div>
        </div>
    </div>
    <script>
        function show(arg){
            //arg当前菜单,思路点击当前菜单的时候就把下面的标签中的hide去掉
            console.log(arg);
            arg.nextElementSibling.classList.remove("hide");
            //father=item
            var father=arg.parentElement;
            //由于item数量不确定,所以要从menu的子标签开始
            var sons=father.parentElement.children;
            for(var i=0;i<sons.length;i++){
                var current_ele=sons[i];
                //这里判断的意思,如果遍历出current_ele是arg的father也就是当前点击的标签,由于需要展开内容,所以不能添加hide
                //添加hide就无法展示,如果不是当前点击的标签,由于需要他们把内容隐藏,所以需要添加hide
                if(current_ele == father){
    
                }else{
                    current_ele.children[1].classList.add("hide");
                }
            }
        }
    </script>
    </body>
    </html>

     点击菜单二,就会隐藏菜单一和菜单三的内容

     三、事件

    对于事件:下面4种

    1、    注册事件的方式
        a)    在标签中注册<div onxxx””></div>
        b)    直接注册 document,......onxxx=function(){}
    2this,触发当前事件的标签
    3event,触发当前标签的事件内容,keyCode(获取键盘上面按键对应的数字),key(按下的键)
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div onmouseover="func(this)"onmouseout="Out(this)">123</div>
        <input type="text" onkeydown="Down(event)"/>
    
        <script>
            function func(arg){
                arg.style.background="palegreen";
            }
            function Out(arg){
                arg.style.background="white";
            }
            function Down(ths){
                console.log(ths.keyCode,ths.key);
            }
        </script>
    
    </body>
    </html>

    实现效果图

    4、  默认事件和自定义事件:

    自定义事件的默认优先级 > 默认事件优先级
    如果想要阻止后面的事件发生:
    onclick=”return func();”
    
    function func(){
    return false;
    }
    如果想让后面的事件执行,那么就把返回值为true或者
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <a href="http://www.cnblogs.com/pyrene" onclick=" return tt()">博客</a>
    
    <script>
        function tt(){
            alert(123);
            return false;
        }
    </script>
    </body>
    </html>
    View Code

    这个可以应用于验证信息,例如验证表格中是否有内容输入:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form action="滚动菜单.html">
            <div id="form1">
                <p>账号:<input type="text"/></p>
                <p>密码:<input type="password"/></p>
            </div>
            <input type="submit" value="确认提交"onclick="return SubmitForm()"/>
        </form>
    <script>
        function SubmitForm(){
            var inputs=document.getElementById("form1").getElementsByTagName("input");
            for(var i=0;i<inputs.length;i++){
                var current_input=inputs[i];
                var val=current_input.value;
                if(val.trim().length==0){
                    return false;
                }
            }
        }
    </script>
    </body>
    </html>
    View Code

    实现效果图:当里面不输入内容的时候,无法提交上去

  • 相关阅读:
    LeetCode OJ 107. Binary Tree Level Order Traversal II
    LeetCode OJ 116. Populating Next Right Pointers in Each Node
    LeetCode OJ 108. Convert Sorted Array to Binary Search Tree
    LeetCode OJ 105. Construct Binary Tree from Preorder and Inorder Traversal
    LeetCode OJ 98. Validate Binary Search Tree
    老程序员解Bug的通用套路
    转载 四年努力,梦归阿里,和大家聊聊成长感悟
    转载面试感悟----一名3年工作经验的程序员应该具备的技能
    Web Service和Servlet的区别
    关于spring xml文件中的xmlns,xsi:schemaLocation
  • 原文地址:https://www.cnblogs.com/pyrene/p/6599223.html
Copyright © 2011-2022 走看看