事件详解D - 默认行为及DOM2事件

浏览器的默认行为

JavaScript事件本身所具有的属性，例如

a标签的跳转，Submit按钮的提交，右键菜单，文本框的输入等。

阻止默认行为的方式：

event.preventDefault();

event.returnValue = false;

return false;

我们来看一下阻止方法：

原本的代码是这样的

由于点击一次，页面就会刷新一次

刷新速度太快导致我们看不到控制台输出的效果：

点击页面中的超链接并没有什么效果

如果我们想要看到控制台输出的语句，就需要用到上面那三个阻止默认行为方式的方法：

第一种方法：event.preventDefault();

运行结果如下：

第二种方法：event.returnValue = false;

运行结果如下：

第三种方法：return false;

运行结果如下：

这三种方法同样都是点击几次就显示几次信息

直接写document.是给页面加事件

例如我们这有个form标签，我们来去除一下一些默认的行为

运行效果如下：

1.点击提交按钮不会提交，会在控制台输出信息

2.点击文本框无法输入键盘上的任意键（但是打汉字可以）

3.右击鼠标页面中任意空白处都不会出现菜单

DOM2级事件

DOM2级事件处理程序：

添加事件监听器：addEventListener(事件名，处理函数，布尔值)

移除事件监听器：removeEventListener(事件名，处理函数)

IE下的事件监听器：

添加：attachEvent(事件名，处理函数)；、

移除：detachEvent(事件名，处理函数)

举个小例子来看一下：

运行结果，当我们点击红色的div时，同时出现foo和bar的值：

这和之前我们说的普通事件有所区别，普通事件只会显示最下面定义的函数

举个小例子：

运行结果如下，只会显示下面的bar函数的值：

上面就是普通事件和DOM2级事件显示的区别！！！

移除效果时也有区别：

在普通事件中，移除只需要让outer.onclick = null即可

运行结果再点击红色div时无任何效果：

在DOM2事件中，移除需要removeEventListener：

运行效果如下，当我们点击时只会显示bar没有移除的：

如果都移除，可以再写一条移除语句即可

以上就是DOM2和普通事件的添加和移除效果！！！！！

添加时普通事件只能显示最下面的；DOM只要定义的都可以显示

移除时普通事件为null即可；DOM2需要removeEventListener

我们再来看一下DOM2中的第三个布尔值参数

当我们把它改为true时，和false的效果区别：

当为false时，点击蓝色区域，显示顺序从上自下

最特定的到最不特定的

当改为true时，显示效果正好相反，从下自上

即最不特定的到最特定的

对于版本8以下的IE，我们要用：

attachEvent(事件名，处理函数);  来添加事件

detachEvent(事件名，处理函数);  来移除事件

添加的写法：

移除的写法：

此时点击就没有任何效果

依旧是封装函数

封装函数时必须要进行判断浏览器的兼容性：

点击红色div时会显示定义的foo中的数值

第一个参数：要传的对象outer

第二个参数：添加的事件click

第三个参数：定义执行的函数foo

再来测试一下移除DOM2事件的函数：

此时再点击就没有任何输出效果

- 写作不易，大家多多关注，谢谢啦-

---web分享，分享的不只是web