下面这些客户端 javascript代码用到了事件，它给一个很重要的事件--“load" 事件注册了一个事件处理程序。同时展示了注册”click“事件处理函数更高级的一种方法

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

 </head>

 <body>

 <script>

     //dom2级事件语法是 addEvenLisetener("event","执行函数内容")

     window.onload = function(){    //设置当页面加载时执行

         var btn =document.getElementsByTagName("button") //获取btn元素

         for( var i = 0;i<btn.length;i++){   //把每个button元素便利出来

             var button = btn[i]

             if(button.addEventListener){    //判断游览器的兼容问题，如果是ie8以下的用的是else语用代码段里的

                 button.addEventListener("click",change)

             }

            else{

                 button.attachEvent("onclick",change)

             }

         }

     }

         function change(e){        //执行函数内容

             e.target.style.color ="red"     //着重解释一下e.target什么意思  ，e代表事件， target代表元素，合起来就是事件元素指的就是被监听到的事件目标变样式

             e.target.style.background ="black"

         }

 </script>

 <button>按钮一</button>

 <button>按钮二</button>

 <button>按钮三</button>

 <button>按钮四</button>

 <button>按钮五</button>

 </body>

 </html>

js 中用Dom2级事件处理函数(改变样式)的更多相关文章

  1. DOM0级事件处理、DOM2级事件处理

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. js跨浏览器的事件处理函数

    /* 跨浏览器的事件处理函数 */ var EventUtil = { addHandler : function(element,type,handler){ if(element.addEvent ...

  3. DOM0级事件处理和DOM2级事件处理

    转自:http://www.cnblogs.com/holyson/p/3914406.html 0级DOM 分为2个:一是在标签内写onclick事件  二是在JS写onlicke=function ...

  4. JS-------DOM0级事件处理和DOM2级事件处理-------简单记法

    0级DOM 分为2个:一是在标签内写onclick事件  二是在JS写onlicke=function(){}函数 1) <input id="myButton" type= ...

  5. js中关于事件处理函数名后面是否带括号的问题

    今天总结一个关于事件处理程序的小细节.首先回顾一下事件处理的一些概念. JS中的事件处理(事件绑定)就是让某种或某些事件触发某些活动.有两种常见的形式,分别是DOM Level 0 和DOM Leve ...

  6. 关于DOM2级事件的事件捕获和事件冒泡

    DOM2级事件中addEventListener的执行机制,多个addEventListener同时添加时的执行先后规律: W3C的DOM事件触发分为三个阶段:①.事件捕获阶段,即由最顶层元素(一般是 ...

  7. 公共事件处理函数js库

    var EventUtil = { /* *添加事件处理 参数:元素对象 事件类型 处理函数 */ addHandle: function (element, type, handle) { //do ...

  8. js DOM0级事件和DOM2级事件

    注册事件有两种方式,分别是DOM0级和DOM2级 DOM0级就是通过事件绑定的形式dom元素只能有(绑定)一个事件处理函数,他的特点是同一个元素绑定相同事件, 后面函数会覆盖前面的 绑定: dom.o ...

  9. 6个函数的output看JS的块级作用域

    1. var output = 0; (function() { output++; }()); console.log(output); 函数对全局的output进行操作,因为JS没有块级作用域,所 ...

随机推荐

  1. S2SH商用后台权限系统第三讲

    个位博友: 您好!今天我们做下登录页面,已经如何登录系统.我们的登录页面很简单,用户名.密码.验证码.下面首先描述下验证码的概念,验证码是为了防止机器人恶意登录.我们这里的验证码采用4位数字,当然你也 ...

  2. Mysql性能优化之缓存参数优化

    数据库属于 IO 密集型的应用程序,其主要职责就是数据的管理及存储工作.而我们知道,从内存中读取一个数据库的时间是微秒级别,而从一块普通硬盘上读取一个IO是在毫秒级别,二者相差3个数量级.所以,要优化 ...

  3. iOS开发技巧（系列十八：扩展UIColor，支持十六进制颜色设置）

    新建一个Category,命名为UIColor+Hex,表示UIColor支持十六进制Hex颜色设置. UIColor+Hex.h文件, #import <UIKit/UIKit.h> # ...

  4. windows 7 64位 安装oracle 11g R2

    1.下载Oracle 11g R2 for Windows的版本 下载地址: http://www.oracle.com/technetwork/database/enterprise-edition ...

  5. 10465 - Homer Simpson 贪心

                                            Homer Simpson Time Limit: 3 seconds Memory Limit: 32 MB Home ...

  6. 网格GridLayout建立

    import java.awt.*;public class GridFlowout extends Frame { public GridFlowout (String str){ {setTitl ...

  7. spinner中的onNothingSelected方法到底什么时候调用？

    这个东东大家在开发中可能不太能用到,所以总是容易被忽略,由于工作原因,我最近琢磨了一下onNothingSelected方法的调用时机问题,其实很简单,只要我们稍微看一下源码就明白了: /** * C ...

  8. android ViewPager滑动事件讲解

    首先ViewPager在处理滑动事件的时候要用到OnPageChangeListener OnPageChangeListener这个接口需要实现三个方法:(onPageScrollStateChan ...

  9. mysql mac 上启动

    launchctl load -w ~/Library/LaunchAgents/homebrew.mxcl.mariadb.plist 中内容: <string>/usr/local/o ...

  10. angularjs填写表单

    https://scotch.io/tutorials/handling-checkboxes-and-radio-buttons-in-angular-forms <!DOCTYPE html ...