html与js动态绑定函数的用法举例

发布时间:2019-12-24编辑:脚本学堂
本文介绍下,在html页面中,动态绑定js函数的方法,有需要的朋友参考下。

1、绑定到元素,比如:
 

复制代码 代码示例:
<input type="button" onclick="doEventThing(event)">   
 

触发:击此按钮

2、绑定事件到对象:这也是比较常见的一种,特别是在IE4+下面:
 

复制代码 代码示例:
  document.getElementById("divid").onclick = doEventThing;

3、使用<script for>进行事件的绑定,这只在IE4+下有用(为button1绑定事件,逻辑在script块中书写event来指定怎么触发事件):
 

复制代码 代码示例:
<script event="onclick" for="button1">
 // script statements here
</script>

4、使用 IE5/Windows 的 attachEvent() 方法     
 

复制代码 代码示例:
document.attachEvent('onmousedown', popup_mousepos);

5、使用 W3C DOM 的 addEventListener() 方法
  

复制代码 代码示例:
addEventListener("eventType",listenerReference,captureFlag);
 

  第三个参数则是一个 Boolean 值,指明该结点是否以DOM中所谓的捕捉模式来侦听事件。对于一个典型的事件侦听器来说,第三个参数应该为false(假)。
prototype在绑定事件的时候兼容IE和W3C的时候做的处理如下:
 

复制代码 代码示例:

 _observeAndCache: function(element, name, observer, useCapture) {   
    if (!this.observers) this.observers = [];    
      if (element.addEventListener) {//W3C DOM    
           this.observers.push([element, name, observer, useCapture]);    
           element.addEventListener(name, observer, useCapture);   

      } else if (element.attachEvent) {//IE5/Windows    
           this.observers.push([element, name, observer, useCapture]);    
           element.attachEvent(’on’ + name, observer);    
        }    
    }
 

撇开this.observers.pust([element,name,observer,useCapture])不谈,对4、5所说的事件绑定就很清楚了。
prototype的此方法的useCapture在IE下没有作用,只对W3C的事件处理机制起作用。