DOM事件绑定与行为阻止

一位学员碰到这样的问题: 他在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.

JS游戏–别踩白块–教学视频

[自学it网 PHP就业班 课堂案例 ]

玩游戏,不如自己写游戏!
打开浏览器,打开编辑器(sublime,editplus,notepad都行),
花上2个小时,写个”别踩白块”玩一玩.

JS游戏_别踩白块(1) 思路分析.wmv
JS游戏_别踩白块(2) 框架搭建.wmv
JS游戏_别踩白块(3) 之随机黑白块.wmv
JS游戏_别踩白块(4) 方块动起来.wmv
JS游戏_别踩白块(5) 方块无缝滚动.wmv
JS游戏_别踩白块(6) 得分.wmv
JS游戏_别踩白块(7) 犯规处理.wmv
JS游戏_别踩白块(8) 隐蔽的bug.wmv
JS游戏_别踩白块(9) 自动加速.wmv