❶ js解除事件綁定的問題,參數怎麼填解除事件綁定需要函數名但是如果給出函數名 this又發生了變化
//因為你注冊事件時的第二個參數函數是匿名函數調用已存函數
//我不知道這樣寫是否有效你試下
document.removeEventListerner("touchmove",function(ev){
_this.fnMove(ev);
},false);
只有被addEventListener方法添加的事件才可以使用removeEventListener來注銷.
刪除事件時removeEventListener的三個參數必須要跟addEventListener的參數相同
語法:elem.removeEventListener(event_type,fun_name,bool);
event_type:事件類型.比如單擊,或雙擊.或移動滑鼠事件等.
fun_name:要被注銷的事件名稱,函數名.
bool:布爾值.true或false.true代表支持事件冒泡.false則不支持事件冒泡捕獲
❷ jquery怎麼取消滑鼠移動事件
使用off()或者unbind()進行移動事件的解綁
例如:
$(document).mouseup(function (e) {
$(this).unbind('mousemove');
});
❸ 匯總js事件相關及事件處理模型
js事件是為了實現用戶交互,比如當用戶滑鼠點擊或者鍵盤輸入時,瀏覽器會監聽截獲並且通知js做出反饋執行相應的函數,實現交互。
js的事件類型有很多,我們先來大概總結一下常用的JS事件
click點擊事件、mousedown滑鼠按下事件、mousemove滑鼠移動事件、mouseup滑鼠抬起事件
contextmenu右鍵出菜單事件、mouseenter/mouseover滑鼠進入事件、mouserleave/mouseout滑鼠離開事件
可通過事件對象的button屬性來區分是左鍵\滾輪\右鍵,分別對應值 0 / 1 / 2
DOM3規定:click事件只能監聽左鍵;只能通過mousedown和mouseup來判斷滑鼠鍵
keydown某鍵被按下時、keyup被松開時、keypress按下並且松開時
觸發順序:先 keydown,然後keypress,最後keyup
keydown和keypress的區別:
input:文本變化時觸發
change:聚焦或失去焦點時判斷狀態是否改變,發生改變是觸發change事件
focus:聚焦時觸發
blur:失去焦點時觸發
利用focus和blur可模擬placeholder
scroll:滾動條滾動時
load:頁面載入完觸發
abort:圖像的載入失敗
dblclick:雙擊事件
error:當載入圖像和文檔時發生錯誤
resize:窗口或者框架被重新調整大小
select:文本被選中時
reset:點擊重置按鈕時
submit:點擊提交按鈕時
接著看如何給DOM元素綁定事件處理函數
兼容性很好
但是根據js的特點,這種賦值的方式肯定會被後面的值覆蓋。因此這種方式綁定事件處理函數規則是:同一個元素同一個事件只能綁定一個處理函數。等同於第一種寫在行間。
IE8及以下不兼容
通過addEventListener綁定的方式,同個元素的同一個事件可以綁定多個處理函數,不會被覆蓋。
attachEvent跟addEventListener 基本一致,也是同一個元素的同一個事件可以綁定多個處理函數,不會被覆蓋。不同的是attachEvent可以綁定的函數是可以重復的,即即使綁定同一個函數都不會不覆蓋。
以上幾種事件綁定方式裡面的this指向有點區別:
也比較好理解,IE獨有的特殊一點指向window,其他都指向dom元素本身
封裝一個兼容性的方法,用於綁定事件:
有的時候我們希望解除事件處理函數,那怎麼辦呢?
其實解除事件處理函數也對應有辦法方法:
1. ele.onxxx = false / ' ' / null
2. ele.removeEventListener(type,fnName,false)
3. ele.attachEvent('on' + type,fnName)
值得注意的是:若干綁定的事件處理函數是匿名函數,則無法解除綁定!
不知道有沒有發現,在上面綁定事件處理函數的時候,處理函數有個參數e或者叫event,其實是一個事件對象
事件對象就是處理函數裡面的一個參數,說白了就是瀏覽器打包好的一個對象自動傳入到處理函數的第一個參數中。
為了兼容IE一般這么寫: e = e || window.event
事件對象會有個屬性target,這個target叫事件源對象,記錄可事件具體在誰身上觸發的那個源頭
同樣IE上事件源對象是e.srcElement,谷歌兩個都有
所以為了兼容IE一般獲取事件源對象是這么來寫:
當瀏覽器發展到第四代時(IE4及Netscape4),瀏覽器開發團隊遇到了一個很有意思的問題:頁面的哪一部分會擁有某個特定的事件?想像畫在一張紙上的一組同心圓。如果把手指放在圓心上,那麼手指指向的不是一個圓,而是紙上的所有圓
兩家公司的瀏覽器開發團隊在看待瀏覽器事件方面還是一致的。如果單擊了某個按鈕,他們都認為單擊事件不僅僅發生在按鈕上,甚至也單擊了整個頁面
但有意思的是,IE和Netscape開發團隊居然提出了差不多是完全相反的事件流的概念。IE的事件流是事件冒泡流,而Netscape的事件流是事件捕獲流。事件冒泡和事件捕獲稱為兩種事件處理模型
IE的事件流叫做事件冒泡(event bubbling), 事件冒泡是結構上(非視覺上)嵌套的函數存在事件冒泡功能,即同一事件自子元素冒泡向父元素(自底向上)
[注意]所有現代瀏覽器都支持事件冒泡
但在具體實現在還是有一些差別。IE9、Firefox、Chrome、Safari將事件一直冒泡到window對象
而事件捕獲的思想是不太具體的節點應該更早接收到事件,而最具體的節點應該最後接收到事件。事件捕獲的用意在於在事件到達預定目標之前就捕獲它
即事件捕獲是指: 結構上(非視覺上)嵌套的元素存在事件捕獲功能,即同一事件自父元素冒泡向子元素(自頂向下)
注意IE上沒有事件捕獲,Chrome和新版本的Firefox等都實現了
一個dom元素的一個事件類型綁定的一個處理函數只能存在一種事件模型,要麼事件冒泡要麼事件捕獲。正常的通過addEventListener(type,fn,false)綁定事件時,最後一個參數默認是false表示的是,事件冒泡模型。如果改成true,立即變成事件捕獲模型
如果一個dom元素的一個事件類型綁定了兩個處理函數,兩個函數的事件處理模型一個是事件冒泡一個是事件捕獲,觸發順序是先捕獲,後冒泡。
focus、blur、change、submit、reset、select等事件類型不冒泡
可以 利用事件冒泡和事件源對象可以叫事件委託給父元素
利用事件冒泡和事件源對象進行處理
優點:
性能好,不需要循環所有元素一個個綁定事件
靈活,當有其他新的子元素時,不需要重新綁定事件。
有的時候,我們不希望有冒泡功能,那我們怎麼取消事件冒泡呢?
封裝一個都好使的取消冒泡函數
有的時候我們需要阻止一些瀏覽器默認的事件
比如:表單提交、a鏈接跳轉、右鍵菜單等
有幾種方式:
參考資料:
DOM事件流的三個階段
深入理解DOM事件機制系列第一篇——事件流
JS事件匯總
JS事件模型
事件1(上)
事件1(下)
DOM級別與DOM事件
DOM事件機制解惑
事件模型
JavaScript 事件委託詳解
JavaScript 事件的學與記:stopPropagation 和 stopImmediatePropagation
event.target和event.currentTarget的區別
js怎麼區分出點擊的是滑鼠左鍵還是右鍵?
❹ js怎麼移除所有綁定的事件
addEventListener()與removeEventListener()用於處理指定和刪除事件處理程序操作。所有的DOM節點中都包含這兩種方法,並且它們都接受3個參數:要處理的事件名、作為事件處理程序的函數和一個布爾值。最有這個布爾值參數是true,表示在捕獲階段調用事件處理程序;如果是false,表示在冒泡階段調用事件處理程序。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>搖一搖</title>
</head>
<script>
document.addEventListener("mousedown", mouse, false);//點擊滑鼠時觸發事件
document.addEventListener("keydown", key, false);//按下鍵盤按鍵時觸發事件
function mouse(){
alert('ddd');
}
function key(){
document.removeEventListener("mousedown", mouse, false);
alert('xxx');
}
</script>
<body>
</body>
</html>
❺ js如何清除所有綁定的事件
1.addEventListener()與removeEventListener()用於處理指定和刪除事件處理程序操作;
2.所有的DOM節點中都包含這兩種方法,並且它們都內接受3個參數:要處理的容事件名、作為事件處理程序的函數和一個布爾值。最有這個布爾值參數是true,表示在捕獲階段調用事件處理程序;如果是false,表示在冒泡階段調用事件處理程序;
❻ JS傳統事件如何解綁,用on添加,非addEventListener添加
使用off解綁。其實使用on添加,在jquery內部也是調用了addEventListener來添加的。
var foo = function () {
// code to handle some kind of event
};
// ... now foo will be called when paragraphs are clicked ...
$("body").on("click", "p", foo);
// ... foo will no longer be called.
$("body").off("click", "p", foo);
❼ jquery的綁定、解除事件方面的問題,js中用到了unbind('mouseout');
你可以在每次綁定之前先解綁原來的事件
$("#img").unbind("mouseout").bind("mouseout",function(){....});
❽ js如何禁止滑鼠中鍵的點擊事件
jQuery(document).on('mousedown',function(Event)
{
if(1===Event.button)Event.preventDefault()
})