DOM操作--添加事件处理程序

给DOM节点增加事件处理程序一般有以下3种方法

1：通过节点属性显式声明

      如以下代码所示，直接在HTML中，显式地为按钮绑定了click事件，当该按钮有用户点击行为时，便会触发myClickFunc方法

     <button id="hello" onclick="myFunc ()">点我试试</button>
     myFunc 的定义在js中完成：

<pre name="code" class="javascript"> <script type="text/javascript">
var myFunc=function(evt){
console.log("hello ,feifei");
}</script>

2、通过节点属性动态绑定

       这种事件处理程序的绑定，属于第一种的变形，将一个函数赋值给一个事件处理程序属性。

        <button id="hello" >点我试试</button>

       通过DOM操作进行绑定：

      <script type="text/javascript">
var myFunc=function(evt){
console.log("hello ,feifei");
}
document.getElementById ('hello').onclick=myFunc ;
</script>

3、通过事件监听的方式

     通过addEventListener,接受3个参数，要处理的事件名，作为事件处理程序的函数，一个布尔值。布尔值的参数如果为true， 表示在捕获阶段调用事件处理程序，如果为false，表示在冒泡阶段调用事件处理程序。
     

<button id="hello" >点我试试</button>

 

<script type="text/javascript">
var myFunc=function(evt){
console.log("hello ,feifei");
}
document.getElementById ('hello').addEventListener ('click',myFunc);
</script>

三种方法的优缺点

1、通过节点属性显式声明：存在时差问题，因为用户可能在HTML元素出现的时候就在页面触发相应的事件，但当时事件处理程序可能不具备执行条件；这样拓展事件处理的作用域链在不同的浏览器中会导致不同的结果；HTML与JavaScript代码紧密耦合，违背了HTML与JavaScript分离的原则。

2、通过节点属性动态绑定：一次只能添加一个事件处理程序

3、通过事件监听的方式：可以添加多个事件处理程序，是推荐用法