HTML DOM addEventListener() 方法示例
HTML DOM addEventListener()方法示例.pdf
n 前言
作为后台程序猿，发现前端JS也是蛮有趣的，因为要弄懂一段微信支付提供的使用示例代码，学习过程中顺序记录了此文。
n 页面效果
带3个参数：
|
参数名 |
是否可选 |
参数说明 |
|
event |
必须 |
字符串，指定事件名。注意不要使用“on”前缀。例如使用“click“，而不是使用“onclick”。所有HTML DOM Event对象可参考：http://www.w3cschool.cc/jsref/dom-obj-event.html。 |
|
function |
必须 |
指定要事件触发时执行的函数。 |
|
useCapture |
可选 |
布尔值，指定事件是否在捕获或冒泡阶段执行。 |
n HTML代码
|
<!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> |
n 运行效果
n HTML代码也可改成如下1：
使用闭包：
|
<!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> |
n HTML代码也可改成如下2：
|
<!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> |
n HTML代码也可改成如下3：
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> |
n HTML代码也可改成如下4：
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> |
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
