旅游开发 网站建设,ps网页设计作品欣赏,如何快速自己做网站,建设通怎么样click,load,mouseover都是事件的名字#xff0c;而响应某个事件的函数就叫做事件处理程序#xff08;或事件侦听器#xff09;。事件处理程序的名字以on开头#xff0c;onclick,onload 事件处理程序#xff08;html事件处理程序#xff0c;dom0级事件处理程序#xff0c… click,load,mouseover都是事件的名字而响应某个事件的函数就叫做事件处理程序或事件侦听器。事件处理程序的名字以on开头onclick,onload 事件处理程序html事件处理程序dom0级事件处理程序dom2级事件处理程序ie事件处理程序跨浏览器事件处理程序 html事件处理程序 1、内置js input typebutton valueclick me onclickalert(clicked)/ 当点击这个按钮时就会显示一个警示框注意:不能在其中使用未经转义的html语法字符 例如双引号小于号,大于号()。 input typebutton valueclick me onclickalert(clicked)/ 2、函数调用 script typetext/javascriptfunction showMessage(){alert(Hello world);}
/script
input typebutton valueclick me οnclickshowMessage()/ 事件处理程序中的代码在执行时有权访问全局作用域中的任何代码 3、其他 input typebutton valueclick me onclickalert(value)/input typebutton valueclick me onclickalert(this.value)/ this值等于事件的目标元素 input typebutton valueclick me onclickalert(event.type)/ 通过event变量可以直接访问事件对象不用自己定义它 form action postpostinput typetext valueclick me nameusername/input typebutton valueclick me onclickalert(username.value)/
/form 扩展作用域让事件处理程序无需引用表单元素就能访问其他表单字段 html事件处理程序的缺点1、如果用户在html元素一出现在页面上就触发相应的事件但当时的事件处理程序有可能尚不具备执行条件。2、这样扩展事件处理程序的作用域链在不同浏览器中会导致不同的结果不同js引擎遵循的标识符解析规则略有差异很可能会在访问非限定对象成员时出错。3、html与js代码紧密耦合。如果要更换事件处理程序就要改动两个地方html代码和js代码。 DOM0级事件处理程序 通过js指定事件处理程序的传统方式就是将一个函数赋值给一个事件处理程序属性。eg: scriptvar btn document.getElementById(myBtn);btn.onclickfunction(){alert(clicked);}
/script
input typebutton valueclick me idmyBtn/ 使用dom0级方法指定的事件处理程序被认为是元素的方法。因此这时候的事件处理程序是在元素的作用域中运行换句话说程序中通过this引用当前元素 var btn document.getElementById(myBtn);
btn.onclickfunction(){alert(this.id);
} 在事件处理程序中通过this访问元素的任何属性和方法。以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理 btn.onclick null;//删除事件处理程序 将事件处理程序设置为null后再单击按钮将不会有任何动作发生 DOM2级事件处理程序 var btn document.getElementById(myBtn);
btn.addEventListener(click,function(){alert(this.id);
},false) DOM2级事件定义了两个方法用于处理指定和删除事件处理程序的操作addEventListener()和removeEventListener()所有dom都包含这两个方法并且它们都接受3个参数要处理的事件名作为事件处理程序的函数一个布尔值(true表示捕获阶段调用事件处理程序false表示冒泡阶段调用事件处理程序)特点1、与dom0级一样这里添加的事件处理程序依附在作用域中运行要先加载dom再加载js2、可以添加多个事件处理程序 var btn document.getElementById(myBtn);
btn.addEventListener(click,function(){alert(this.id);
},false)
btn.addEventListener(click,function(){alert(Hello world);
},false) 3、通过addEventListener()添加的事件处理程序只能使用removeEventListener()移除移除时传入的参数与添加处理程序时的参数相同这也意味着addEventListener()添加的匿名函数将无法移除 var btn document.getElementById(myBtn);
btn.addEventListener(click,function(){alert(this.id);
},false)//省略其它代码btn.removeEventListener(click,function(){ //没有用alert(this.id);
},false) 看似使用了相同的参数实际上第二个参数与传入的那个时完全不同的函数 var btn document.getElementById(myBtn);
var handler function(){alert(this.tid)
}
btn.addEventListener(click,handler,false)//省略其它代码btn.removeEventListener(click,handler,false);//有效 IE事件处理程序 IE实现了与DOM中类似的两个方法attachEvent()和detachEvent()。这两个方法接受相同的两个参数事件处理程序名称与事件处理程序函数由于IE8及更早版本支持事件冒泡所以通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段 var btn document.getElementById(myBtn);
btn.attachEvent(onclick,function(){alert(Clicked); alert(this window); //true
})
btn.attachEvent(onclick,function(){alert(Hello World);
}) 注意1、dom0在其所属元素的作用域内运行使用attachEvent()方法的情况下事件处理程序会在全局作用中运行,this等于window如果在编写跨浏览器的代码时牢记这一区别非常重要2、与addEventListener类似可以为一个元素添加多个事件处理程序3、与dom不同的是这些事件处理程序不是以添加它们的顺序执行而是以相反的顺序被触发单机这个例子首先会看到hello world然后才是clicked4、使用attachEvent()添加的事件可以通过detachEvent()来移除条件是必须提供相同的参数。与DOM方法一样这也意味着添加的匿名函数将不能被移除 var btn document.getElementById(myBtn);
var handler function(){alert(Clicked);
}
btn.attachEvent(onclick,handler);
//这里省略了其他代码
btn.detachEvent(onclick,handler); 跨浏览器的事件处理程序 要保证处理事件的代码能在大多数浏览器下一致运行只需关注冒泡阶段。第一个要创建的方法是addHandler()它的职责视情况分别使用dom0级方法、dom2级方法或ie方法来添加事件 var EventUtil {addHandler:function(element,type,handler){if(element.addEventListener){element.addEventListener(type,handler,false);}else if(element.attachEvent){element.attachEvent(ontype,handler)}else{element[ontype] handler;}},removeHandler:function(element,type,handler){if(element.removeEventListener){element.removeEventListener(type,handler,false);}else if(element.detachEvent){element.detachEvent(ontype,handler);}else{element[ontype] null;}}
} 转载于:https://www.cnblogs.com/wzndkj/p/7907048.html
