js 中用Dom2级事件处理函数(改变样式)
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js 中用Dom2级事件处理函数(改变样式)相关的知识，希望对你有一定的参考价值。
下面这些客户端 javascript代码用到了事件，它给一个很重要的事件--“load" 事件注册了一个事件处理程序。同赐教，了展示了注册”click“事件处理函数更高级的一种方法
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <script> 9 //dom2级事件语法是 addEvenLisetener("event","执行函数内容") 10 window.onload = function(){ //设置当页面加载时执行 11 var btn =document.getElementsByTagName("button") //获取btn元素 12 for( var i = 0;i<btn.length;i++){ //把每个button元素便利出来 13 var button = btn[i] 14 if(button.addEventListener){ //判断游览器的兼容问题，如果是ie8以下的用的是else语用代码段里的 15 button.addEventListener("click",change) 16 } 17 else{ 18 button.attachEvent("onclick",change) 19 } 20 21 } 22 } 23 function change(e){ //执行函数内容 24 e.target.style.color ="red" //着重解释一下e.target什么意思 ，e代表事件， target代表元素，合起来就是事件元素指的就是被监听到的事件目标变样式 25 e.target.style.background ="black" 26 } 27 </script> 28 <button>按钮一</button> 29 <button>按钮二</button> 30 <button>按钮三</button> 31 <button>按钮四</button> 32 <button>按钮五</button> 33 </body> 34 </html>
以上是关于js 中用Dom2级事件处理函数(改变样式)的主要内容，如果未能解决你的问题，请参考以下文章
JS：Html事件处理程序 vs DOM0级事件处理程序 vs DOM2级事件处理程序