一般我们在JS中添加事件,是这样子的

removeEventListener(event,function,capture/bubble);

您可能感兴趣的文章:

  • JS鼠标事件大全 推荐收藏
  • js之事件冒泡和事件捕获详细介绍
  • js模拟点击事件实现代码
  • js实现touch移动触屏滑动事件
  • js 鼠标点击事件及其它捕获
  • js中获取事件对象的方法小结
  • 文本框中,回车键触发事件的js代码[多浏览器兼容]
  • JS判断文本框内容改变事件的简单实例
  • js事件监听机制(事件捕获)总结
  • javascript 鼠标事件总结
  • JS中动态添加事件(绑定事件)的代码
  • JavaScript事件用法浅析

事件冒泡或事件捕获?
事件传递有两种方式:冒泡与捕获。
事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到
<div> 元素中,用户点击 <p> 元素, 哪个元素的 “click”
事件先被触发呢?
在 冒泡 中,内部元素的事件会先被触发,然后再触发外部元素,即: <p>
元素的点击事件先触发,然后会触发 <div> 元素的点击事件。
在 捕获 中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即:
<div> 元素的点击事件先触发 ,然后再触发 <p>
元素的点击事件。
addEventListener() 方法可以指定 “useCapture” 参数来设置传递类型:

本文实例讲述了javascript中attachEvent用法。分享给大家供大家参考。具体分析如下:

IE中:

复制代码 代码如下:

var x = document.getElementById("myBtn");
if (x.addEventListener) {     // 所有主流浏览器,除了 IE 8 及更早版本
 x.addEventListener("click", myFunction);
} else if (x.attachEvent) {     // IE 8 及更早版本
 x.attachEvent("onclick", myFunction);
<!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>attachEvent</title>
<script type="text/javascript">
//第一种方式(微软的私人方法)
function iniEvent() {
  var btn = document.getElementById("btn");
  btn.attachEvent("onclick", click1);
  btn.attachEvent("onclick", click2);
  btn.attachEvent("onclick", click3);
}
//第二种方式(火狐和其他浏览器)
function iniEvent2() {
  var btn = document.getElementById("btn");
  btn.addEventListener("click", click1, false);
  btn.addEventListener("click", click2, false);
  btn.addEventListener("click", click3, false);
}
function click1() {
  alert('click1');
}
function click2() {
  alert('click2');
}
function click3() {
  alert('click3');
}
</script>
</head>
<body onload="iniEvent()">
<input type="button" id="btn" value="attachEvent" />
</body>
</html>

Mozilla中:

//IE以外
target.addEventListener(type,listener,useCapture)
target.removeEventListener(type,listener,useCapture);
target :文档节点、document、window 或 XMLHttpRequest。
type
:字符串,事件名称,不含“on”,比如“click”、“mouseover”、“keydown”等。
listener :实现了 EventListener 接口或者是 JavaScript 中的函数。
useCapture :是否使用捕捉,一般用 false。
//IE
target.attachEvent(type, listener);
target.detachEvent(type, listener);
target :文档节点、document、window 或 XMLHttpRequest。
type
:字符串,事件名称,含“on”,比如“onclick”、“onmouseover”、“onkeydown”等。
listener :实现了 EventListener 接口或者是 JavaScript 中的函数。
两者使用的原理:可对执行的优先级不一样,实例讲解如下:
ele.attachEvent(“onclick”,method1);
ele.attachEvent(“onclick”,method2);
ele.attachEvent(“onclick”,method3);
执行顺序为method3->method2->method1
ele.addEventListener(“click”,method1,false);
ele.addEventListener(“click”,method2,false);
ele.addEventListener(“click”,method3,false);
执行顺序为method1->method2->method3
兼容后的方法
var func = function(){};
//例:addEvent(window,”load”,func)
function addEvent(elem, type, fn) {
if (elem.attachEvent) {
elem.attachEvent(‘on’ + type, fn);
return;
}
if (elem.addEventListener) {
elem.addEventListener(type, fn, false);
}
}
//例:removeEvent(window,”load”,func)
function removeEvent(elem, type, fn) {
if (elem.detachEvent) {
elem.detachEvent(‘on’ + type, fn);
return;
}
if (elem.removeEventListener) {
elem.removeEventListener(type, fn, false);
}
}

element.addEventListener("click", function(){ myFunction(p1, p2); });

执行顺序为method1->method2->method3

Windows IE的格式如下:

当事件触发时body会先得到有事件发生的信息,然后依次往下传递,直到到达最详细的元素。这就是事件捕获阶段。
欧博国际网站,还记得事件注册方法ele.addEventListener(type,handler,flag)吧,Flag是一个Boolean值,true表示事件捕捉阶段执行,false表示事件冒泡阶段执行。
欧博国际平台,接着就是事件冒泡阶段。从下往上
依次执行事件处理函数(当然前提是当前元素为该事件注册了事件句柄)。
在这个过程中,可以阻止事件的冒泡,即停止向上的传递。
阻止冒泡有时是很有必要的,例如

document.getElementById("myBtn").addEventListener("click", displayDate);

可惜这个微软的私人方法,火狐和其他浏览器都不支持,幸运的是他们都支持W3C标准的addEventListener方法

addEventListener的使用方式:

复制代码 代码如下:

element.attachEvent(event, function);
element.detachEvent(event, function);

method3->method2->method1

W3C 及 IE 同时支持移除指定的事件, 用途是移除设定的事件, 格式分别如下:

**事件流

传递参数
当传递参数值时,使用”匿名函数”调用带参数的函数:
实例

btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);

detachEvent(event,function);

**DOM同时支持两种事件模型:捕获型事件和冒泡型事件
并且每当某一事件发生时,都会经过捕获阶段->处理阶段->冒泡阶段(有些浏览器不支持捕获)

element.removeEventListener("mousemove", myFunction);

使用格式是前面是事件类型,注意的是需要加on,比如onclick,onsubmit,onchange,执行顺序是

target: 文档节点、document、window 或 XMLHttpRequest。
type:
字符串,事件名称,不含“on”,比如“click”、“mouseover”、“keydown”等。
listener :实现了 EventListener 接口或者是 JavaScript 中的函数。
useCapture :是否使用捕捉,一般用 false
。例如:document.getElementById(“testText”).addEventListener(“keydown”,
function (event) { alert(event.keyCode); }, false);

取消事件默认行为(例如点击一个<a>后不跳转页面而是执行一个函数)

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

Author

发表评论

电子邮件地址不会被公开。 必填项已用*标注