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

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

你可能感兴趣的:(#,javascript)