下面这些客户端 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. 单片微机原理P2：80C51外部中断与定时器系统

    0. 外部中断 书上的废话当然是很多的了,对于中断我想大家应该早就有一个很直观的认识,就是"设置断点,执行外部外码,然后返回断点"这样的三个过程.中断给系统提供了一个良好的响应模式 ...

  2. C#- 布署WinForm程序

    1:新建安装部署项目 打开VS,点击新建项目,选择:其他项目类型->安装与部署->安装向导(安装项目也一样),然后点击确定.(详细见下图) ,此主题相关图片如下: 2:安装向导 关闭后打开 ...

  3. How to find configuration file MySQL uses?

    http://www.dbasquare.com/2012/04/01/how-to-find-mysql-configuration-file/ A customer called me today ...

  4. JavaScript常用正则表达式与应用（一）

    JavaScript的String类和RegExp对象类都定义了相关方法使用正则表达式进行模式匹配,本文将以连载方式介绍JavaScript常用正则表达式与相关应用,欢迎交流 本节是连载一,首先介绍J ...

  5. Override ListView getAdapter造成的后果

    近期工作中,发现了一个bug,是和ListView Adapter有关的.产生了FC,描写叙述信息大约是 "The content of the adapter has changed bu ...

  6. phpmailer,smtp发送邮件实例(转)

    一,用phpmailer发送邮件 查看复制打印? <?php   include "class.phpmailer.php";    //包函邮件发送类      //邮件发 ...

  7. Linux内核：关于中断你须要知道的

    1.中断处理程序与其它内核函数真正的差别在于,中断处理程序是被内核调用来对应中断的,而它们执行于中断上下文(原子上下文)中,在该上下文中执行的代码不可堵塞. 中断就是由硬件打断操作系统. 2.异常与中 ...

  8. cocos2dx js文件加密为jsc文件

    发布产品,脚本代码是必须要加密的 偶尔会出现编译后的jsc无法运行,或者某些jsb自定义的函数找不到, 最好将require("jsb.js")的全部内容整合到一个文件,然后编译j ...

  9. iOS中利用 runtime 一键改变字体

    1.准备 我们新建一个项目名叫ChangeFont,然后我就随便找了个名叫loveway.ttf的字体库拖进去,里面的工程目录大概就是这样的 目录 现在我们就简单的直接在storyboard上拖了一个 ...

  10. Android开发之IPC进程间通信-AIDL介绍及实例解析

    一.IPC进程间通信 IPC是进程间通信方法的统称,Linux IPC包括以下方法,Android的进程间通信主要采用是哪些方法呢? 1. 管道(Pipe)及有名管道(named pipe):管道可用 ...