`
ajax_xu
  • 浏览: 156053 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

JS 事件注册

阅读更多
<!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>  
    <title>JS</title>  
</head>  
<body>  
    <input id="para" type="text" />  
   <script type="text/javascript">  
function test(){  
  alert("test");  
}  
  
function pig(){  
  alert("pig");  
}  
  
window.onload = function(){  
         var element =  document.getElementById("para");  
         if(element.addEventListener){  // firefox  , w3c  
                element.addEventListener("focus",test,false);  
    element.addEventListener("focus",pig,false);  
         } else {   // ie  
    element.attachEvent("onfocus",test);  
    element.attachEvent("onfocus",pig);  
         }  
}  
</script>  
</body>  
  
</html>  


****************实例结束**************************



JS:attachEvent和addEventListener 使用方法
attachEvent与addEventListener区别
适应的浏览器版本不同,同时在使用的过程中要注意
attachEvent方法          按钮onclick
addEventListener方法    按钮click

两者使用的原理:可对执行的优先级不一样,下面实例讲解如下:
attachEvent方法,为某一事件附加其它的处理事件。(不支持Mozilla系列)

addEventListener方法 用于 Mozilla系列

举例:
Js代码 
document.getElementById("btn").onclick = method1;  
document.getElementById("btn").onclick = method2;  
document.getElementById("btn").onclick = method3;
如果这样写,那么将会只有medhot3被执行 

写成这样:
Js代码 
var btn1Obj = document.getElementById("btn1"); //object.attachEvent(event,function);  
btn1Obj.attachEvent("onclick",method1);  
btn1Obj.attachEvent("onclick",method2);  
btn1Obj.attachEvent("onclick",method3);
执行顺序为method3->method2->method1 

如果是Mozilla系列,并不支持该方法,需要用到addEventListener var btn1Obj = document.getElementById("btn1");
//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);执行顺序为method1->method2->method3

使用实例:
Js代码 
1。 var el = EDITFORM_DOCUMENT.body;   
//先取得对象,EDITFORM_DOCUMENT实为一个iframe  
if (el.addEventListener){  
el.addEventListener('click', KindDisableMenu, false);  
} else if (el.attachEvent){  
el.attachEvent('onclick', KindDisableMenu);  
}2。 if (window.addEventListener) {  
window.addEventListener('load', _uCO, false);  
} else if (window.attachEvent) {  
window.attachEvent('onload', _uCO);  
}   


detachEvent和removeEventListener 
Js代码  
detachEvent('onclick',func);//ie下使用删除事件func  
removeEventListener('click',func);//Mozilla下,删除事件func  

分享到:
评论

相关推荐

    JavaScript程序设计——事件处理实验报告.docx

    - **JavaScript事件注册**:通过`addEventListener`或`attachEvent`(IE浏览器)为元素添加事件监听器,也可以使用HTML属性直接绑定事件处理函数,如`onclick="functionName()"`。 - **事件处理函数**:定义函数来...

    EventDispatcher,js事件派发器,javascript事件派发器

    在标题提到的"EventDispatcher, js事件派发器, javascript事件派发器"中,我们可以理解这是一个JavaScript实现的事件派发器,可能是作者的原创工作。用户可以通过GitHub上的问题跟踪系统(Issue)报告任何发现的错误...

    js事件监听机制(事件捕获)总结

    JavaScript事件监听机制是前端开发中极其重要的一环,它允许开发者对用户行为(如点击、按键、鼠标移动等)作出响应。事件监听涉及的几个核心概念包括事件传播的两种方式:事件捕获和事件冒泡,以及兼容性问题和事件...

    js的注册代码

    6. **jQuery库**:`jquery.js`是一个流行的JavaScript库,它简化了DOM操作、事件处理和AJAX请求。在`jquery.corner.js`中,可能是使用jQuery实现了圆角效果,使UI更加美观。 7. `jVal.js`可能包含了具体的验证逻辑...

    javascript事件详解

    JavaScript事件详解 JavaScript是一种基于浏览器的脚本语言,它的事件机制是实现动态交互的重要部分。在JavaScript中,事件是用户或浏览器对网页进行操作时触发的特定动作,比如点击按钮、鼠标移动等。本文将详细...

    js事件模型

    然而,有时我们可能需要为同一个事件注册多个处理函数。在默认情况下,如果为同一个事件分配了多个函数,后面的函数会覆盖前面的函数。解决这个问题的一种方法是合并所有函数到一个单一的事件处理函数中,但这限制了...

    js jquery 手机 邮箱注册

    在这个场景中,"js jquery 手机 邮箱注册" 涉及到前端交互的重要环节,主要包括JavaScript(JS)和jQuery库的使用,以及手机和邮箱验证功能的实现。下面我们将深入探讨这些关键知识点。 首先,JavaScript是Web开发...

    js闭包引起的事件注册问题介绍

    总结来说,JavaScript中的闭包在事件注册中可能会引发问题,因为它们可以访问并保持对外部变量的引用。为了避免这类问题,我们需要理解作用域和闭包的工作原理,并适当地创建局部作用域来隔离变量。了解这些概念对于...

    HTML+CSS+JavaScript实现登录注册源码

    总的来说,这个压缩包提供了HTML、CSS和JavaScript结合的实例,帮助开发者了解如何创建具有完整功能的登录注册页面。通过学习和分析这些源码,你可以掌握前端开发的基本技巧,包括页面布局、样式设计以及用户交互的...

    分析js闭包引起的事件注册问题

    标题中提到的“js闭包”和“事件注册问题”是两个核心概念。闭包是JavaScript中的一个高级特性,指的是函数能够记住并访问所在词法作用域,即使函数是在当前词法作用域之外执行。事件注册问题则是指在JavaScript中...

    表单的验证js以及事件的注册代码详解教程共25页.pdf

    本教程“表单的验证js以及事件的注册代码详解教程共25页.pdf”详细介绍了如何利用JavaScript进行表单验证和事件注册,虽然无法在此提供25页的具体内容,但我可以提炼出关键知识点,帮助你理解这一主题。 1. **表单...

    html+css+js实现登录注册界面.rar

    在这个"html+css+js实现登录注册界面.rar"压缩包中,包含的六个案例详细展示了如何运用这些技术来创建一个完整的登录注册界面,这对于个人博客、管理系统或购物网站来说是非常基础且重要的部分。 首先,HTML...

    js验证\注册页面

    JS(JavaScript)验证主要用于前端对用户输入数据进行初步检查,确保用户提交的数据格式正确且符合预期的要求,如邮箱格式、密码强度等。这种即时反馈可以提升用户体验,避免因无效或错误的输入导致服务器端的不必要...

    JS滚轮事件

    JS滚轮事件 JS滚轮事件是指在浏览器中滚动滚轮时触发的事件,以便实现滚动缩放、列表滚动、地图缩放等功能。滚轮事件可以极大地提高用户体验,但是不同的浏览器对滚轮事件的支持却不尽相同。 事件名称的不同 在...

    js用户注册认证

    在JavaScript(JS)中,用户注册认证是网页应用中至关重要的一步,它涉及到用户数据的安全性和用户体验。这个压缩包文件的标题"js用户注册认证"表明它包含了一套使用JavaScript实现的用户注册验证机制,主要依赖于...

    vue20的touch事件原生事件注册无依赖体积小1K

    标题中的"vue20的touch事件原生事件注册无依赖体积小1K"意味着我们将讨论一个专注于在Vue 2.0中使用触摸事件的方法,该方法不仅直接利用了JavaScript的原生事件,而且实现了轻量化,整个插件或解决方案的体积小于1KB...

    js事件广播实现数据传递

    ### js事件广播实现数据传递 在JavaScript开发中,事件机制是一种非常重要的编程模式,它可以用于在不同的组件或模块之间进行通信。特别是在复杂的前端应用中,合理利用事件机制能够有效地提高代码的可维护性和扩展...

    注册登录验证js

    这个"注册登录验证js"的主题涵盖了多个重要的知识点,包括但不限于以下内容: 1. **表单验证**:表单是网页中收集用户信息的主要方式。在用户提交表单前,前端JavaScript通常会进行初步验证,如检查邮箱格式、密码...

    js事件机制 .pdf

    ### JavaScript事件机制详解 #### 一、引言 在学习编程语言的过程中,"事件"这一概念往往是初学者遇到的一个难点,然而它又是编程中极为重要的一个组成部分。在JavaScript中,事件处理更是不可或缺的一部分,它是...

Global site tag (gtag.js) - Google Analytics