js 中用Dom2级事件处理函数(改变样式)

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

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8 <script>
 9     //dom2级事件语法是 addEvenLisetener("event","执行函数内容")
10     window.onload = function(){    //设置当页面加载时执行
11         var btn =document.getElementsByTagName("button") //获取btn元素
12         for( var i = 0;i<btn.length;i++){   //把每个button元素便利出来
13             var button = btn[i]
14             if(button.addEventListener){    //判断游览器的兼容问题,如果是ie8以下的用的是else语用代码段里的
15                 button.addEventListener("click",change)
16             }
17            else{
18                 button.attachEvent("onclick",change)
19             }
20
21         }
22     }
23         function change(e){        //执行函数内容
24             e.target.style.color ="red"     //着重解释一下e.target什么意思  ,e代表事件, target代表元素,合起来就是事件元素指的就是被监听到的事件目标变样式
25             e.target.style.background ="black"
26         }
27 </script>
28 <button>按钮一</button>
29 <button>按钮二</button>
30 <button>按钮三</button>
31 <button>按钮四</button>
32 <button>按钮五</button>
33 </body>
34 </html>
时间: 2024-10-15 08:38:11

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

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

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 3 <head> 4 &l

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

转自:http://www.cnblogs.com/holyson/p/3914406.html 0级DOM 分为2个:一是在标签内写onclick事件  二是在JS写onlicke=function(){}函数 1) <input id="myButton" type="button" value="Press Me" onclick="alert('thanks');" > 2) document.getEle

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

今天总结一个关于事件处理程序的小细节.首先回顾一下事件处理的一些概念. JS中的事件处理(事件绑定)就是让某种或某些事件触发某些活动.有两种常见的形式,分别是DOM Level 0 和DOM Level 2.这两种方式最大的区别就在于DOM 0级事件处理只能用于事件冒泡,而DOM 2级事件处理却可以通过设置第三个参数来分别支持事件冒泡和事件捕获. DOM 0级事件处理一般是直接把一个函数分配给一个事件处理程序,既可以在元素中直接分配一个事件处理程序,如方式一所示;也可以在脚本中把函数分配给事件处

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

DOM2级事件中addEventListener的执行机制,多个addEventListener同时添加时的执行先后规律: W3C的DOM事件触发分为三个阶段:①.事件捕获阶段,即由最顶层元素(一般是从window元素开始,有的浏览器是从document开始,至于其中的差别我稍后会更新)开始,逐次进入dom内部,最后到达目标元素,依次执行绑定在其上的事件②.处于目标阶段,检测机制到达目标元素,按事件注册顺序执行绑定在目标元素上的事件.③.事件冒泡阶段,从目标元素出发,向外层元素冒泡,最后到达顶层

DOM0级与DOM2级的区别

1.DOM0级和DOM2级的共同优点: 能添加多个事件处理程序,按顺序执行,HTML事件处理程序无法做到~ 2.关于dom0级和dom2级的区别 DOM0级事件处理:同时绑定几个不同的事件,例如在绑定onclick的基础上再绑定一个onmouseover为按钮2设置背景颜色(这里注意不能onclick.onmouseover事件都设为alert弹出哦,可能有冲突,dom0和dom2都不能成功):但是不能同时绑定多个相同的事件,比如onclick:会覆盖,只会执行最后一个的函数: DOM2级事件处

公共事件处理函数js库

var EventUtil = { /* *添加事件处理 参数:元素对象 事件类型 处理函数 */ addHandle: function (element, type, handle) { //dom2级的事件添加 if (element.addEventListener) { element.addEventListener(type, handle, false); } else { //IE 的事件添加 if (element.attachEvent) { element.attachE

JS:Html事件处理程序 vs DOM0级事件处理程序 vs DOM2级事件处理程序

1.HTML事件处理程序 某个元素支持的某种事件,可以通过一个与相应事件处理程序同名的HTML特性指定.这个特性的值应该是能够执行的JS代码.例如:按钮单击是要执行一些js代码,可以像下面: <input type="button" value="click me" onclick="showMessage()" /> 在js中就可以像下面一样处理: <script> function showMessage(){ ale

JS事件处理函数中return false到底是什么东西

在<JS DOM编程艺术>一书中,用return false来阻止事件默认行为,可是js高程3里没有这种用法,那这到底是什么呢. 先看一下知乎的一个解释 就此问题,首先要纠正两个观点: 1. 事件处理方法中 的 return false 并不是终止事件,而是阻止事件宿主的默认行为: 2. 不是在所有的事件处理方法中 return fasle 都能阻止事件宿主的默认行为: 事实上,仅仅是在HTML事件属性 和 DOM0级事件处理方法中 才能通过返回 return false 的形式组织事件宿主的

浅谈Js中关于事件处理函数执行顺序的问题

Js给dom元素绑定事件的处理函数总的来说有两种方式:在html文档中绑定,在js代码中绑定. 然而,并不推荐在html标签上绑定事件. 在js代码中也可以分两种方式绑定事件: 1:通过dom元素的onclick等属性,直接绑定: 2: a.在ie下使用attachEvent/detachEvent函数的方式进行事件的绑定和取消: b.使用W3C标准的addEventListener和removeEventListener,给dom添加事件监听者和移除. 第一种方式只能绑定一个事件处理函数,后面