替节点绑定事件的几种方法

为节点绑定事件的几种方法

“绑定事件”是UI开发中最常用到的操作之一，这里介绍几种方法，供大家选择：

1、html内嵌法

顾名思义，就是在html代码里节点代码里绑定事件。如下面代码

<html>
<head>
<script type="text/javascript">
  function test(){
    alert("bang");
  }
</script>
</head>
<body>
<input type="button" onclick="test()" value="click me"/>
</body>
</html>

需要注意的是，onclick后面的function赋值是需要添加括号的，否则事件无法绑定和触发。

如果onclick需要连续执行多个操作，可以按如下方法绑定事件。

<html>
<head>
<script type="text/javascript">
  function test(){
    alert("bang");
  }

  function test1(){
    alert("bang2");
  }
</script>
</head>
<body>
<input type="button" onclick="javascript:test();test1();" value="click me"/>
</body>
</html>

其中的“JavaScript：”也可以不加，具体原因，待查。

其中关于事件参数的传递和设置请参看 window.event 的介绍。

2、动态绑定

在很多时候，我们需要动态的创建节点，然后将某个或某几个事件绑定在该新建对象上。动态绑定又包含两种方式：

1、直接为对象赋值

document.getElementById("xxx").onclick = test;

2、使用两个重要的Js函数：attachEvent 和 addEventListener。

方法1和2的区别在于，如果连续执行如果执行如下的连续方法1赋值操作，最后的结果是只有test3被绑定给了对象。

document.getElementById("xxx").onclick = test1;
document.getElementById("xxx").onclick = test2;
document.getElementById("xxx").onclick = test3;

而方法2如果采用相同的连续赋值方式，则会产生追加的效果，事件触发是的执行顺序，由下至上。

另外对于方法1，我们要注意，赋给“onclick”的值只是一个“引用“，一定不能加括号，否则事件就会被执行，而赋给onclick的就是事件执行的返回结果了。

对于方法2我们来详细了解下。两种js方法，在IE下可用attachEvent，在FF下则要用addEventListener。

attachEvent()有两个参数

第一个是事件名称
第二个是需执行的函数；

addEventListener()有三个参数

第一个是事件名称，但与IE事件不同的是，事件不带"on",比如"onsubmit"在这里应为"submit"
第二个是需执行的函数
第三个参数为布尔值，表示该事件的响应顺序(useCapture)，userCapture若为true,则浏览器采用Capture,若为false则采用bubbing方式。

html代码

js代码

window.onload=function(){ document.getElementById("div_test").addEventListener("click",test1,false); document.getElementById("btn_test").addEventListener("click",test2,false);

}

function test1(){ alert("外层div触发") }

function test2(){ alert("内层input触发") }

如果userCapture是true则test1先触发，如果userCapture是false则test2先触发。

请看如下示例代码。

<html>
<head>
<script type="text/javascript">
  
  function addEventHandler(oTarget, sEventType, fnHandler) {  
    if (oTarget.addEventListener) {  
        oTarget.addEventListener(sEventType, fnHandler, false);  
    } else if (oTarget.attachEvent) {  
        oTarget.attachEvent("on" + sEventType, fnHandler);  
    } else {  
        oTarget["on" + sEventType] = fnHandler;  
    }  
  } 
  
  function test(){
    alert("bang");
  }

  function test1(){
    alert("bang2");
  }

  function init(){
    var input = document.createElement('input');
	input.type = 'button';
	input.value = 'click me';
	addEventHandler(input,'click',test);
	addEventHandler(input,'click',test1);
    
	document.getElementById('button_container').appendChild(input);
    
  }
</script>
</head>
<body onload="init()">
<div id="button_container"></div>
</body>
</html>

点击按钮后，事件执行的顺序是 test1-->test2。

因为IE和Firefox绑定事件的方法不一样，所以需要判断浏览器类型。具体方法参见：浏览器类型判别。

替节点绑定事件的几种方法

相关推荐