下面这些客户端 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. XML与XHTML

    什么是XML XML的基本格式 XML的定义文档 HTML5的文档定义 XHTML1.0的文档定义 XHTML1.0标记格式 12.1 什么是XML XML中文翻译为可扩展标记语言,顾名思义,它比HT ...

  2. google搜索新姿势

    大前提:英文Google→http://www.google.com或http://www.google.cn 第一篇 在搜索框上输入:"indexof/"inurl:lib 再按 ...

  3. [转]Unity批量制作预制物体Prefab

    http://www.u3dblog.com/?p=441 有时候场景中一大批物体都需要制作成预制物体,但是unity只能手动一个一个的创建,感觉非常的蹩脚,下面一个编辑器类的方法解决你的麻烦. st ...

  4. Java生成word文档

    itext-rtf-2.1.7.jar,下载地址:http://download.csdn.net/detail/xuxu198899223/7717727 itext-2.1.7.jar 下载地址: ...

  5. 读写应用程序数据-SQLite3

    SQLite3是嵌入到ios中的关系型数据库.对存储大规模的数据非常实用,使得不必将每个对象加到内存中. 支持NULL.INTEGER.REAL(浮点数字).TEXT(字符串和文本).BLOB(二进制 ...

  6. Big Clock

    Problem Description Our vicar raised money to have the church clock repaired for several weeks. The ...

  7. 使用AOP 实现Redis缓存注解，支持SPEL

    公司项目对Redis使用比较多,因为之前没有做AOP,所以缓存逻辑和业务逻辑交织在一起,维护比较艰难所以最近实现了针对于Redis的@Cacheable,把缓存的对象依照类别分别存放到redis的Ha ...

  8. 安装tensorflow

    官网:http://tensorflow.org/安装步骤:1.sudo apt-get install python-pip python-dev python-virtualenv 3    co ...

  9. hibernate篇章六--demo（0.准备工作）

    这个demo是学习自:学习不可已 这个章节我们先来说准备工作:Hibernate之第〇解之准备工作 首先: 1.新建java project--hibernate_demo_1: 2.新建src fo ...

  10. Sublime Text2配置python环境

    1.下载python并安装     地址:https://www.python.org/downloads/ 2.下载Sublime Text2 并安装     地址:http://www.subli ...