javascript event事件绑定,兼容IE6 attachEvent

Javascript的事件绑定主要有四种方法(一下在IE中运行正常,但不保证其他浏览器):

  [注:onXXX为某一事件,fun为某一function,domId为某一DOM对象id,event类型见后边附录。]

1、在DOM中,直接用onXXX="fun();"进行绑定

2、在Javascript代码中用 DOM对象.onXXX=fun 进行绑定

3、用 DOM对象.attachEvent("onXXX",fun) 进行绑定

4、用<script for="domId" event="onXXX">fun();</script> 进行绑定

<html>
<head>
<title>event test</title>
</head>
<body onload="init()">
<!-- 绑定方式一:在元素中,通过onXXX(事件)设置绑定方法 -->
<button id="btn1" onclick="display()" >绑定方式一</button>

<!-- 绑定方式二:在Javascript代码中,通过获得元素,为元素的onXXX(事件)设置绑定方法  -->
<button id="btn2">绑定方式二</button>

<!-- 绑定方式三:通过for、event为元素绑定事件(IE4+)。for后面是元素id,event是具体事件  -->
<button id="btn3">绑定方式三</button>

<!-- 绑定方式四:通过attachEvent为元素绑定事件(IE5+)。第一个参数是事件名,第二个参数是绑定的方法 -->
<button id="btn4">绑定方式四</button>
</body>
</html>
<script type="text/网页特效">
 function init() {
  document.getElementById("btn2").onclick = display;//为button2绑定事件
  document.getElementById("btn4").attachEvent("onclick", display);//为button4绑定事件
 }

 function display(event) {
  var targ;//触发事件的对象引用
  if (!event) {
   var event = window.event;//获得当前事件(IE)
  }
  if (event.target) {//IE没有target
   targ = evente.target;
  } else if (event.srcElement) {//适用于IE
   targ = event.srcElement;
  }

  //对触发事件的对象进行操作
  alert(targ.tagName+"-"+targ.id+"-"+event.x+"-"+event.offsetX);
  targ.disabled="disabled" ;
 }
<script>
<script for="btn3" event="onclick">
 display();//为button3绑定事件
<script>

实例
var $=function(){
 
}

$.isie= navigator.appName == 'Microsoft Internet Explorer';

if($.isie){
 
 $.bind=function(obj,eve,fun){
  
  if(obj.arr){
  
  }else{
   obj.arr=[];
  }  
  
  if(obj.arr.length>0){
   for(var i=0;i<obj.arr.length;i++){
    if(obj.arr[i].e==eve){
     obj.arr[i].f.push(fun);
     break;
    }
   }
  }else{
   obj.arr.push({e:eve,f:[fun]});
  }
  
  var AddEventToObj=function(inx){
   obj["on"+obj.arr[inx].e]=function(){
    for(var i=0;i<obj.arr[inx].f.length;i++)
     obj.arr[inx].f[i]();
   }
  }
  
  for(var i=0;i<obj.arr.length;i++){
   AddEventToObj(i);
  }

 }
}else{
 $.bind = function(obj,eve,fun){
  obj.addEventListener(eve,fun,false);
 }
}

$.bind(window,"load",function(){alert('x1')})
$.bind(window,"load",function(){alert('x2')})
$.bind(window,"load",function(){alert('x3')})
$.bind(window,"load",function(){alert('x4')})
$.bind(window,"load",function(){alert('x5')})
$.bind(window,"load",function(){alert('x6')})
$.bind(window,"load",function(){alert('x7')})
$.bind(window,"load",function(){alert('x8')})

IE event属性:
srcElement :对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。
toElement: 对于 mouseo教程ver 和 mouseout 事件,该属性引用移入鼠标的元素。
x,y: 事件发生的位置的 x 坐标和 y 坐标,它们相对于用CSS动态定位的最内层包容元素

cancelBubble: 如果事件句柄想阻止事件传播到包容对象,必须把该属性设为 true。
fromElement :对于 mouseover 和 mouseout 事件,fromElement 引用移出鼠标的元素。
keyCode :对于 keypress 事件,该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件,它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。
offsetX,offsetY :发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。
returnValue: 如果设置了该属性,它的值比事件句柄的返回值优先级高。把这个属性设置为 fasle,可以取消发生事件的源元素的默认动作。

 

时间: 2024-10-22 01:17:06

javascript event事件绑定,兼容IE6 attachEvent的相关文章

关于JavaScript中事件绑定的方法总结_javascript技巧

最近收集了一些关于JavaScript绑定事件的方法,汇总了一下,不全面,但是,希望便于以后自己查看. JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScript代码中直接绑定 3 绑定事件监听函数 一.在DOM元素中直接绑定 也就是直接在html标签中通过 onXXX="" 来绑定.举个例子: <input type="button" value="点我呦" onclick="aler

浅谈JavaScript之事件绑定

关于 JavaScript 的事件绑定在网上已经有不少相关的资料了,今天这篇文章也是在被同事问及的时候才顺便把它记录下来,算是 JavaScript 事件绑定中的一个小技巧,如果能在工作中善加利用,会有出其不意的效果   其实没有什么新的知识点,只是为了方便其他有需要的朋友们翻阅,对自己而言也算是一个积累,所以只能算是闲谈 JavaScript,老鸟们可以尽情飘过. 在进入正题之前,先提个问题热热身吧.现在有如下 HTML 结构: 复制代码 代码如下: <div id="wrap"

javascript-用自定义的传统事件绑定函数代替attachEvent的一些问题

问题描述 用自定义的传统事件绑定函数代替attachEvent的一些问题 我看了一个教程,上面写了一个用自定义的传统事件绑定函数来代替IE8及以上的老IE的attachEvent方法,主讲老师写了一点看不懂,哪位能解释一下,代码如下:HTML代码: <body> <input type=""button"" value=""按钮"" id=""button"" />

浅谈JavaScript之事件绑定_javascript技巧

其实没有什么新的知识点,只是为了方便其他有需要的朋友们翻阅,对自己而言也算是一个积累,所以只能算是闲谈 JavaScript,老鸟们可以尽情飘过.在进入正题之前,先提个问题热热身吧.现在有如下 HTML 结构: 复制代码 代码如下: <div id="wrap"> <input type="button" value="按钮一" /> <input type="button" value=&quo

Javascript Event事件中IE与标准DOM的比较

事件流的区别 IE采用冒泡型事件 Netscape使用捕获型事件 DOM使用先捕获后冒泡型事件 示例: 复制代码 代码如下: <body> <div> <button>点击这里</button> </div> </body> 冒泡型事件模型: button->div->body (IE事件流) 捕获型事件模型: body->div->button (Netscape事件流) DOM事件模型: body->

JavaScript Event事件学习第一章 Event介绍_javascript技巧

没有event就没有脚本.可以看看任何有JavaScript代码的网页:几乎所有的例子都有一个事件触发了脚本.原因非常简单.JavaScript就是给你的页面添加内部活动:用户做一些事情然后页面做出回应. 因此JavaScript就需要一个方法能够检测到用户的动作然后才能知道什么时候做出反应.这还需要知道那个函数会被执行,函数会做一些你认为的给你的网页增色的动作.这些文字描述了如何去写这样的脚本.虽然不容易,但是这是一个很让人满足的工作. 当用户做了什么事情event就发生了,当然还有一些eve

JavaScript的事件绑定(方便不支持js的时候)_javascript技巧

首先,比如我们使用JavaScript来加强我们的网页,但是我们要考虑到,如果用户的浏览器不支持JavaScript,或者用户disable了JavaScript的功能,那我们的网页能不能正常显示呢?例如下面的例子, 复制代码 代码如下: <a href = "#" onclick = "popUp('http://www.jb51.net') ; return false;"> 其中popUp这个函数是自定义的,新打开一个窗口来限制URL中的网页.但是

javascript event 事件解析 .

描述 event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等. event对象只在事件发生的过程中才有效.  event的某些属性只对特定的事件有意义.比如,fromElement 和 toElement 属性只对 onmouseover 和  onmouseout 事件有意义. 例子 下面的例子检查鼠标是否在链接上单击,并且,如果shift键被按下,就取消链接的跳转. < HTML> <HEAD><TITLE>Cancels Links

javascript event 事件解析_javascript技巧

event对象只在事件发生的过程中才有效. event的某些属性只对特定的事件有意义.比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义. 例子 下面的例子检查鼠标是否在链接上单击,并且,如果shift键被按下,就取消链接的跳转. <HTML> <HEAD><TITLE>Cancels Links</TITLE> <SCRIPT LANGUAGE="JScript&qu