首先是最常规的方法:
<p id="para" title="cssrain demo!" onclick="test()" >test</p>
<script>
function test(){
alert("test");
}
</script>
当某一天,我们知道JavaScript要跟HTML结构实现分离后,就会改了一种写法:
<p id="para" title="cssrain demo!">test</p>
<script>
function test(){
alert("test");
}
window.onload = function(){
document.getElementById("para").onclick = test;
}
</script>
当我们工作越来越久后,有时候我们需要对某个元素绑定多个相同的事件类型:
<p id="para" title="cssrain demo!">test</p>
<script>
function test(){
alert("test");
}
function pig(){
alert("pig");
}
window.onload = function(){
document.getElementById("para").onclick = test;
document.getElementById("para").onclick = pig;
}
</script>
如果按照上面的写法,我们只能输出第二个函数。
这时候我们需要用到attachEvent方法:
<p id="para" title="cssrain demo!">test</p>
<script>
function test(){
alert("test");
}
function pig(){
alert("pig");
}
window.onload = function(){
document.getElementById("para").attachEvent("onclick",test);
document.getElementById("para").attachEvent("onclick",pig);
}
</script>
在一段时间内,你并没发现这段代码有任何错误。
某一天,一个名叫firefox的浏览器 闯入你的视野,当我们把这段代码放到firefox中执行后,
发现并不能正常运行。 问题就这样,越来越多,然而作为一名JS程序员,这些都是必须面对的。
为了解决这段代码的平台兼容性问题,我翻翻手册,知道了firefox跟ie的区别:
firefox中注册事件使用:addEventListener方法,同时为了兼容ie,我们必须用到if ... else...
<p id="para" title="cssrain demo!">test</p>
<script>
function test(){
alert("test");
}
function pig(){
alert("pig");
}
window.onload = function(){
var element = document.getElementById("para");
if(element.addEventListener){ // firefox , w3c
element.addEventListener("click",test,false);
element.addEventListener("click",pig,false);
} else { // ie
element.attachEvent("onclick",test);
element.attachEvent("onclick",pig);
}
}
</script>
此时,代码就可以在多个平台上工作了。
但随着水平的进步,你不满足每次都去判断,你想把这个判断封装起来,以后可以直接调用:
<p id="para" title="cssrain demo!">test</p>
<script>
function test(){
alert("test");
}
function pig(){
alert("pig");
}
function addListener(element,e,fn){
if(element.addEventListener){
element.addEventListener(e,fn,false);
} else {
element.attachEvent("on" + e,fn);
}
}
window.onload = function(){
var element = document.getElementById("para");
addListener(element,"click",test);
addListener(element,"click",pig);
}
</script>
至此,作为一个程序员的工作就完了。
中间我们从一个最传统,最基本的写法 , 然后实现Js和HTML的分离,然后又实现对同一个元素注册多个事件,期间,我们发现注册事件的兼容性问题。最后我们对注册事件的方法进行封装,方便以后使用。
好了,文章写到这里。希望大家有收获哦。。。
分享到:
相关推荐
主要以实例的方式向大家介绍了javascript注册事件处理函数,内容很全面,感兴趣的朋友可以参考一下
注册和删除事件;JavaScript的事件;JavaScript的事件;JavaScript的事件;JavaScript的事件;JavaScript的事件;JavaScript的事件; 事件对象;JavaScript的事件;JavaScript的事件;JavaScript的事件;JavaScript的事件;...
JavaScript事件驱动
1.实现JavaScript事件注册; 2.实现JavaScript事件处理函数; 3.实现JavaScript鼠标和键盘事件; 4.实现JavaScript表单相关事件; 5.实现JavaScript字幕滚动事件; 6.实现JavaScript编辑事件;
javascript注册事件的传统模式,javaScript放在html文档里面。
最基本的写法 ,然后实现Js和HTML的分离,然后又实现对同一个元素注册多个事件,期间,我们发现注册事件的兼容性问题。最后我们对注册事件的方法进行封装,方便以后使用。
事件(Event)是JavaScript应用跳动的心脏,也是把所有东西粘在一起的胶水,当我们与浏览器中Web页面进行某些类型的交互时,事件就发生了。 事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的...
javascript实现仿京东注册表单,能够实现表单验证,正则匹配,表单验证追踪,随机验证码生成,密码强弱校验等功能。
JavaScript给事件委托批量添加事件监听详细流程 1.什么是事件委托 事件委托:利用事件冒泡的特性,将本应该注册在子元素上的处理事件注册在父元素上,这样点击子元素时发现其本身没有相应事件就到父元素上寻找...
JavaScript中事件冒泡机制示例详析 DOM事件流(event flow )存在三个阶段:事件捕获阶段、 处于目标阶段、 事件冒泡阶段。 事件捕获(event capturing):通俗的理解就是,当鼠标点击或者触发dom事件时,...
10.3.2 注册事件处理程序 274 10.3.3 设置对象的事件处理程序 276 10.3.4 事件的模块和类型 276 10.3.5 Event接口和对象 278 10.4 IE事件模型 280 10.4.1 IE Event对象 280 10.4.2 IE的事件传播 281 10.5 常用事件 ...
10.3.2 注册事件处理程序 10.3.3 设置对象的事件处理程序 10.3.4 事件的模块和类型 10.3.5 Event接口和对象 10.4 IE事件模型 10.4.1 IEEvent对象 10.4.2 IE的事件传播 10.5 常用事件 10.5.1 鼠标...
1.基本控件的使用方法 2.对象的创建 3.正则表达式的运用 4.onerror 事件 5.JavaScript消息框 6.DOM对象的尝试运用
15.9.2 注册多个事件 15.9.3 删除事件 15.9.4 Microsoft Internet Explorer中的事件监听器 15.9.5 回顾事件属性 15.10 不唐突的JavaScript 15.11 应知应会 练习 第16章 ...
JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态功能,比如响应用户的各种操作。它最初由网景公司(Netscape)的...
JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态功能,比如响应用户的各种操作。它最初由网景公司(Netscape)的...
17.2 注册事件处理程序 17.3 事件处理程序的调用 17.4 文档加载事件 17.5 鼠标事件 17.6 鼠标滚轮事件 17.7 拖放事件 17.8 文本事件 17.9 键盘事件 第18章 脚本化HTTP 18.1 使用XMLHttpRequest 18.2 借助发送HTTP...