浅谈js中事件preventDefault()和addEventListener()

来源：互联网发布：听新闻学英语软件编辑：程序博客网时间：2024/05/24 02:38

js中有许多默认事件方法，当我们触发时就会自动执行，比如点击链接跳转，右键弹出属性菜单等等。于是为了满足我们自定义的行为，需要阻止事件默认行为，即preventDefault()方法。

preventDefault()

preventDefault()是我们最常用的方法，但今天用的时候发现并没有效果，一直找原因啊，终于有所发现了！

以阻止链接跳转和右键弹出菜单等事件为例：

<body>    <a href="https://www.baidu.com">跳转</a>    <form id="fm" name="mm" action="#fm">        <input type="text" name="aa" value="hello" />        <input type="submit" value="提交" />        <textarea name="tct" rows="4" cols="5"></textarea>    </form>    </body>

这里主要使用chrome、firefox和IE三种浏览器引擎进行兼容测试，在lunascape6中测试(方便引擎切换)；
在js段中写脚本执行程序：

<script type="text/javascript">    window.onload=function(evt){     var link = document.getElementsByTagName('a')[0];    //第一种方法：不直接使用addEventListener来使用阻止事件默认行为，采用显示直接事件形式//  link.onclick=function(evt){//        evt.preventDefault();//成功，兼容//        alert(evt.target);//http://www.baidu.com//        alert(evt.preventDefault());//undefined//        alert(typeof evt.preventDefault);//function//        evt.returnValue=false;     //只有webkit引擎支持//}//第二种方法：上述函数中使用evt.returnValue属性设置为false即可阻止，但目前测试只在webkit引擎下有效 //    link.onclick=function(evt){//        evt.returnValue=false;     //只有webkit引擎支持//}//第三种方法：如果要实现的自定义功能较少，可以考虑这种简单暴力的方法但多数情况下不建议使用，因为具有必须放在最后执行且在其后的代码无法执行的缺陷//   link.onclick=function(){//          return false;//   }//第四种方法：在第一点就提到使用增加事件监听器无效的原因是什么呢？因为通常情况下我们使用该方法会直接调用，因此相当于是window这个大范围的对象在监听，传给其中function的event是什么就难以明白就无法达到效果，但实际我们要监听的只有目标对象，因此指定目标去监听时就可以明确function肯定是由目标对象发出的，而我们又只进行了点击操作，所以event就很明显了！//测试了三种引擎浏览器,成功   var txt = document.getElementsByTagName('textarea')[0];//  txt.addEventListener('contextmenu',function(evt){//                          evt.preventDefault();//                      alert('Hello');//              },false);}</script>

以上测试在浏览器新版本中可行，低版本未测试过

addEventListener()

addEventListener()解决了我们在事件中传递this、多重递归导致浏览器崩溃和函数覆盖等很多问题，为解决事件提供了很好的支持。
但一般使用该方法时，习惯直接使用不指定对象，这可能会产生意外效果需要注意。另外使用对象显示调用addEventListener时要注意参数有所不同，(type,listener,scope)分别是：事件类型，监听到事件执行的function，以及捕捉(true)或冒泡(false)的boolean值设置。

因此，总结下用到addEventListener()时需要谨慎一些，最好采用指定对象监听方式，因为默认情况下直接使用是window在操作而我们并不知道监听到的事件到底是什么！

阅读全文

0 0