element.addEventListener(event, function, useCapture)
第一个参数是事件的类型（比如 "click" 或 "mousedown"）。
第二个参数是当事件发生时我们需要调用的函数。
第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的。
注意：请勿对事件使用 "on" 前缀；请使用 "click" 代替 "onclick"。
addEventListener可以对一个dom添加多个监听器，并且会顺序执行。
开发中，会遇到多个js文件都使用window.onload，然而只有最后一个绑定的生效，如下：
window.onload = func1()
window.onload = func2()
这时可以用addEventListener来解决：
window.addEventListener('load', func1)
window.addEventListener('load', func2)
在js中，需要监听iframe的点击事件，但是因为浏览器的同源策略，是无法监听到的，只能另辟蹊径去解决它 注意，仅限于pc网站，意思就是必须要有鼠标移入移出iframe的操作<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html charset=ISO-8859-1"> <title>Detect IFrame Clicks</title> <script src="./jquery-3.4.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var currentObj=Object var isOverIFrame = false function processMouseOut(e) { console.log('out iframe',e.target) currentObj=e.target isOverIFrame = false top.focus() } function processMouseOver(e) { // log("IFrame mouse >> OVER << detected.") console.log('in iframe',e.target) currentObj=e.target isOverIFrame = true } function processIFrameClick(event) { if(isOverIFrame) { console.log('click iframe',event.target,currentObj) } } function attachOnloadEvent(func, obj) { if(typeof window.addEventListener != 'undefined') { window.addEventListener('load', func, false) } else if (typeof document.addEventListener != 'undefined') { document.addEventListener('load', func, false) } else if (typeof window.attachEvent != 'undefined') { window.attachEvent('onload', func) } else { if (typeof window.onload == 'function') { var oldonload = onload window.onload = function() { oldonload() func() } } else { window.onload = func } } } function init() { var element = document.getElementsByTagName("iframe") for (var i=0 i<element.length i++) { element[i].onmouseover = processMouseOver element[i].onmouseout = processMouseOut } if (typeof window.attachEvent != 'undefined') { top.attachEvent('onblur', processIFrameClick) } else if (typeof window.addEventListener != 'undefined') { top.addEventListener('blur', processIFrameClick, false) } } attachOnloadEvent(init) }) </script> </head> <body> <iframe src="https://www.hao123.com" width="80%" height="600px"></iframe> <iframe src="https://www.baidu.com" width="80%" height="600px"></iframe> </form> </body> </html>复制上边整段html，打开console控制台，即可解决这个问题，亲测好用js的监听事件就是相当于注册一个监听器，随时检测对应事件有没有发生，如果发生了自动调用定义好的函数来处理。一般情况下 监听事件是对应于dom元素而言的，同时也需要声明所监听事件种类。
比如可以为一个按钮设置监听事件，点击之后自动调用相应函数处理。
同时可以在用函数处理时使用事件对象（event object）来获得关于触发这个事件的对象的信息。
