淺談js中事件preventDefault()和addEventListener()

阿新 • • 發佈：2019-02-03

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在操作而我們並不知道監聽到的事件到底是什麼！

淺談js中事件preventDefault()和addEventListener()

js中有許多預設事件方法，當我們觸發時就會自動執行，比如點選連結跳轉，右鍵彈出屬性選單等等。於是為了滿足我們自定義的行為，需要阻止事件預設行為，即preventDefault()方法。 preventDefault() preventDefault()是

淺談JS中的!=、== 、!==、===的用法和區別 JS中Null與Undefined的區別讀取XML文件獲取路徑的方式 C#中Cookie，Session，Application的用法與區別？ c#反射抽象工廠

main 收集 data- 時間設置 oba ase pdo 簡單工廠模式 1.0 var num = 1; var str = ‘1‘; var test = 1; test == num //true　相同類型　相同值 te

淺談JS中的原型對象和原型鏈

並且 nbsp 繼承 div prototype strong 存在除了函數我們知道原型是一個對象，其他對象可以用它實現屬性繼承，除了prototype，又有__proto__ 1. prototype和__proto__的區別 prototype是函數才有的屬性

淺談js中的for迴圈和while迴圈：

-for迴圈：它的語法如下： for (語句 1; 語句 2; 語句 3) { 被執行的程式碼塊 } 語句 1 在迴圈（程式碼塊）開始前執行語句 2 定義執行迴圈（程式碼塊）的條件語句 3 在迴圈（程式碼塊）已被執行之後執行

js中的preventDefault和stopPropagation_阻止事件

首先講解一下js中preventDefault和stopPropagation兩個方法的區別： preventDefault方法的起什麼作用呢？我們知道比如<a href="http://www.baidu.com">百度</a>,這是htm

淺談AngularJS中的$parse和$eval

淺談 return 什麽是 apply() logs ava new 表達式 ret AngularJS的初學者常常會對$parse和$eval兩個內建服務感到有些困惑，今天我們就來說說AngularJS中的$parse和$eval。總的來說，$parse和$eval都

淺談AngularJS中的指令和指令間的相互通信

file str 裏的按鈕相互要去 direct 不能 pil 說到AngularJS，我們首先想到的大概也就是雙向數據綁定和指令系統了，這兩者也是AngularJS中最為吸引人的地方。雙向數據綁定呢，感覺沒什麽好說的，那麽今天我們就來簡單的討論下AngularJS這

淺談js中的MVC

模擬 ner end i++ 反饋 mov 構架 als 觀察 MVC是什麽？ MVC是一種架構模式，它將應用抽象為3個部分：模型（數據）、視圖、控制器（分發器）本文將用一個經典的例子todoList來展開一個事件發生的過程（通信單向流動）： 1、用戶在視圖V上與應用

淺談caffe中train_val.prototxt和deploy.prototxt文件的區別

image pixel proto form 準確率 .proto 應用網絡基礎本文以CaffeNet為例： 1. train_val.prototxt 首先，train_val.prototxt文件是網絡配置文件。該文件是在訓練的時候用的。 2.dep

淺談js冒泡事件1

prev form 定義 ati 鏈接 baidu 有一種事件冒泡 function 什麽是JS事件冒泡？：在一個對象上觸發某類事件（比如單擊onclick事件），如果此對象定義了此事件的處理程序，那麽此事件就會調用這個處理程序，如果沒有定義此事件處理程序或者事件返回t

淺談c++中結構體和共用體的區別

ont 基本類型 erl list 變量名 ext 使用結構體 oot 數據格式在c++中，結構體（struct）和共用體（union）是兩種很相似的復合數據類型，都可以用來存儲多種數據類型，但是兩者還有很大的區別。結構體（struct）結構是用戶自定

淺談JS中的閉包

不能程序含義函數刪除今天 func 空間而且　　今天大年初一，祝各位小夥伴們狗年旺旺啊，閑來也沒事，只能鉆研一下自己的分內之事，也就是作為一個前端碼農的身份，得時刻保持學習的態度，溫故而知新，每天都給自己一個小目標去完成，日積月累，所想達到的狀態，都會有所見

淺談js中的正則表示式

很多時候多會被正則表示式搞的暈頭轉向，最近抽出時間對正則表示式進行了系統的學習，整理如下：正則表示式的建立兩種方法，一種是直接寫，由包含在斜槓之間的模式組成；另一種是呼叫 RegExp 物件的建構函式。兩種方法的建立程式碼如下： // 直接建立 const regex1 = /ab+c/; co

[轉載]淺談c#中的delegate和event了

作者講的很好，風趣幽默，娓娓道來https://www.cnblogs.com/chunhui212/p/5887579.html delegate delagete可以實現將方法作為引數傳遞，理解為函式指標，它允許傳遞一個類A的方法m給另一個類B的物件，使得類B的物件能夠呼叫這個方法m。其

淺談Java中的物件和物件的引用

淺談java中的物件和引用文章轉載出處：https://www.cnblogs.com/dolphin0520/p/3592498.html 在Java中，有一組名詞經常一起出現，它們就是“物件和物件引用”，很多朋友在初學Java的時候可能經常會混淆這2個概念，覺得它們是一回事，事

淺談JS中的'+'連結符

console.log('----1----') console.log('12' + '34')//'1234' console.log('12' + 34 )//'1234' console.log(12 + '34')//'1234' conso

【java筆記】淺談Java中的equals和==

在初學Java時，可能會經常碰到下面的程式碼： String str1 = new String("hello"); String str2 = new String("hello"); System.out.println(str1==str2); System.out.

淺談caffe中train_val.prototxt和deploy.prototxt檔案的區別

在剛開始學習的時候，覺得train_val.prototxt檔案和deploy.prototxt檔案很相似，然後當時想嘗試利用deploy.prototxt還原出train_val.prototxt檔案，所以就進行了一下對比，水平有限，可能很多地方說的不到位，希望大神們指點批

淺談Java中的物件和引用

Java物件及其引用原文：http://zwmf.iteye.com/blog/1738574 關於物件與引用之間的一些基本概念。初學Java時，在很長一段時間裡，總覺得基本概念很模糊。後來才知道，在許多Java書中，把物件和物件的引用混為一談。可是，

淺談C中的malloc和free

一、malloc()和free()的基本概念以及基本用法： 1、函式原型及說明： void *malloc(long NumBytes)：該函式在堆上分配了NumBytes個位元組的空間，並返回了指向這塊記憶體的指標。如果分配失敗，則返回一個空指標（NULL）。關於分

淺談js中事件preventDefault()和addEventListener()

preventDefault()

addEventListener()

相關推薦