Javascript 注册事件浅析

首先是最常规的方法：

test

function test(){
alert("test");
}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

当某一天，我们知道JavaScript要跟HTML结构实现分离后，就会改了一种写法：

test

function test(){
alert("test");
}
window.onload = function(){
document.getElementById("para").onclick = test;
}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

当我们工作越来越久后，有时候我们需要对某个元素绑定多个相同的事件类型：

test

function test(){
alert("test");
}

function pig(){
alert("pig");
}

window.onload = function(){
document.getElementById("para").onclick = test;
document.getElementById("para").onclick = pig;
}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

如果按照上面的写法，我们只能输出第二个函数。
这时候我们需要用到attachEvent方法：

test

function test(){
alert("test");
}

function pig(){
alert("pig");
}

window.onload = function(){
document.getElementById("para").attachEvent("onclick",test);
document.getElementById("para").attachEvent("onclick",pig);
}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

在一段时间内，你并没发现这段代码有任何错误。
某一天，一个名叫firefox的浏览器 闯入你的视野，当我们把这段代码放到firefox中执行后，
发现并不能正常运行。 问题就这样，越来越多，然而作为一名JS程序员，这些都是必须面对的。

为了解决这段代码的平台兼容性问题，我翻翻手册，知道了firefox跟ie的区别：
firefox中注册事件使用：addEventListener方法，同时为了兼容ie，我们必须用到if ... else...

test

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);
}
}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

此时，代码就可以在多个平台上工作了。

但随着水平的进步，你不满足每次都去判断，你想把这个判断封装起来，以后可以直接调用：

test

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);
}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

至此，作为一个程序员的工作就完了。
中间我们从一个最传统，最基本的写法 ， 然后实现Js和HTML的分离，然后又实现对同一个元素注册多个事件，期间，我们发现注册事件的兼容性问题。最后我们对注册事件的方法进行封装，方便以后使用。

好了，文章写到这里。希望大家有收获哦。。。

赞 (0)

相关推荐

  • JavaScript 注册事件代码

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

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

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

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

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

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

  • 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移除事件 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 注册事件浅析

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

  • javascript监听鼠标滚轮事件浅析

    我们都见到过这些效果,用鼠标滚轮实现某个表单内的数字增加减少操作,或者滚轮控制某个按钮的左右,上下滚动.这些都是通过js对鼠标滚轮的事件监听来实现的.今天这里介绍的是一点简单的js对于鼠标滚轮事件的监听. 不同浏览器不同的事件 首先,不同的浏览器有不同的滚轮事件.主要是有两种,onmousewheel(firefox不支持)和DOMMouseScroll(只有firefox支持),关于这两个事件这里不做详述,想要了解的朋友请移步:鼠标滚轮(mousewheel)和DOMMouseScroll事件

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

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

  • Jquery注册事件实现方法

    本文实例讲述了Jquery注册事件实现方法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head

  • JavaScript为事件句柄绑定监听函数实例详解

    本文实例讲述了JavaScript为事件句柄绑定监听函数的方法.分享给大家供大家参考,具体如下: 在JavaScript中为Dom元素绑定事件监听函数是一件非常常见的事情,但这里也有许多的Bug.各种浏览器对于事件绑定都提供了很多方法,但可靠的只有3中: 1.传统的绑定方法: elem.onclick = function( event ){ alert(event.type + 'this.innerHTML'); }; a.传统的绑定方法,非常简单稳定,函数体内的this指向的也是指向正在处

  • javascript相关事件的几个概念

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

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

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

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

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

  • Javascript 浏览器事件小结

    Javascript 浏览器事件小结

    事件本身相当直观,常用的有: 事件 描述 abort 图片被阻止而不能加载 blur,focus 失去焦点,获得焦点 change 适用于表单元素,当元素使其焦点的时候判断是否发生改变 click,dblclick 单击,双击 keydown,keyup,keypress 按下键,键离开,按下键的时候触发,注意keypress只对数字字母键有效 load 加载图片或者页面的时候 mousedown,mouseup 按下键,放开键 mouseover,mouseout over是当鼠标进入的时候出

随机推荐