JS事件监听 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

From: http://blog.163.com/[email protected]/blog/static/288964142010755811775/

时间: 2024-10-24 00:50:59

JS事件监听 JS:attachEvent和addEventListener 使用方法的相关文章

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

在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒泡,没有事件监听的机制,对于事件监听的兼容性问题是最大的难题: 1.直接把事件的方法写在页面结构上 function eventfun(){ //console.log(this); } <input type="button" onclick="eventfun()&qu

js事件监听-addEventListener (w3c标准) 和 attachEvent(ie)

研究了一个小时,没看懂这两个属性 window.onload = function(){ var oDiv = document.getElementById("J_myDiv"); //找到对象 oDiv.onclick = function(){ //设置事件监听函数 alert("click"); }} 缺点:1.添加单一事件 2.不能删除事件 第二:IE中监听函数 var oDiv; function fnClick(){ alert("click

js 事件监听封装

var eventUtil={//添加句柄 //element,节点 //type,事件类型 //handler,函数 addHandler:function(element,type,handler){  if(element.addEventListener){   element.addEventListener(type,handler,false);   }else if(elemnt.attachEvent){//对ie进行判断   element.attachEvent('on'+

js事件监听简介

1.什么是事件监听? 就是让计算机监视一个事件是否发生. 2.事件和事件处理程序 事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字.响应某个事件的函数就叫事件处理程序(也叫事件处理函数.事件句柄).事件处理程序的名字以"on"开头,因此click事件的事件处理程序就是onclick,load事件的事件处理程序就是onload. 总之,事件就是一个动作瞬间,如鼠标点击,事件处理程序是一个过程,处理事件发生时的函数的函数. 3.事件监听器 监听

js事件监听

通过添加事件监听进一步实现业务处理.可以对同一个元素添加相同的事件监听,执行会从上到下的原则,也可以添加多个事件监听针对同一元素. 针对元素监听: document.getElementById("idName").addEventListener("eventType",functionName);//注意:前面不加on 如click事件 针对window对象监听: window.addEventListener(“resize”,function(){ aler

JS事件监听手机屏幕触摸事件 Touch

JS移动客户端--触屏滑动事件 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件能跟踪到屏幕滑动的每根手指. 以下是四种touch事件 touchstart:     //手指放到屏幕上时触发 touchmove:      //手指在屏幕上滑动式触发 touchend:    //手指离开屏幕时触发 touchcancel:     //系统取

js 事件监听

addEventListener() 方法 element.addEventListener(event, function, useCapture); 第一个参数是事件的类型 (如 "click" 或 "mousedown"). 第二个参数是事件触发后调用的函数. 第三个参数是个布尔值用于描述事件是冒泡还是捕获.该参数是可选的. 注意:不要使用 "on" 前缀. 例如,使用 "click" ,而不是使用 "oncl

JS事件监听的添加方法

一. 我们一般在的事件添加时是这样做的: elm.onclick = function( ) { //handler } 这样的写法兼容主流的浏览器,但是存在一个问题,当同一个elm绑定多个事件时,只有最后一个事件会被添加 如:elm.onclick = handler1; elm.onclick = handler2; elm.onclick = hander3; 只有handler3会被添加执行,所以我们使用另外一种方法添加事件: 二. IE:attachEvent elm.attachEv

js事件监听的兼容写法

1 addEvent:function(el,type,fn,capture) { 2 if (window.addEventListener) { 3 if (type === "mousewheel" && document.mozHidden !== undefined) { 4 type = "DOMMouseScroll"; 5 } 6 el.addEventListener(type, fn, !!capture); 7 } else i