Python学习第83天（JavaScript的onsubmit事件和阻止事件外延）

　　今天下班比较晚，所以更新内容比较少。

　　一、onsubmit事件

　　　　设置在submit之前的一个事件，对文本框输入的内容进行一个预先的审核事件，所增加的函数发生在submit之前

　　　　是当表单在提交时触发. 该属性也只能给form元素使用.应用场景: 在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交.

　　　　比如，如果要求输入的用户名不能有数字，如果有提请“你输入的内容有数字　　　　

<form id="form">
            <input type="text"/>
            <input type="submit" value="点我!" />
</form>

<script type="text/javascript">
            //阻止表单提交方式1().
            //onsubmit 命名的事件函数,可以接受返回值. 其中返回false表示拦截表单提交.其他为放行.
            var ele=document.getElementById("form");
            ele.onsubmit=function(event) {
//                alert("验证失败 表单不会提交!");
//                return false;                
            // 阻止表单提交方式2 event.preventDefault(); ==>通知浏览器不要执行与事件关联的默认动作。
             alert("验证失败 表单不会提交!");
             event.preventDefault();

    }

　　　　关于onsubmit，个人觉得还是比较重要，后期可以作为注册账户时的资格预审，验证内容是否符合要求。

　　　　二、Event 对象

　　　　Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

　　　　事件通常与函数结合使用，函数不会在事件发生前被执行！event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可。比如onkeydown,我们想知道哪个键被按下了，需要问下event对象的属性，这里就时KeyCode；

　　　　这里提到关于淘宝，当你的鼠标悬停在某张图上时，会在右侧显示局部大图，并且会跟随你的鼠标移动而变换，这里就是用到了event对象。

　　　　三、组织事件外延

　　　　如下会有这样两个嵌套的标签。　　　　

<div id="abc_1" style="border:1px solid red;300px;height:300px;">
        <div id="abc_2" style="border:1px solid red;200px;height:200px;">        
        </div>

　　　　如果同时为两个div标签绑定onclick事件，那么在触发abc_2的时候不可避免的会触发到abc_1，这就是所说的事件外延，如何阻止？

　　　　通过event：

<div id="abc_1" style="border:1px solid red;300px;height:300px;">
        <div id="abc_2" style="border:1px solid red;200px;height:200px;">        
        </div>
    </div>
    <script type="text/javascript">
    document.getElementById("abc_1").onclick=function(){
        alert('111');
    }
    document.getElementById("abc_2").onclick=function(event){
        alert('222');
        event.stopPropagation(); //阻止事件向外层div传播.
    }    
</script>

　　　　这里需要注意的点是，如果是在标签内直接绑定函数，是无法进行阻止的，所以今后关于绑定函数，尽量通过节点来查找标签。

　　　　由于dom增删改查部分内容较多，今天内容就暂时更新到这里。