浏览器的默认行为
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
扫一扫
1902
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
