事件处理函数

最新推荐文章于 2023-02-20 15:13:08 发布

原创最新推荐文章于 2023-02-20 15:13:08 发布 · 244 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

javascript基础专栏收录该内容

20 篇文章

订阅专栏

1 添加事件

	var addEvent = (function () { 
	    if (document.addEventListener) { 
	        return function (el, type, fn) { 
				//FF
	            el.addEventListener(type, fn, false); 
	        }; 
	    } else { 
	        return function (el, type, fn) { 
	            el.attachEvent('on' + type, function () { 
					//alert( "addEvent ======== "+obj["on"+type]  );
					//IE
	                return fn.call(el, window.event); 
	            }); 
	        } 
	    } 
	})();

2 移除事件

	var removeEvent = function( obj, type, fn ) {
		    if (obj.removeEventListener)
				//FF
		        obj.removeEventListener( type, fn, false );
		    else if (obj.detachEvent) {
				//IE
		        obj.detachEvent( "on"+type,fn  );
		        //obj["on"+type] = null;
				//alert("removeEvent ======== "+ obj["on"+type]  );
		    }
		};

3 窗体加载事件

	var loadEvent = function(fn) {
		    var oldonload = window.onload;
		   // alert("loadEvent========== "+  (typeof window.onload =='function' ));
		    if (typeof window.onload != 'function') {//这一句还不知道啥意思
		        window.onload = fn;
		    }else {
		        window.onload = function() {
		            oldonload();
		            fn();
		        }
		    }
		}

4 阻止dom的默认事件执行

	var  stopEvent = function(e){
	      e = e || window.event;
	      if(e.preventDefault) {
	        e.preventDefault(); //FF
	        e.stopPropagation();
	      }else{
	        e.returnValue = false; //IE
	        e.cancelBubble = true;
	      }
	 }

使用例子：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS阻止链接跳转</title>
<script type="text/javascript"> 
 
//对于这个例子超链接，点击的时候只执行单击事件，而不会执行超链接
var  stopDefault = function(e){
    e = e || window.event;
    if(e.preventDefault) {
      //FF
      e.preventDefault();
      e.stopPropagation();
    }else{
      //IE
      e.returnValue = false;
      e.cancelBubble = true;
    }
  }
</script> 
</head>
<body>
<a href="http://www.baidu.com" id="testLink">百度</a> 
<script type="text/javascript"> 
var test = document.getElementById('testLink'); 
test.onclick = function(e) { 
   alert('我的链接地址是：' + this.href + ', 但是我不会跳转。'); 
   stopDefault(e); 
} 
</script>
</body>

5 阻止冒泡

	var stopPropagation = function(e) {
	    e = e || window.event;
	    if (!+"\v1") {
	       e.cancelBubble = true;        
	    } else {
	       e.stopPropagation();
	    }
	}

6 获取事件源

	//获取事件源
	var getEvent1 = function(e){
	     e = e || window.event;
	    var target = event.srcElement ? event.srcElement : event.target;
	    return target 
	}

	//方法2
	function getEvent() {
	    if (window.event) return window.event;
	    var c = getEvent.caller;
	    //找到 调用事件的最上层函数 arguments的第一个参数是事件源
	    while (c.caller) c = c.caller;
	    return c.arguments[0];
	}

调用例子：

 	<button id="btn">单击事件1</button>
	<button id="btn2">单击事件2</button>
 
 	var btn = document.getElementById("btn");
	var btn2 = document.getElementById("btn2");
	
	
	addEvent(btn,'click',function(  e ){
		alert( getEvent()   );
		
	});
	btn2.onclick=function(){
		
		alert( getEvent()   );
	}
	/*
	removeEvent( btn, 'click',function(){
		alert('移除')
	});
 	
	loadEvent(function(){
		alert('loadEvent执行  ' );
	});
	*/