下面这些客户端 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. input输入框默认文字，点击消失

    <input type="text" value="请输入用户名" onfocus="if(value=='请输入用户名') {value='' ...

  2. 理解 MEF

    1.它解决什么问题? 考虑下面的需求,甲程序员对外暴露接口,内部提供实现.乙程序员使用甲提供的接口,根据面向接口编程的原则,乙关联一个接口类型的引用.正常情况下,乙要使用甲的实现,必须实例化一个具体对 ...

  3. java带图片的邮件发送方法实现

    package sendEmail; import java.util.Properties; import javax.activation.DataHandler; import javax.ac ...

  4. [HTTP] Origins, CROS, Preflight

    Origins made up of three parts the data scheme, the hostname and the prot. It is important to know t ...

  5. sharepoint 2013 更改搜索server组态

    1.新搜索server在.安装sharepoint server 2013,并连接到一个现有的sharepoint server领域,完成后.您可以配置新的搜索server. 打开sharepoint ...

  6. lsb_release 提示命令不存在

    1. 报错信息 bash: lsb_release: command not found 2. 问题原因 未安装 lsb_release 命令 3. 解决方法 用 yum 命令安装 lsb_relea ...

  7. 利用C语言强行点击置灰的按钮

    通常很多情况下,会有这样的事情,就是: 我们在运行某些程序的时候,发现按钮置灰了,比如购买版权或者输入序列号才能够获得访问权限.某个按钮才允许点击. 其实所有的这些东西都是 别的人或者公司利用一些编程 ...

  8. Java并发——使用Condition线程间通信

    线程间通信 线程之间除了同步互斥,还要考虑通信.在Java5之前我们的通信方式为:wait 和 notify.Condition的优势是支持多路等待,即可以定义多个Condition,每个condit ...

  9. eclipse上传显示svn上传者名

    这里来记录下eclipse上传显示svn上传者名. 如图所示,修改即可.

  10. Nullable类型和HashSet<T>集合

    今天接触到两个新的类型,查了一下才发现它们已经出现好久了,特作一下标记 Nullable结构 在System命名空间下,在 .NET Framework 2.0 版中是新增的:用它定义的值类型的对象与 ...