HTML DOM addEventListener() 方法示例

HTML DOM addEventListener()方法示例.pdf 

n  前言

作为后台程序猿，发现前端JS也是蛮有趣的，因为要弄懂一段微信支付提供的使用示例代码，学习过程中顺序记录了此文。

n  页面效果

n  addEventListener函数说明

带3个参数：

参数名	是否可选	参数说明
event	必须	字符串，指定事件名。注意不要使用“on”前缀。例如使用“click“，而不是使用“onclick”。所有HTML DOM Event对象可参考：。
function	必须	指定要事件触发时执行的函数。
useCapture	可选	布尔值，指定事件是否在捕获或冒泡阶段执行。

n  HTML代码

   

       

用户点击后使用 addEventListener() 方法来执行函数。

        <button id="myBtn">点我

       

demo">

       

   

n  运行效果

n  HTML代码也可改成如下1：

使用闭包：

   

       

用户点击后使用 addEventListener() 方法来执行函数。

        myBtn">点我

       

demo">

       

   

n HTML代码也可改成如下2：

   

       

用户点击后使用 addEventListener() 方法来执行函数。

        myBtn" onclick="myFunction()">点我

       

demo">

       

   

n HTML代码也可改成如下3：

jQuery用法1：

   

   

       

用户点击后使用 addEventListener() 方法来执行函数。

        myBtn" onclick="myFunction()">点我

       

demo">

       

   

n HTML代码也可改成如下4：

jQuery用法2：

   

   

       

用户点击后使用 addEventListener() 方法来执行函数。

        myBtn" onclick="myFunction()">点我

       

demo">