首页 > 代码库 > 新的事件

新的事件

2024-09-13 21:54:06   219人阅读

getElementsByClassName(名字)【不兼容IE9及以上】
getElementsByName(名字)【不兼容IE9及以上】
通过名字来获取元素 ,支持高级浏览器



onsubmit表单验证:当表单提交的时候，会触发的事件

<body>
    <form action="1.php">
        用户名: <input type="text" name="userName" /><br>
        <input type="submit" />
    </form>
</body>

<script>
    window.onload =function () {
        var oForm = document.getElementsByTagName(‘form‘)[0];
        var oInput = document.getElementsByName(‘userName‘)[0];
        oForm.onsubmit = function () {
            if (oInput.value == ‘‘) {
                alert(‘请输入用户名‘);
                return false;
            }
            
        };
    };
</script>






onchange: 一般用于select标签（选中一个列表项，则触发此事件）

<body>
    <select id="sel">
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
        <option value="tianjin">天津</option>
    </select>
</body>

<script>
    window.onload = function (){
        var oSel = document.getElementById(‘sel‘);
        oSel.onchange = function () {
            alert(this.value);
        }
    }
</script>






oninput: 
　　当输入框值改变的时候会触发的事件,实时监听到输入框的改变，
　　无论用什么方式赋值，都可以监听到值得改变 （IE9以上）

onpropertychange: 
　　当输入框值改变的时候会触发的事件 (会执行几次)（IE9以下）

<script>
    window.onload = function () {
        var oInput = document.getElementsByTagName(‘input‘)[0];
        // oInput.oninput = function () {
        //     alert(this.value);
        // }
        oInput.onpropertychange = oInput.oninput = function () {
            alert(this.value);
        }
    }
</script>






onfocus: 获取焦点
onblur: 失去焦点
placeholder:属于H5的新属性，低版本的浏览器是不兼容，只能放置文字





<style>
        #box {
            position: relative;
        }
        input {
            width: 300px;
            height: 40px;
            outline: none;
            padding-left: 3px;
        }
        #box span {
            position: absolute;
            color: #ccc;
            left: 8px;
            top: 12px;
        }
    </style>

<body>
    <div id="box">
        <input type="text" />
        <!-- 就是提示文字 -->
        <!-- 给span添加背景图片就够了 -->
        <span>这是提示文字</span>
    </div>
</body>

<script>
    window.onload = function () {
        var oInput = document.getElementsByTagName(‘input‘)[0];
        var oSpan = document.getElementsByTagName(‘span‘)[0];

        oInput.oninput = oInput.onpropertychange = function () {
            
                oSpan.style.display = ‘none‘;
            }
            
        }
        //点击文字获取焦点
        oSpan.onclick = function () {
            //获取焦点
            oInput.focus();
        }
        //获取
        oInput.onfocus = function () {
            oSpan.style.display = ‘none‘;
        }
        //失去
        oInput.onblur = function () {
            if (this.value == ‘‘) {
                oSpan.style.display = ‘block‘;
            }
            
        }
    }
</script>




 
新的事件






























        

            
                
                  
                
                

                    联系

                    我们