DOM事件绑定与行为阻止

Posted 2020-08-21

布尔教育 php学习笔记

一位学员碰到这样的问题: 他在form表单上绑定onsubmit事件,并在对应的事件函数中return false; 以阻止表单的提交.

0级DOM绑定方式,可以阻止, 但2级DOM绑定方式不能阻止.

0级DOM代码如下, 可以阻止.

<form>
    <p><input type="submit" value="提交"></p>
</form>
<script>
    var fm=document.getElementsByTagName(‘form‘)[0];
    fm.onsubmit=function(){
        return false;
    }
</script>

2级DOM代码如下, 不能阻止.

<form>
    <p><input type="submit" value="提交"></p>
</form>
<script>
    var fm=document.getElementsByTagName(‘form‘)[0];
    fm.addEventListener(‘submit‘,test);
    function test (){
        return false;
    }
</script>

疑问: 绑定的事件函数,同样是return false,为何后者不能阻止.

这是因为在2级绑定方式中,如果需要阻止事件的传播/冒泡,需要用到事件对象对象的stopPropagation()方法.
阻止事件的默认行为,要用事件对象的preventDefault()方法.

正确的写法如下:

<form>
    <p><input type="submit" value="提交"></p>
</form>
<script>
    var fm=document.getElementsByTagName(‘form‘)[0];
    fm.addEventListener(‘submit‘,test);    function test (e){
        e.preventDefault();
    }
</script>

这个问题很高深吗? 一点都不, 其实是因为该学员追求技巧而不注重基础引起的.
就如倚天屠龙记中的周芷若,内力不足,强练九阴真经,终致走火入魔.

如果认真学习过十八哥的”JS高级”中的事件停止传播与效果阻止
就不会有此疑问.

所以此处提醒同学们: 学习,要尽量系统性的学.争取学一门,得到一门.
而不要搜索几个新鲜知识点,试来试去,看似了解很多,实则一片茫然.

如果你仍要刨根问底,为什么2级标准中,绑定的事件,return false不能阻止事件发生呢?
答:w3c中规定,addEventListener()的第2个参数中绑定的事件对象”无返回值”,自然return false也不灵了.

官方说明: https://www.w3.org/TR/DOM-Level-2-Events/ecma-script-binding.html
细看这一句:

This is an ECMAScript function reference. This method has no return value. The parameter is a Event object.

本文出自 “布尔教育” 博客，请务必保留此出处http://booljiaoyu.blog.51cto.com/12308319/1876847