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

最新推荐文章于 2024-07-26 11:41:15 发布

ShineMoer

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量6.1k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/zhangluo123__/article/details/72179543

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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在操作而我们并不知道监听到的事件到底是什么！