`

事件处理函数

 
阅读更多

 

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执行  ' );
	});
	*/

 

 

分享到:
评论

相关推荐

    事件处理函数的this

    在JavaScript编程中,"事件处理函数的this"是一个至关重要的概念,它涉及到对象、上下文以及函数调用方式的理解。事件处理函数通常是指那些在用户交互或者特定事件触发时执行的函数,例如点击按钮、页面加载等。在...

    Delphi 动态绑定事件处理函数过程

    在 Delphi 编程环境中,动态绑定事件处理函数是一个强大的特性,它允许程序在运行时动态地连接事件和对应的处理函数,而不是在编译时静态地确定。这为开发提供了更大的灵活性,特别是在处理不确定数量的对象或者需要...

    C#共享事件处理函数示例

    在这种情况下,使用共享事件处理函数可以提高代码的复用性和可维护性。本示例将详细讲解如何使用C#实现共享事件处理函数,并通过`ChangeColor`这个场景来说明。 首先,我们需要理解事件和事件处理程序的基本概念。...

    在每个对象上,这个事件处理函数只会被执行一次。其他规则与bind()函数相同。这个事件处理函数会接收到一个事件对象,可以通过它来阻止(浏览器)默认的行为。如果既想取消默认的行为,又想阻止事件起泡,这个事件处理函数必须返回false。

    这个事件处理函数的特点是它在每个对象上只会执行一次,类似于JavaScript的`addEventListener`方法的第三个参数为`once`时的效果。此外,它还提及了如何阻止浏览器的默认行为以及如何控制事件的冒泡。 1. **事件...

    重写事件处理函数.rar

    在本文中,我们将深入探讨事件处理,特别是如何重写事件处理函数,以便根据需要自定义按键的事件消息,同时避免触发信号与槽机制。 首先,我们需要理解事件的基本概念。事件是用户或系统在应用程序中执行的动作,如...

    元素的内联事件处理函数的特殊作用域在各浏览器中存在差异

    内联事件处理函数的作用域链并非遵循常规的JavaScript作用域规则,而是与元素、DOM结构以及浏览器的实现细节紧密相关。 首先,内联事件处理函数的作用域链有一个独特的结构。在执行时,它通常包含以下几个部分: 1...

    微信小程序 页面跳转事件绑定的实例详解

    事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。 事件对象可以携带额外信息,如 id, dataset, touches。 在组件中绑定一个事件处理函数。 如bindtap,当用户点击该组件的时候会在...

    Qt 基于QGraphicsItem类重载鼠标事件函数的教训

    首先,`QGraphicsItem`提供了几个默认的鼠标事件处理函数,包括`mousePressEvent()`, `mouseMoveEvent()` 和 `mouseReleaseEvent()`。这些函数可以覆盖以处理用户的鼠标操作,例如点击、移动和释放。在创建自定义...

    vb串口通讯源码事件处理函数

    vb串口通讯源码VB中串口事件处理函数的示例本资源系百度网盘分享地址

    把多个JavaScript函数绑定到onload事件处理函数上的方法

    然而,如果试图将多个函数绑定到同一个`onload`事件处理函数,会遇到问题,因为每个事件处理函数只能关联一个函数。 例如,如果我们有`firstFunction()`和`secondFunction()`两个函数,我们可能会尝试像下面这样...

    js代码-this的指向(模拟7):DOM事件处理函数的形式

    在DOM(文档对象模型)事件处理函数中,`this`的指向问题尤为常见。我们通过分析`main.js`中的代码和`README.txt`中的说明,可以深入探讨这个主题。 首先,`this`的指向主要取决于函数是如何被调用的。在JavaScript...

    js 事件处理函数间的Event物件是否全等

    这意味着在一个事件处理函数中对Event对象所做的修改,会在后续的事件处理函数中体现出来。例如,如果在一个处理函数中给Event对象添加了一个属性,在随后的处理函数中可以访问到这个属性。 对于IE浏览器(尤其是在...

    DOM事件处理函数、DOM0,DOM2的优缺点

    目录(一)定义(二)HTML事件处理函数① 特点② 缺点(三)DOM0级事件处理函数① 使用② 删除③ 缺点(四)DOM2级事件处理函数① 使用② 删除③ 注意 (一)定义 事件就是用户或者浏览器自身执行的某种行为,例如...

    实例讲解javascript注册事件处理函数

    第二种方式是通过JavaScript代码动态绑定事件处理函数,即事件句柄方式。例如: ```javascript var bt = document.getElementById("bt"); bt.onclick = function() { mydiv.style.backgroundColor = "green"; }; ``...

    JS中关于事件处理函数名后面是否带括号的问题

     DOM 0级事件处理一般是直接把一个函数分配给一个事件处理程序,既可以在元素中直接分配一个事件处理程序,如方式一所示;也可以在脚本中把函数分配给事件处理程序,如方式二所示。 &lt;!--方式一--&gt; &lt;div ...

    QT的事件处理机制

    2. **事件处理函数(Event Handlers)**:事件处理函数是用于处理特定类型事件的函数。QT提供了一系列预定义的事件处理函数,例如`mousePressEvent()`、`keyPressEvent()`等。这些函数可以在QT提供的基类中找到,并且...

    Qt事件处理之鼠标处理事件

    对象通过重写`QObject`的`event`函数或特定的事件处理函数来接收并处理事件。 对于【标题】"Qt事件处理之鼠标处理事件",我们关注的是鼠标事件。在Qt中,有以下几种常见的鼠标事件: 1. `QEvent::MouseButtonPress...

    React学习04点击事件,函数的使用

    这可以通过在事件处理函数中调用`event.preventDefault()`和`event.stopPropagation()`来实现。 7. **批量处理多个事件** 如果一个元素需要同时响应多个事件,你可以将多个事件处理器以空格分隔的方式放在同一个...

Global site tag (gtag.js) - Google Analytics