1. js 判斷是否存有事件 addeventlistener
原生實現無法判斷是否有事件。如果確實需要請參照以下代碼,另外本代碼只使用於調用dom2形式載入或者移除事件功能,對應dom0類型的沒有做測試。
以下代碼修改了原生的Element對象,是否需要這樣做,請自己酌情處理。
<!DOCTYPEhtml>
<html>
<headlang="en">
<metacharset="UTF-8">
<title></title>
<scripttype="text/javascript">
/**
*此處代碼必須放到任何javascript代碼之前。另外增加事件只能用addEventListener形式。
*/
(function(){
Element.prototype.eventListenerList={};
Element.prototype._addEventListener=Element.prototype.addEventListener;
Element.prototype._removeEventListener=Element.prototype.removeEventListener;
Element.prototype.addEventListener=function(a,b,c){
this._addEventListener(a,b,c);
if(!this.eventListenerList[a])this.eventListenerList[a]=[];
this.eventListenerList[a].push(b);
};
Element.prototype.removeEventListener=function(a,b,c){
this._removeEventListener(a,b,c);
if(this.eventListenerList[a]){
vararr=this.eventListenerList[a];
for(vari=0;i<arr.length;i++){
if(arr[i].toString()===b.toString()){
this.eventListenerList[a].splice(i,1);
}
}
}
}
})();
//此後為測試代碼。
window.onload=function(){
vardom=document.getElementById("test");
//增加三個監聽
dom.addEventListener("click",function(){
console.info("clickfunction");
},false);
dom.addEventListener("click",function(){
console.info("clickfunction2");
},false);
dom.addEventListener("click",function(){
console.info("clickfunction3");
},false);
console.log(dom.eventListenerList["click"].length);
//讀出監聽的方法
varclicks=dom.eventListenerList.click;
if(clicks)clicks.forEach(function(f){
console.log("Ilistentothisfunction:"+f.toString());
});
//刪除監聽
dom.removeEventListener("click",function(){
console.info("clickfunction");
},false);
console.log(dom.eventListenerList["click"].length);
};
</script>
</head>
<body>
<buttonid="test">測試</button>
</body>
</html>
2. js裡面如何判斷按鈕觸發了哪個事件
onmouseover="test(event)";
js改下
function test(e){
var type=e.type ;//type就等於 mouserover或者mouseout
}
3. js如何實現submit的點擊事件判斷是否觸發表單提交
submit只是表單提交來時的驗證事源件,無法獲取提交是否成功
return false阻止表單提交,自己寫ajax提交表單內容
$("#xxx").submit(function () {
$.ajax({ type: 'POST', data: $(this).val(), url: 'xxxx',
success: function () { //...
},
error: function (xhr) {
//...
}
});
return false;
});
4. JS如何判斷滑鼠滾輪事件分析
我們都見到過這些效果,用滑鼠滾輪實現某個表單內的數字增加減少操作,或者滾輪控制某個按鈕的左右,上下滾動。這些都是通過js對滑鼠滾輪的事件監聽來實現的。今天這里介紹的是一點簡單的js對於滑鼠滾輪事件的監聽。先分析原理:我們是通過判斷滑鼠滾動的獲取一個值,然後根據這個值判斷滾動的方向。然而不同瀏覽器有不同的獲取方法,所以要分瀏覽器寫方法。 不同瀏覽器不同的事件 首先,不同的瀏覽器有不同的滾輪事件。主要是有兩種,onmousewheel(firefox不支持)和DOMMouseScroll(只有firefox支持),關於這兩個事件這里不做詳述,想要了解的朋友請先去了解滑鼠滾輪(mousewheel)和DOMMouseScroll事件。過程中需要添加事件監聽:兼容firefox採用addEventListener監聽。 js返回數值判斷滾輪上下 判斷滾輪向上或向下在瀏覽器中也要考慮兼容性(IE、Opera、Safari、Firefox、Chrome)中Firefox 使用detail,其餘四類使用wheelDelta;兩者只在取值上也是不一致,但是含義一致,detail與wheelDelta只各取兩個 值,detail只取±3,wheelDelta只取±120,其中正數表示為向上,負數表示向下。 具體的代碼如下所示: <label for=wheelDelta滾動值:</label(IE/Opera)<input type=text id=wheelDelta/ <label for=detail滾動值:(Firefox)</label<input type=text id=detail/ <script type=text/javascript var scrollFunc=function(e){ e = e || window.event; var t1=document.getElementById(wheelDelta); var t2=document.getElementById(detail); if(e.wheelDelta){//IE/Opera/Chrome t1.value=e.wheelDelta; }else if(e.detail){//Firefox t2.value=e.detail;}} /*監聽事件*/