JavaScript 注册事件代码

首先是最常规的方法：
程序代码


代码如下:

<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的分离，然后又实现对同一个元素注册多个事件，期间，我们发现注册事件的兼容性问题。最后我们对注册事件的方法进行封装，方便以后使用。

赞 (0)

相关推荐

  • Javascript 注册事件浅析

    首先是最常规的方法: test function test(){ alert("test"); } [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 当某一天,我们知道JavaScript要跟HTML结构实现分离后,就会改了一种写法: test function test(){ alert("test"); } window.onload = function(){ document.getElementById("para").onc

  • 关于js注册事件的常用方法

    不解释,看代码: 复制代码 代码如下: ;(function(){    //进行库封装,防止对象污染    window['cm']={};/**    *给对象注册事件    */    var addListener=function(element,type,fn){        if(typeof element == 'undefined') return false;        if(element.addEventListener){            element.

  • js移除事件 js绑定事件实例应用

    复制代码 代码如下: /** * @description 事件绑定,兼容各浏览器 * @param target 事件触发对象 * @param type 事件 * @param func 事件处理函数 */ function addEvents(target, type, func) { if (target.addEventListener) //非ie 和ie9 target.addEventListener(type, func, false); else if (target.att

  • javascript中注册和移除事件的4种方式

    对于html中的一些元素注册事件的方式有多种 第一种: 复制代码 代码如下: <script> function test() { alert("OK"); } </script> <a href="#" onclick="test()">测试</a> 第二种: 复制代码 代码如下: <a href="#" id="a">测试</a>

  • JS给元素注册事件的代码

    麦鸡的TAB body{margin:40px; font-size:12px;} p{font-size:200%} .macji-tab a{color:#777; text-decoration:none;} .macji-tab ul.macji-nav{ position:relative; height:24px; margin:0 0 -1px; padding:0; list-style:none; overflow:hidden; } .macji-tab ul.macji-n

  • JS注册/移除事件处理程序(ExtJS应用程序设计实战)

    JS注册/移除事件处理程序(ExtJS应用程序设计实战)

    在设计ExtJS应用程序时最常做的事情就是注册事件处理程序,因为在ExtJS的世界里,几乎完全由时间组成.因此,ExtJS的设计者使注册事件变得非常容易(同时还提供了非常不容易的方式任你选择)--on/un,也就是上与下两种方式,或是addListener与removeListener,Element的所有子类都可以使用.例如有一个<div/>希望在用户按下时能够给予简单的反馈: <divid="happyDiv"class="happyStyle"

  • JavaScript 注册事件代码

    首先是最常规的方法: 程序代码 复制代码 代码如下: <p id="para" title="cssrain demo!" onclick="test()" >test</p> <script> function test(){ alert("test"); } </script> 当某一天,我们知道JavaScript要跟HTML结构实现分离后,就会改了一种写法: 程序代码 复

  • 关于javaScript注册click事件传递参数的不成功问题

    最近这半年作为一个java 程序员,我写的javaScript代码都快比java代码多了,前段时间是给某银行做一个柜员管控系统,在柜员授权这一块功能上,由于柜员的授权需要考虑各方面的因素,比如机构权限.柜员类型权限.岗位权限,业务权限等等,并且要对这些权限要做多次的交集或者并集处理,页面上不得不用许多的javascript来进行控制.造成了这一功能模块的实现上javaScript代码比java代码负责的情况. 而现在又要给某银行开发一个保管箱管理系统,其核心功能块保管箱座管理以及保管箱管理,为实

  • javascript 动态添加事件代码

    方法一.setAttribute var obj = document.getElementById("obj"); obj.setAttribute("onclick", "javascript:alert('测试');"); 这里利用 setAttribute 指定 onclick 属性,简单,很好理解, 但是:IE 不支持,IE 并不是不支持 setAttribute 这个函数,而是不支持用 setAttribute 设置某些属性,包括对象

  • JavaScript之事件委托实例(附原生js和jQuery代码)

    事件委托的原理依赖于事件冒泡,可以通过给父元素的事件委托来确定是哪个子元素触发了事件从而做一系列操作. 使用事件委托的优点 1.操作子元素时不用一一遍历,可以根据事件触发的对象而进行相应操作 dom结构如下: <ul id = "oUl"> <li class = "item"></li> <li class = "item"></li> <li class = "ite

  • JavaScript监听触摸事件代码实例

    这篇文章主要介绍了JavaScript监听触摸事件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 监听 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, use

  • javascript相关事件的几个概念

    客户端javascript程序采用了异步事件驱动编程模型. 相关事件的几个概念: 事件类型(event type):用来说明发生什么类型事件的字符串: 事件目标(event target):发生事件的对象: 事件处理程序(event handler):处理或响应事件的函数: 事件对象(event object):与特定事件相关且包含有关该事件详细信息的对象: 事件传播(event propagation):浏览器决定哪个对象出发其事件处理程序的过程: 注册事件处理程序: 1.设置javascri

  • ASP.NET 前台javascript与后台代码调用

    ASP.NET中前台javascript与后台代码调用 1如何在JavaScript访问C#函数? 2.如何在JavaScript访问C#变量? 3.如何在C#中访问JavaScript的已有变量? 4.如何在C#中访问JavaScript函数? 问题1答案如下: javaScript函数中执行C#代码中的函数: 方法一:1.首先建立一个按钮,在后台将调用或处理的内容写入button_click中; 2.在前台写一个js函数,内容为document.getElementById("btn1&qu

  • JavaScript Event事件学习第一章 Event介绍

    没有event就没有脚本.可以看看任何有JavaScript代码的网页:几乎所有的例子都有一个事件触发了脚本.原因非常简单.JavaScript就是给你的页面添加内部活动:用户做一些事情然后页面做出回应. 因此JavaScript就需要一个方法能够检测到用户的动作然后才能知道什么时候做出反应.这还需要知道那个函数会被执行,函数会做一些你认为的给你的网页增色的动作.这些文字描述了如何去写这样的脚本.虽然不容易,但是这是一个很让人满足的工作. 当用户做了什么事情event就发生了,当然还有一些eve

  • 多次注册事件会导致一个事件被触发多次的解决方法

    一个JavaScript逻辑,会自动绑定函数到按钮的click事件,但是这段代码会反复注册事件.这样依赖onNext函数会在点击一次按钮的时候多次触发. 这是JQuery内部没有判断是否绑定多次,怀疑其内部用了数组保存事件函数,而且没有去重. 下面的代码预防了这个问题.解决方案很简单. 复制代码 代码如下: if (!this.hasPageBarEvents) { $(".pNext").on("click", this, this.onNext); this.h

随机推荐