js事件监听,捕获及冒泡

一，监听相关：

1.绑定HTML元素属性：

2.绑定DOM

document.getElementById("xxx").onclick

3.IE中的监听方法：

[object].attachEvent("事件类型","处理函数");//添加监听
[object].detachEvent("事件类型","处理函数");//取消监听

如：

window.onload=function(){//当整个HTML文档加载好之后就会触发onload事件
   document.getElementById("test1").attachEvent("onclick",show);//给第一个按钮注册了onclick事件
       document.getElementById("test2").onclick=function(){//解除第一个按钮的onclick事件
       document.getElementById("test1").detachEvent("onclick",show);
   }
};

4.标准DOM中的事件监听方法：

[object].addEvent("事件类型","处理函数","冒泡事件或捕获事件");
[object].removeEvent("事件类型","处理函数","冒泡事件或捕获事件");

addEventListener()方法特点：

element.addEventListener(event, function, useCapture)中的第三个参数可以控制指定事件是否在捕获或冒泡阶段执行。true - 事件句柄在捕获阶段执行。false- 默认- 事件句柄在冒泡阶段执行。
addEventListener() 可以给同一个元素绑定多个事件，不会发生覆盖的情况。如果给同一个元素绑定多个事件，那么采用先绑定先执行的规则。
addEventListener() 在绑定事件的时候，事件名称之前不需带 on 。
注意该方法的兼容性，如果要兼容 IE6-8 ，不能使用该方法。下面三会有介绍。
可以使用 removeEventListener() 来移除之前绑定过的事件。

<!DOCTYPE html>
<html lang="en">
　　<head>
　　　　<meta charset="utf-8">
　　　　<title>DOM事件监听</title>

　　</head>
　　<body>
　　　　<input type="button" id="test1" value="测试1">
　　　　<button type="button" id="test2"><b>测试2</b></button>

　　　　<script type="text/javascript">
　　　　　　function show(){
　　　　　　　　alert("hello");
　　　　　　}

　　</body>
</html>

参考：https://www.jianshu.com/p/2c2d0b8f210f

二，工具集：

// event(事件)工具集，来源：github.com/markyun
    markyun.Event = { // 页面加载完成后 readyEvent : function(fn) { if (fn==null) { fn=document; } var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = fn; } else { window.onload = function() { oldonload(); fn(); }; } }, // 视能力分别使用dom0||dom2||IE方式 来绑定事件 // 参数： 操作的元素,事件名称 ,事件处理程序 addEvent : function(element, type, handler) { if (element.addEventListener) { //事件类型、需要执行的函数、是否捕捉 element.addEventListener(type, handler, false); } else if (element.attachEvent) { element.attachEvent('on' + type, function() { handler.call(element); }); } else { element['on' + type] = handler; } }, // 移除事件 removeEvent : function(element, type, handler) { if (element.removeEventListener) { element.removeEventListener(type, handler, false); } else if (element.datachEvent) { element.detachEvent('on' + type, handler); } else { element['on' + type] = null; } }, // 阻止事件 (主要是事件冒泡，因为IE不支持事件捕获) stopPropagation : function(ev) { if (ev.stopPropagation) { ev.stopPropagation(); } else { ev.cancelBubble = true; } }, // 取消事件的默认行为 preventDefault : function(event) { if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; } }, // 获取事件目标 getTarget : function(event) { return event.target || event.srcElement; }, // 获取event对象的引用，取到事件的所有信息，确保随时能使用event； getEvent : function(e) { var ev = e || window.event; if (!ev) { var c = this.getEvent.caller; while (c) { ev = c.arguments[0]; if (ev && Event == ev.constructor) { break; } c = c.caller; } } return ev; } };

三，on和addEventListener的使用与不同

1.on事件会被后面的on的事件覆盖

以onclick为例：

//obj是一个dom对象，下同
//注册第一个点击事件
obj.onclick(function(){
alert("hello world");
});
//注册第二个点击事件
obj.onclick(function(){
alert("hello world too");
});

最终会只有弹框输出：

hello world too

2.addEventListener 则不会覆盖

//注册第一个点击事件
obj.addEventListener("click",function(){
alert("hello world");
}));
//注册第二个点击事件
obj.addEventListener("click",function(){
alert("hello world too");
}));

这样会连续输出：

hello world

hello world too

addEventListener注意事项：

1.特别说明addEventListener不被 IE9以下兼容，IE9以下用使用 attachEvent()

obj.attachEvent(event,funtionName);

参数：

event:事件类型（需要写成“onclick”前面加on，这个与addEventListener不同）

funtionName:方法名（要参数是也是需要使用匿名函数来传参）

四.事件集合：

1.鼠标事件：

click(单击)
dbclick(双击)
mousedown(鼠标按下)
mouseout(鼠标移走)
mouseover(鼠标移入)
mouseup(鼠标弹起)
mousemove(鼠标移动)

2.键盘事件：

keydown(键按下)
keypress(按键)
keyup(键起来)

3.HTML事件：

load（加载页面）
unload（卸载离开页面）
change（改变内容）
scroll（滚动）
focus（获得焦点）
blur（失去焦点）

参考：http://www.cnblogs.com/Ry-yuan/p/6865632.html

js事件监听,捕获及冒泡

猜你喜欢