JS事件分析
1.注册事件
1.1 使用HTML元素的事件属性
<div id='myDiv' style="width:100px;height:100px;background-color:red" onclick="clickHandler()"
onmouseover="javascript:mouseOverHandler()">
</div>
1.2 给元素对象添加事件属性---DOM0形式
<div id='myDiv' style="width:100px;height:100px;background-color:red"></div>
<script>
function clickHandler(){
console.log("click handler"); //"click handler"
console.log(arguments.length); //0
console.log(event.type);
}
var myDiv = document.getElementById('myDiv');
myDiv.onclick = clickHandler;
</script>
1.3 使用script标签的for和event属性(仅IE支持)
<div id='myDiv' style="width:100px;height:100px;background-color:red"></div>
<script for="myDiv" event="onclick">
alert("clicked in IE")
</script>
1.4 attachEventh和detachEvent(仅 lt IE 11支持)---DOM2形式
<div id='myDiv' style="width:100px;height:100px;background-color:red"></div>
<script>
var myDiv = document.getElementById("myDiv");
myDiv.attachEvent("onclick",function(){alert("clicked in ie")});
</script>
在IE 11中:对象不支持“attachEvent”属性或方法
1.5 addEventListener和removeEventListener(gte IE 9支持，chrome支持，ff支持)---DOM2形式
<div id='myDiv' style="width:100px;height:100px;background-color:red"></div>
<script>
var myDiv = document.getElementById("myDiv");
myDiv.addEventListener("click",function(){alert("clicked")});
</script>
在addEventListener中，第二个参数可以是函数也可以一个对象，要求该对象必须有handleEvent方法属性
<div id='myDiv' style="width:100px;height:100px;background-color:red"></div>
<input type="button" value="remove" onclick="removeListener()" />
<script>
var myDiv = document.getElementById("myDiv");
var obj = {
name:"handle",
handleEvent:function(){
alert("clicked");
}
}
myDiv.addEventListener("click",obj);
function removeListener(){
myDiv.removeEventListener("click",obj);
}
</script>
2.this的指向
2.1 使用HTML事件属性
this指代绑定监听器的HTML元素
<div id='myDiv' style="width:100px;height:100px;background-color:red" onclick="console.log(this)">
<div id="d1" style="width:40px;height:40px;background-color:blue"></div>
</div>
this指向myDiv
2.2 给元素对象添加事件属性
this指向绑定监听器的HTML元素
<div id='myDiv' style="width:100px;height:100px;background-color:red">
<div id="d1" style="width:40px;height:40px;background-color:blue"></div>
</div>
<script type="text/javascript">
function clickHandler(){
console.log(this);
}
var myDiv = document.getElementById("myDiv");
myDiv.onclick = clickHandler;
</script>
this指向myDiv
2.3 使用script标签的for和event
this指代绑定监听器的HTML元素
<div id='myDiv' style="width:100px;height:100px;background-color:red">
<div id="d1" style="width:40px;height:40px;background-color:blue"></div>
</div>
<script for="myDiv" event="onclick">
console.log(this);
</script>
this指向myDiv
2.4 使用attachEvent和detachEvent
this指向window对象
<div id='myDiv' style="width:100px;height:100px;background-color:red">
<div id="d1" style="width:40px;height:40px;background-color:blue"></div>
</div>
<script type="text/javascript">
function clickHandler(){
console.log(this == window);
}
var myDiv = document.getElementById("myDiv");
myDiv.attachEvent("onclick",clickHandler);
</script>
打印结果:true
2.5 使用addEventListener和removeEventListener
this指代绑定监听器的HTML元素
<div id='myDiv' style="width:100px;height:100px;background-color:red">
<div id="d1" style="width:40px;height:40px;background-color:blue"></div>
</div>
<script type="text/javascript">
function clickHandler(){
console.log(this);
}
var myDiv = document.getElementById("myDiv");
myDiv.addEventListener("click",clickHandler);
</script>
3.事件对象Event
IE各个版本会将Event对象绑定到window中，在需要使用Event对象时，只需window.event;
在使用DOM0方法注册事件时:
gte IE 9的版本会将Event对象作为参数传递到处理函数中
在使用attachEvent方法注册事件时:
IE的各个版本Event对象作为参数传递到处理函数中
firefox会将Event对象作为参数传递到处理函数中
chrome:两种都有
<div id='myDiv' style="width:100px;height:100px;background-color:red" >
<div id="d1" style="width:40px;height:40px;background-color:blue"></div>
</div>
<script type="text/javascript">
function clickHandler(ev){
console.log(ev);
}
var myDiv = document.getElementById("myDiv");
myDiv.onclick = clickHandler;
</script>
4.事件对象的属性和方法
4.1 cancleBubble:是否取消冒泡
4.1.1该属性在IE的各个版本都支持
<div id='myDiv' style="width:100px;height:100px;background-color:red" >
<div id="d1" style="width:40px;height:40px;background-color:blue"></div>
</div>
<script type="text/javascript">
function parentCliked(ev){
console.log("parent clicked");
var ev = ev ? ev : window.event;
}
function childClicked1(ev){
console.log("child clicked1");
var ev = ev ? ev : window.event;
ev.cancelBubble = true;
}
function childClicked2(ev){
console.log("child clicked2");
var ev = ev ? ev : window.event;
}
var myDiv = document.getElementById("myDiv");
var d1 = document.getElementById('d1');
myDiv.onclick = parentCliked;
d1.attachEvent("onclick",childClicked2);
d1.attachEvent("onclick",childClicked1);
</script>
IE中打印:
child clicked1
child clicked2
注意:添加监听器的顺序
4.1.2 chrome和firefox的高版本也支持
<div id='myDiv' style="width:100px;height:100px;background-color:red" >
<div id="d1" style="width:40px;height:40px;background-color:blue"></div>
</div>
<script type="text/javascript">
function parentCliked(ev){
console.log("parent clicked");
var ev = ev ? ev : window.event;
}
function childClicked1(ev){
console.log("child clicked1");
var ev = ev ? ev : window.event;
ev.cancelBubble = true;
}
function childClicked2(ev){
console.log("child clicked2");
var ev = ev ? ev : window.event;
}
var myDiv = document.getElementById("myDiv");
var d1 = document.getElementById('d1');
myDiv.onclick = parentCliked;
d1.addEventListener("click",childClicked1);
d1.addEventListener("click",childClicked2);
</script>
打印出:
child clicked1
child clicked2
4.2 stopPropagation():取消冒泡
bubbles:返回boolean值，判断当前事件能否冒泡(只读)
只有使用addEventListener方法添加的监听器，该属性才有效(即使在IE 中)
<div id='myDiv' style="width:100px;height:100px;background-color:red" >
<div id="d1" style="width:40px;height:40px;background-color:blue"></div>
</div>
<script type="text/javascript">
function parentCliked(ev){
console.log("parent clicked");
var ev = ev ? ev : window.event;
}
function childClicked1(ev){
console.log("child clicked1");
var ev = ev ? ev : window.event;
ev.stopPropagation();
}
function childClicked2(ev){
console.log("child clicked2");
var ev = ev ? ev : window.event;
}
var myDiv = document.getElementById("myDiv");
var d1 = document.getElementById('d1');
myDiv.onclick = parentCliked;
d1.addEventListener("click",childClicked1);
d1.addEventListener("click",childClicked2);
</script>
打印出:
child clicked1
child clicked2
4.3 stopImmediatePropagation():取消冒泡，监测该事件的其他监听器都停止工作
只有使用addEventListener方法添加的监听器，该属性才有效
<div id='myDiv' style="width:100px;height:100px;background-color:red" >
<div id="d1" style="width:40px;height:40px;background-color:blue"></div>
</div>
<script type="text/javascript">
function parentCliked(ev){
console.log("parent clicked");
var ev = ev ? ev : window.event;
}
function childClicked1(ev){
console.log("child clicked1");
var ev = ev ? ev : window.event;
ev.stopImmediatePropagation();
}
function childClicked2(ev){
console.log("child clicked2");
var ev = ev ? ev : window.event;
}
var myDiv = document.getElementById("myDiv");
var d1 = document.getElementById('d1');
myDiv.onclick = parentCliked;
d1.addEventListener("click",childClicked1);
d1.addEventListener("click",childClicked2);
</script>
打印出:
child clicked1
4.4 cancelable和preventDefault();
preventDefault()方法阻止默认行为
cancelable:返回boolean值，判断能否阻止默认行为(只读)
只有使用addEventListener方法添加的监听器，该属性才有效
<a id="aa" href="#">click here</a>
<script>
var link = document.getElementById("aa");
link.addEventListener("onclick",clickHandler);
function clickHandler(ev){
var ev = ev ? ev : window.event;
ev.preventDefault();
}
</script>
cancelable是只读的
<a id="aa" href="http://www.baidu.com/">click here</a>
<script>
var link = document.getElementById("aa");
link.addEventListener("click",clickHandler);
function clickHandler(ev){
var ev = ev ? ev : window.event;
console.log(ev.cancelable);//true
ev.cancelable = false;
ev.preventDefault();
console.log(ev.cancelable);//true
}
</script>
即使设置了cancelable=true,仍然能阻止默认行为
4.5 returnValue:是否取消默认行为，设置为false则取消默认行为 是IE浏览器特有的属性
<a id="aa" href="#">click here</a>
<script>
var link = document.getElementById("aa");
link.attachEvent("onclick",clickHandler);
function clickHandler(ev){
var ev = ev ? ev : window.event;
ev.returnValue = false;
}
</script>
<a id="aa" href="http://www.baidu.com">click here</a>
<script>
var link = document.getElementById("aa");
link.attachEvent("onclick",clickHandler);
function clickHandler(ev){
ev.returnValue = false;
}
</script>
IE中:
当使用attachEvent注册监听器时，可以使用参数ev或者window.event来设置returnValue;
当使用addEventListener注册监听器时
IE 9,10 window.event.returnValue = false;或者ev.preventDefault();
IE 11 ev.preventDefault()或者window.event.preventDefault();
当使用obj.onclick = clickHandler形式时
IE 9，10，11支持参数传递，但是参数ev对象中没有returnValue属性，通过ev参数来设置行不通
IE 5~10 可以使用window.event.returnValue = false来阻止默认行为
IE 11: window.event没有returnValue属性，设置失败
综上:
IE 浏览器 5，6，7，8，9，10都能使用attachEvent来注册监听，使用此方法生成的Event对象是具有IE 特性的对象，里面包含了cancelBubble,returnValue等IE标志
IE 11废弃了对attachEvent的支持
IE 9,10,11实现了对addEventListener的支持，该方法生成的Event对象是符合DOM标准的
IE 9,10 的ev对象是DOM标准对象，window.event是IE 私有对象
IE 11的ev对象和window.event都是DOM标准对象
DOM标准对象中没有IE 私有属性
4.6 srcElement、target、currentTarget
srcElement只在IE浏览器中存在，不管以addEventListener还是attachEvent
它指向触发事件的元素，而不是绑定事件的元素
currentTarget和target:只有使用addEventListener方法添加的监听器，该属性才有效。
4.7 relatedTarget、fromElement、toElement
发生mouseover和mouseout事件时，还会涉及更多的元素。这两个事件都会涉及把鼠标指针从一个元素的边界之内移到另一个元素边界之内。对mouseover事件而言，事件的主目标是获得光标的元素，而相关元素就是那个失去光标的元素。类似地，对mouseout事件而言，事件的主目标是失去光标的元素，而相关元素则是获得光标的元素。
DOM通过event对象的relatedTarget属性提供了相关元素的信息。这个属性只对于mouseover和mouseout事件才包含值；对于其他事件，这个属性的值是null。IE不支持realtedTarget属性，但提供了保存着同样信息的不同属性。在mouseover事件触发时，IE的fromElement属性中保存了相关元素；在mouseout事件出发时，IE的toElement属性中保存着相关元素。
兼容性写法:
if(event.relatedTarget)
{
return event.relatedTarget;
}else if(event.fromElement)
{
return event.fromeElement;
}else if(event.toElement)
{
return event.toElement;
}else{
return null;
}
5.事件处理函数的执行顺序
5.1
<div id='myDiv' style="width:100px;height:100px;background-color:red" onClick="alert('1')" onClick="alert('2')">
</div>
弹出1
5.2
var myDiv = document.getElementById("myDiv");
myDiv.onclick = function(){
alert('1');
}
myDiv.onclick = function(){
alert('2');
}
弹出2
5.3
<div id='myDiv' style="width:100px;height:100px;background-color:red" onclick="alert('3')">
</div>
<script type="text/javascript">
var myDiv = document.getElementById("myDiv");
myDiv.onclick = function(){
alert('1');
}
myDiv.onclick = function(){
alert('2');
}
</script>
弹出2
5.4
<div id='myDiv' style="width:100px;height:100px;background-color:red" onclick="alert('3')">
</div>
<script type="text/javascript">
var myDiv = document.getElementById("myDiv");
/*myDiv.onclick = function(){
alert('1');
}
myDiv.onclick = function(){
alert('2');
}*/
myDiv.addEventListener("click",function(){
alert("1")
});
</script>
弹出3,1
5.5
<div id='myDiv' style="width:100px;height:100px;background-color:red" onclick="alert('3')">
</div>
<script type="text/javascript">
var myDiv = document.getElementById("myDiv");
/*myDiv.onclick = function(){
alert('1');
}
myDiv.onclick = function(){
alert('2');
}*/
myDiv.addEventListener("click",function(){
alert("1")
});
myDiv.addEventListener("click",function(){
alert("2")
});
</script>
弹出3,1,2
5.6
<div id='myDiv' style="width:100px;height:100px;background-color:red" onclick="alert('3')">
</div>
<script type="text/javascript">
var myDiv = document.getElementById("myDiv");
/*myDiv.onclick = function(){
alert('1');
}
myDiv.onclick = function(){
alert('2');
}*/
myDiv.attachEvent("onclick",function(){
alert("1")
});
myDiv.attachEvent("onclick",function(){
alert("2")
});
</script>
lt IE 9----->3,2,1
gte IE 9----> 3,1,2
5.7
<div id='myDiv' style="width:100px;height:100px;background-color:red" onclick="alert('3')">
</div>
<script type="text/javascript">
var myDiv = document.getElementById("myDiv");
myDiv.onclick = function(){
alert('1');
}
myDiv.onclick = function(){
alert('2');
}
myDiv.attachEvent("onclick",function(){
alert("4")
});
myDiv.attachEvent("onclick",function(){
alert("5")
});
</script>
或者
<div id='myDiv' style="width:100px;height:100px;background-color:red" onclick="alert('3')">
</div>
<script type="text/javascript">
var myDiv = document.getElementById("myDiv");
myDiv.onclick = function(){
alert('1');
}
myDiv.onclick = function(){
alert('2');
}
myDiv.addEventListener("click",function(){
alert("4")
});
myDiv.addEventListener("click",function(){
alert("5")
});
</script>
弹出2,4,5(IE 9以下是2,5,4)
综上:
1.仅仅使用HTML属性添加事件处理函数时，只有第一个添加的有效，见5.1
2.使用DOM0添加的事件处理函数，后添加的覆盖前面添加的，而且覆盖通过HTML属性添加的，见5.2,5.3
3.使用DOM2添加的事件处理函数，不会覆盖任何其他事件处理函数
4.使用addEventListener添加的事件处理函数的执行顺序，按照添加的先后顺序执行
5.使用attachEvent添加的事件处理函数的执行顺序，在 <IE 9时，是倒序执行，>= IE9之后和addEventListener的执行顺序一样
JS事件分析的更多相关文章
- js事件监听器用法实例详解
这篇文章主要介绍了js事件监听器用法,以实例形式较为详细的分析了javascript事件监听器使用注意事项与相关技巧,需要的朋友可以参考下本文实例讲述了js事件监听器用法.分享给大家供大家参考.具体分 ...
- js事件监听器用法实例详解-注册与注销监听封装
本文实例讲述了js事件监听器用法.分享给大家供大家参考.具体分析如下: 1.当同一个对象使用.onclick的写法触发多个方法的时候,后一个方法会把前一个方法覆盖掉,也就是说,在对象的onclick事 ...
- 理解js事件冒泡事件委托事件捕获
js事件冒泡 javascript的事件传播过程中,当事件在一个元素上出发之后,事件会逐级传播给先辈元素,直到document为止,有的浏览器可能到window为止,这就是事件冒泡现象. <di ...
- dynamic-css 动态 CSS 库，使得你可以借助 MVVM 模式动态生成和更新 css，从 js 事件和 css 选择器的苦海中脱离出来
dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化 ...
- 什么是JS事件冒泡？
什么是JS事件冒泡?: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理 程序或者事件返回true,那么 ...
- js事件技巧方法整合
window.resizeTo(800,600); //js设置浏览器窗口尺寸 window.open (function(){ resizeTo(640,480);//设置浏览器窗口尺寸 moveT ...
- js事件浅析
js中关于DOM的操作很多,因此js事件机制也就尤为重要. 事件绑定形式: 一. 内联形式 耦合度高,不利于维护 <button onclick="alert('你点击了这个按钮'); ...
- js 事件大全
Js事件大全一般事件 事件 浏览器支持 描述onClick IE3|N2|O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击onDblClick IE4|N4|O 鼠标双击事件onMouseDo ...
- 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别
一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...
随机推荐
- POJ 1651 (区间DP)
题目链接: http://poj.org/problem?id=1651 题目大意:加分取牌.如果一张牌左右有牌则可以取出,分数为左牌*中牌*右牌.这样最后肯定还剩2张牌.求一个取牌顺序,使得加分最少 ...
- 【BZOJ】1069: [SCOI2007]最大土地面积（凸包+旋转卡壳）
http://www.lydsy.com/JudgeOnline/problem.php?id=1069 显然这四个点在凸包上,然后枚举两个点找上下最大的三角形即可. 找三角形表示只想到三分QAQ.. ...
- 开学后，板刷usaco！
我要开权限我要开权限我要开权限我要开权限我要开权限我要开权限我要开权限我要开权限 他们刷rank的太可恶了 没有usaco银组金组分类的oj太可恶了 没有usaco翻译的太可恶了 没有usaco数据的 ...
- 【POJ】2104 K-th Number（区间k大+主席树）
http://poj.org/problem?id=2104 裸题不说.主席树水过. #include <cstdio> #include <iostream> #includ ...
- More about dubbo
一.前言 dubbo 作为分布式服务框架支持丰富的配置和扩展方式,其中包括:通讯协议.并发控制.多版本服务.结果缓存.泛化引用\实现.回声测试.上下文信息.事件通知.路由规则(可用于实现读写分离)等多 ...
- Java线程之CompletionService
转自:http://blog.csdn.net/andycpp/article/details/8902699 当使用ExecutorService启动了多个Callable后,每个Callable会 ...
- php 魔鬼训练
环境配置 找到自己的[系统命令行]目录:bin /usr/bin #mac系统 /bin #ubuntu系统 再找到Php的编译器,这个根据你的安装路径来判断,mac默认的路径如下 cd /usr/b ...
- Ctrl+Shift+F12切换最大化编辑器
常用快捷键(keymaps:Default情况下) Esc键编辑器(从工具窗口) F1帮助千万别按,很卡! F2(Shift+F2)下/上高亮错误或警告快速定位 F3向下查找关键字出现位置 F4查找变 ...
- 如何"格式化"用过的磁带,让他被新磁带机重复利用
1. 2. 套用翁磊的话: 勾上表示和之前的磁带信息进行协商(但是会失败), 不勾则表示强行擦除.
- HDU 5521 Meeting（虚拟节点+最短路）
Meeting Time Limit: 12000/6000 MS (Java/Others) Memory Limit: 262144/262144 K (Java/Others) Total ...