javascript(addEventListener事件处理函式)(DAY21)

这篇文章会介绍addEventListener事件处理函式，它其实和event的监听事件很像，但是addEventListener有它的方便性和特点，我们赶快来认识吧!

addEventListener()事件处理函式

语法: `addEventListener("click",func)`

"click"为事件处理器(callback)，可以放入change、blur等事件，和event的不同在於事件的前面开头不用加on，像是:onclick，只需使用click。
func为要呼叫的函式名称。

addEventListener和event的不同与特点:

event事件都是写在html元素中，也就等於html和javascript是在一起的，这样在撰写程序码或之後编辑时会比较混乱;而addEventListener则是写在javascript中去对html元素监听，html和javascript是分开的，可读性会比较高。
addEventListener可以将html元素同时加入多个监听事件和呼叫多个不同的function函式;而event事件一次都只能使用一个监听事件和呼叫一个function。

Example

原始的样子:

变换数值时，自动改变总金额:

若为负值，不会变动总金额:

<body style="background-color:antiquewhite">
   台湾臭豆腐$60:<input type="number" id="tofu" value="0" />盘<br />
   韩国起司泡面$120:<input type="number" id="noodles" value="0" />碗<br />
   总共<span style="color:red" id="subtotal">0</span>元
   <script>
       //script区块这时候必须放在body区块的最後面，否则会发生错误!
       var tofu = document.getElementById("tofu");
       //var为全域变数，故在function中tofu变数名称也可以被使用
       var noodles = document.getElementById("noodles");
       tofu.addEventListener("change", total);
       //1.监听tofu物件是否被触发
       //2.也可以使用this.addEventListener
       //3.this的意思是目前使用者触发该事件的物件(元素)
       noodles.addEventListener("change", total);
       //1.监听noodles物件是否被触发
       //2.也可以使用this.addEventListener
       function total() {
           var money;
           var x = tofu.value;
           if (x < 0) {
               x = 0;
           }
           //检查使用者是否输入负值，若为负值，则将该输入框的值设定成0
           var y = noodles.value;
           if (y < 0) {
               y = 0;
           }
           money = x * 60 + y * 120;
           //计算$
           document.getElementById("subtotal").innerHTML = money;
       };
   </script>
</body>

补充:在上面这个范例中，若script区块放在head中，则会发生以下错误:

因JavaScript 是从上到下进行编译，故执行时，body中的物件还没被建立，所以编译器会找不到，因此发生错误。所以需移至body的最後面就可以解决这个问题了!