HTML DOM addEventListener()方法示例.pdf
作为后台程序猿，发现前端JS也是蛮有趣的，因为要弄懂一段微信支付提供的使用示例代码，学习过程中顺序记录了此文。
带3个参数：
|
参数名 |
是否可选 |
参数说明 |
|
event |
必须 |
字符串，指定事件名。注意不要使用“on”前缀。例如使用“click“，而不是使用“onclick”。所有HTML DOM Event对象可参考：http://www.w3cschool.cc/jsref/dom-obj-event.html。 |
|
function |
必须 |
指定要事件触发时执行的函数。 |
|
useCapture |
可选 |
布尔值，指定事件是否在捕获或冒泡阶段执行。 |
|
<!DOCTYPE html> <html> <body> 用户点击后使用 addEventListener() 方法来执行函数。 <button id="myBtn">点我</button> <p id="demo"> <script> document.getElementById("myBtn").addEventListener("click", myFunction);
function myFunction() { document.getElementById("demo").innerHTML = "Hello World"; } </script> </body> </html> |
使用闭包：
|
<!DOCTYPE html> <html> <body> 用户点击后使用 addEventListener() 方法来执行函数。 <button id="myBtn">点我</button> <p id="demo"> <script> document.getElementById("myBtn").addEventListener( "click", function() { document.getElementById("demo").innerHTML = "Hello World"; } ); </script> </body> </html> |
|
<!DOCTYPE html> <html> <body> 用户点击后使用 addEventListener() 方法来执行函数。 <button id="myBtn" onclick="myFunction()">点我</button> <p id="demo"> <script> function myFunction() { document.getElementById("demo").innerHTML = "Hello World"; } </script> </body> </html> |
jQuery用法1：
|
<!DOCTYPE html> <html> <script language="javascript" src="http://res.mail.qq.com/mmr/static/lib/js/jquery.js"></script> <body> 用户点击后使用 addEventListener() 方法来执行函数。 <button id="myBtn" onclick="myFunction()">点我</button> <p id="demo"> <script> function myFunction() { <!-- $(‘#demo‘)也可以改成：$(‘p#demo‘) --> $(‘#demo‘).html("Hello World"); } </script> </body> </html> |
jQuery用法2：
|
<!DOCTYPE html> <html> <script language="javascript" src="http://res.mail.qq.com/mmr/static/lib/js/jquery.js"></script> <body> 用户点击后使用 addEventListener() 方法来执行函数。 <button id="myBtn" onclick="myFunction()">点我</button> <p id="demo"> <script> function myFunction() { $(‘p#demo‘)[0].innerHTML = "Hello World"; } </script> </body> </html> |
HTML DOM addEventListener() 方法示例
原文：http://blog.chinaunix.net/uid-20682147-id-4897811.html
