(转载)JS事件监听 JS:attachEvent和addEventListener使用方法
attachEvent和addEventListener使用方法
Js代码
<html>
<head>
<title>JS</title>
</head> <body>
<input id="para" type="text"/>
<script>
function test()
{
alert("test");
}
function pig()
{
alert("pig");
} window.onload = function()
{
var element = document.getElementById("para");
if (element.addEventListener)
{
element.addEventListener("focus", test, false);
element.addEventListener("focus", pig, false);
}
else
{
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被执行
写成这样:
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
(转载)JS事件监听 JS:attachEvent和addEventListener使用方法的更多相关文章
- JS事件监听 JS:attachEvent和addEventListener 使用方法
attachEvent与addEventListener区别适应的浏览器版本不同,同时在使用的过程中要注意attachEvent方法 按钮onclickaddEventListene ...
- js 事件监听 兼容浏览器
js 事件监听 兼容浏览器 ie 用 attachEvent w3c(firefox/chrome) 用 addEventListener 删除事件监听 ie 用 detachEven ...
- js事件监听机制(事件捕获)总结
在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒 ...
- js事件监听机制(事件捕获)
在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒 ...
- js 事件监听 冒泡事件
js 事件监听 冒泡事件 的取消 [自己写框架时,才有可能用到] <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitiona ...
- js事件监听-addEventListener (w3c标准) 和 attachEvent(ie)
研究了一个小时,没看懂这两个属性 window.onload = function(){ var oDiv = document.getElementById("J_myDiv") ...
- js 事件监听封装
var eventUtil={//添加句柄 //element,节点 //type,事件类型 //handler,函数 addHandler:function(element,type,handler ...
- js事件监听
/* 事件监听器 addEventListener() removeEventListener() 传统事件绑定: 1.重复添加会,后添加的后覆盖前面的. */ 示例代码中的html结构: <b ...
- Js事件监听封装(支持匿名函数)
先看demo:http://liutian1937.github.io/demo/EventListen.html/*绑定事件与取消绑定*/ var handleHash = {}; var bind ...
随机推荐
- (一)JAVA使用POI操作excel
1,Poi 简介 Apache POI 是用Java编写的免费开源的跨平台的 Java API,Apache POI提供API给Java程式对Microsoft Office格式档案读和写的功能 PO ...
- UVA 11462 Age Sort(计数排序法 优化输入输出)
Age Sort You are given the ages (in years) of all people of a country with at least 1 year of age. Y ...
- 安装hadoop多节点 各种整理
ubuntu烧制usb启动盘链接: 点击打开链接https://help.ubuntu.com/community/Installation/FromUSBStick ubuntu磁盘分区: 点击打开 ...
- 常用js函数
1.获得元素到页面的绝对距离 function getPos(obj) { var pos = {left:0, top:0}; while (obj) { pos.left += obj.offse ...
- oracle创建表(并且实现ID自增)
CREATE TABLE STUDENT ( ID INT NOT NULL, NAME VARCHAR2(4000) NOT NULL, PRIMARY KEY(ID) ) TABLESPACE M ...
- javascript 事件流及应用
当页面元素触发事件的时候,该元素的容器以及整个页面都会按照特定顺序发生该元素的触发 事件,事件传播的顺序叫做事件流 1.事件流的分类: A.冒泡型事件(所有浏览器都支持) 由明确的事件源到最不确定 ...
- 如何彻底删除PPA软件库
添加一个PPA源 sudo add-apt-repository ppa:user/ppa-name 如添加cairo-dock到weekly update源 sudo add-apt-reposit ...
- openssl Mac编译小记
1. 下载openssl包 2. 解压 3. 打开控制台, 进入包目录, 执行 ./Configure darwin64-x86_64-cc 4. make 5. 得到 libcrypto.a lib ...
- (转载).Net HttpPost的发送和接收示例代码
HttpPost在不同系统进行数据交互的时候经常被使用.它的最大好处在于直接,不像Webservice或者WCF需要wsdl作为一个双方的"中介".在安全性上,往往通过IP限制的方 ...
- 实现js的类似alert效果的函数
这个简单的类似alert的函数,效果还行,至于css样式,那没的说了,笔者确实尽力了,如果读者觉得太烂,你可以随便改函数的样式的,反正,笔者觉得还可以,呵呵. <!DOCTYPE html PU ...