2. 程式人生 > >js中的事件物件和新增事件

js中的事件物件和新增事件

阿新 • • 發佈：2019-01-09
//這裡只是適用於非ie 瀏覽器,ie瀏覽器的event物件和別的瀏覽器不一樣 switch(ev.target.id){ case "box1": alert("box1"); break; case "box2": alert("box2"); break; case "box3": alert("box3"); break; } } 2.事件繫結的方法: 1.行內繫結:直接在元素上寫事件處理e.g:<input type="button" name="" onclick="alert('sssss')" />
，當然,onclick的事件處理也可以寫成一個function,在onclick中呼叫 2.在js中獲取元素新增事件處理,e.g:elem.onclick=function(){},同樣這個function也可以不是匿名的. 3.(ie9+)在js中使用elem.addEventListener(事件名字(不需要on),事件處理函式,false代表在冒泡階段處理,true表示在捕獲階段處理)這個方法(當然從處理事件的方式上就可以看出第一種並不是一種好方法,它的耦合性太高,而且會出現載入順序問題) (注:在新增事件處理的時候要注意確保頁面載入完畢，至少觸發事件的元素載入完畢，要不然就無法獲取元素也就無法觸發事件
) (在ie8-也有類似的事件處理方法attachEvent("on事件名",function),事件名字前面必須要加on,預設冒泡捕獲所以不需要第三個引數,有一個注意點就是 在這個方法中的this並不是指向呼叫它的元素物件,而是window) 3.刪除事件處理: 1.將事件處理賦值為null,等待回收機制自己處理,如elem.onclick=null, 2.使用addEventListener()新增的事件要確保不能使用匿名函式，如果你想要刪除事件的話，使用removeEventListener(事件名,function,和add時候一樣) 在這裡如果使用的是匿名函式是無法刪除的因為兩個匿名函式不是同一個，即使內容相同
.ie8-用detachEvent()，注意點和上面相同 4.事件屬性: 1.bubbles:表示事件是否冒泡 2.cancelable:表示是否有預設事件 3.preventDefault():當cancelable為true的時候可以使用這個來阻止預設事件 4.stopPropagation():當bubbles為true的時候可以用來阻止冒泡 5.target:表示事件的目標 6.currentTarget:表示新增事件的目標 (this等於currentTarget,但是不一定等於target，要是事件繫結在祖先元素上，那麼currentTarget等於祖先元素， 而target等於你觸發的元素),舉個例子: document.body.onclick=function(ev){ ev.currentTarget===this;//true ev.target==this;//不一定,要是點選的是body元素那就等，要是點選的是子孫元素那target就等於子孫元素,而this還是 指的是document.body } 7.ie中阻止預設事件是使用returnValue=false 8.ie中阻止冒泡使用cancelBubble=true 9.ie中的目標事件是srcElement 5.阻止預設事件就是阻止系統自帶的事件如點選含有href屬性的a元素會跳轉，點選submit按鈕會提交表單重新整理頁面，這些都是系統自帶, 6.在ie中使用dom0級方法新增的事件event是window的屬性,使用attachEvent()新增的事件event才是引數參入

相關推薦

js中的事件物件和新增事件

//這裡只是適用於非ie 瀏覽器,ie瀏覽器的event物件和別的瀏覽器不一樣 switch(ev.target.id){ case "box1": alert("box1"); break; case "box2": alert(

js中json物件和字串的轉換

1.JSON.parse() : 字串–>json物件 var str = '{"name":"huangxiaojian","age":"23"}'//單引號寫在{}外，每個屬性名都必須用雙引號，否則會丟擲異常。 JSON.parse(str) 結果： Object age

js中區分物件和陣列

console.log(Object.prototype.toString.call([]));//[object Array] console.log(Object.prototype.toStri

JS中Array物件和String物件的常用方法

1.陣列的建立： 使用字面量建立： var arr = [10,20,20,40]; 使用建構函式建立陣列 var arr = new Array(1,2,3,4); 2.陣列元素的型別：

js中json物件和string互轉

json轉string的方法 /** * json物件轉字串形式 */ function json2str(o) { var arr = []; var fmt = function(s) { if (typeof s ==

在for迴圈中動態拼接字串和新增事件

不多說，直接開始 ES6之前常用寫法: for(var i = 0;i<10;i++){ 　　/閉包寫法 　　(function(j){ var a = document.createElement("div"); 　　

js event-事件物件和clientX,clientY

event:事件物件，當一個事件發生的時候，和當前這個物件發生的這個事件有關的一些詳細的資訊都會被臨時儲存到一個指定地方-event物件，供我們在需要的時候呼叫。飛機-黑匣子。 事件物件必須在一個事件呼叫的函式裡面使用才有內容 事件函式：事件呼叫的函式，一個函式是不是事件函式，不在定義的決定

JS中使用for迴圈新增點選事件時，獲取i值及引數異常原因及解決辦法

遇見此問題,程式碼檢查了n次都沒毛病,但是卻出現下述問題, 坑了我好久,原來是這個原因,記錄避坑! PS這是js的處理方法, 在jquery中直接用each遍歷元素繫結點選事件即可避免 $('#id').each(function(i){ $(this).click(

js給物件標籤新增事件&方法的封裝

<pre name="code" class="html"><span style="font-family:Microsoft YaHei;font-size:14px;"><body> <div id="box"> &

js中的preventDefault和stopPropagation_阻止事件

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

Javascript中的事件物件和事件型別

#### *接上次看JS的事件冒泡和捕獲，所以順帶就把`事件`相關的知識都看完好了* #### *而且想到一個好的學習方法，第一天自己看，第二天把前一天學習的東西寫下來，一方面可以當複習，一方面當重新整理並且分享* ---- ## 事件物件 事件處理程式函式在處理事件時，或者說`DOM`在觸發某個事件

js keyup、keypress和keydown事件 詳解

rgs spa 小鍵盤 ansi 使用方法 form 單個 sage ges js keyup、keypress和keydown事件都是有關於鍵盤的事件 當一個按鍵被pressed 或released在每一個現代瀏覽器中，都可能有三種客戶端事件。 keydown even

JS中的異步以及事件輪詢機制

alt sha ack web 網絡請求 HA click 特性 隊列 轉載出處：http://www.cnblogs.com/heshan1992/p/6650593.html 一、JS為何是單線程的？ JavaScript語言的一大特點就是單線程，也就是說，同

js事件冒泡和阻止事件冒泡

1,什麼是事件冒泡 有層級關係的一連串的盒子都添加了事件,觸發子盒子的事件是,該子盒子的父級及以上的元素的事件也會被觸發; 如下面的程式碼,當我們點選子盒子dv3時,父盒子dv2,dv1的點選事件也會被觸發,這就是事件冒泡 <head> <meta charse

js中Object物件常用方法和屬性

1、屬性 Object.prototype.writable：預設為false Object.prototype.enumerable：預設為false Object.prototype.configurable：預設為false Object.prototype.constructor：用

js在for迴圈裡新增事件後獲取i

1 <ul> 2 <li index="1">1</li> 3 <li index="2">1</li> 4 <li index="3">1</l

div 中 滑鼠懸停 和 離開事件 圖片修改 和背景修改

.kuan{        border: 1px solid #1aa094;padding: 10px 0; width: 145px;height:40px;     -webkit-border-radius: 8px;

event事件物件和clientX,clientY

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>event事件和clientX,clientY</title> </head> &

js為Object物件動態新增屬性和值

為Object物件動態新增屬性和值 方式1： var obj = {}; //或者 var obj=new Object(); var key = "name"; var value = "張三丰" obj[key] = value; console.info(obj); 方式2，

VB.net中，給類新增事件

定義一個全新的類 Public Class TestEvent Public Event testEvent_Name(ByVal testString As String) '定義一個事件 ，差不多像一個函式宣告，也想一個委託宣告 Public Sub