本文主要是介绍原生js事件处理函数addEventListener、attachEvent兼容性处理,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><input type="button" value="按钮" id="btn"><script src="js/common.js"></script><script>var btn = my$('btn');console.dir(btn);console.dir(btn.addEventListener);// 第1种:// if (btn.addEventListener) {// btn.addEventListener('click', function () {// console.log('hello');// });// } else if (btn.attachEvent) {// btn.attachEvent('onclick', function () {// console.log('hello');// });// } else {// btn.onclick = function () {// console.log('hello');// };// }// 第2种:// if (btn.addEventListener) {// btn.addEventListener('click', addEventListener);// } else if (btn.attachEvent) {// btn.attachEvent('onclick', addEventListener);// } else {// btn.onclick = addEventListener;// }// // 事件处理函数// function addEventListener() {// console.log('hello');// }// 第3种:addEventListener(btn, 'click', function () {console.log('hello');});addEventListener(btn, 'click', function () {console.log('hello world');});function addEventListener(element, type, fn) {if (element.addEventListener) {element.addEventListener(type, fn); // 第三个参数默认是false} else if (element.attachEvent) {element.attachEvent('on' + type, fn);} else {element['on' + type] = fn;}}</script>
</body>
</html>
这篇关于原生js事件处理函数addEventListener、attachEvent兼容性处理的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!