zoukankan      html  css  js  c++  java
  • 11.25 冒泡事件 form表单事件

    事件2
    onselsect 在文本框中的文本被选中时发生
    onsubmint 在表单中的提交按钮被点击时触发
    onreset 在表单中的重置按钮被点击时触发
    onerror 在文档或图像加载中发生错误时被触发
    阻止默认事件 preventDefault() 低浏览器
            return flase;

    阻止冒泡事件: cancelBubble=true 低浏览器
          stopPropagetion()

    案例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    #div{
    200px;
    height: 200px;
    background: red;
    position: relative;
    }
    #box{
    display: block;
    100px;
    height: 100px;
    background: #f0f;
    position: absolute;
    top:50%;
    left:50%;
    margin-left: -50px;
    margin-top: -50px;
    }
    </style>
    <script>
    window.onload=function(){
    var ipt =document.getElementById('ipt');
    ipt.onselect = function () {
    console.log(ipt.value)
    };
    var formBox = document.getElementById('formBox');
    var skip = document.getElementById('skip');
    // 阻止默认事件
    formBox.onsubmit=function (event) {
    if(event){
    event.preventDefault()
    }else{
    return false;
    }
    };
    formBox.onreset = function (e) {
    if(e){
    e.preventDefault()
    }else{
    return false;
    }
    };
    skip.onclick = function (e) {
    e = e ||window.event;
    e.preventDefault()
    // if(e){
    // e.preventDefault()
    // }else{
    // return false;
    // }
    };

    //阻止冒泡
    var div = document.getElementById('div');
    var box = document.getElementById('box');
    box.onclick=function(e){
    if(e){
    e.stopPropagation()
    }else{
    cancelBubble = true;
    }
    console.log('我是span')
    };
    div.onclick=function(){

    console.log('我是div');
    }
    }
    </script>
    </head>
    <body>
    <a href="http://www.baidu.com" id="skip">百度</a><br/>
    <input id="ipt" type="text">
    <form action="" id="formBox">
    账号:<input type="text"><br/>
    密码:<input type="password"><br/>
    <input type="submit">
    <input type="reset">
    </form>
    <div id="div">
    <span id="box"></span>
    </div>
    </body>
    </html>
  • 相关阅读:
    面试技巧
    [CODEVS1116]四色问题
    [CODEVS1216]跳马问题
    [CODEVS1295]N皇后(位运算+搜索)
    [CODEVS1037]取数游戏
    [CODEVS1048]石子归并
    [NOIP2012]同余方程
    C++深入理解虚函数
    Attention Model
    faster-rcnn系列原理介绍及概念讲解
  • 原文地址:https://www.cnblogs.com/xiaoxiongv1/p/7894744.html
Copyright © 2011-2022 走看看