下面这些客户端 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. ASP.NET MVC- Model- An Introduction to Entity Framework for Absolute Beginners

    Introduction This article introduces Entity Framework to absolute beginners. The article is meant fo ...

  2. Kinect for Windows SDK开发入门(15)：进阶指引 下

    Kinect for Windows SDK开发入门(十五):进阶指引 下 上一篇文章介绍了Kinect for Windows SDK进阶开发需要了解的一些内容,包括影像处理Coding4Fun K ...

  3. Wbemtest查询

    运行wbemtest,打开后连接命名空间,默认为“root\cimv2”,可以连接到”IIS管理命名空间(此为Windows Server 2008 R2)“ 查看该命名空间下所有可用的类:单击“枚举 ...

  4. 移动Web开发图片自适应两种常见情况解决方案

    本文主要说的是Web中图片根据手机屏幕大小自适应居中显示,图片自适应两种常见情况解决方案.开始吧 在做配合手机客户端的Web wap页面时,发现文章对图片显示的需求有两种特别重要的情况,一是对于图集, ...

  5. linux atime ctime mtime

    touch testtime 1. stat testtime[为文件名] 可以查看这个文件名的三者状态 2.ll testtime;ll --time=atime testtime ;ll --ti ...

  6. -----------------------------MVC模式理解-----------------------------

    1.用户发送请求到控制层: 2.控制层将接受到的请求转发到模型层: 3.模型层将请求结果转发到控制层: 4.控制层将模型层返回的结果进行视图渲染: 5.视图渲染后返回(jstl): 6.将视图展示给用 ...

  7. EventBus3.0使用总结

    在Android中,接口回调已经能够处理掉大部分业务需求了,实在太变态的需求就用广播也能够完成,自己写的性能好出问题也好解决.....工作需要,不得不看看EventBus的用法,今天就来介绍一下学习经 ...

  8. Android 自定义View修炼-仿QQ5.0 的侧滑菜单效果的实现

    有一段时间没有写博客了,最近比较忙,没什么时间写,刚好今天有点时间, 我就分享下,侧滑菜单的实现原理,一般android侧滑的实现原理和步骤如下:(源码下载在下面最后给出哈) 1.使用ViewGrou ...

  9. mysql数据库时间、字符串类型互转

    时间格式转换: select DATE_FORMAT(NOW(),"%y-%m-%d %H:%i:%s") 字符串转时间: select STR_TO_DATE("201 ...

  10. JS设置打印页面并调用本地打印机打印页面

    <script type="text/javascript"> var hkey_key; var hkey_root = "HKEY_CURRENT_USE ...