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 ...
随机推荐
- WIN7启动WIFI
启动虚拟无线AP netsh wlan set hostednetwork mode=allow ssid=WIFI_NAME key="abcdefgh" netsh wlan ...
- [Cocos2d-x For WP8]Hello world
[Cocos2d-x For WP8]Hello world Cocos2d-x For WP8使用C++开发,使用cocos2d-xv0.13同样的接口,Cocos2d-x For WP8的相关项目 ...
- Mysql_mysql force Index 强制索引
其他强制操作,优先操作如下: mysql常用的hint 对于经常使用oracle的朋友可能知道,oracle的hint功能种类很多,对于优化sql语句提供了很多方法.同样,在mysql里,也有类似的h ...
- C# 使用 GetOleDbSchemaTable 检索架构信息(表、列、主键等)
本文演示如何用 ADO.NET 中 OleDbConnection 对象的 GetOleDbSchemaTable 方法检索数据库架构信息.数据源中的架构信息包括数据库或可通过数据库中的数据源.表和视 ...
- Word 2010 给公式添加序号
在写paper的时候,我们常常要给公式编号,难道我们要在公式和最右边的序号之间疯狂按空格键吗,当然不是,我们可以有更高效的方法来完成. 首先我们插入一个1x3的表格,然后调节首尾两个格子的大小,借助标 ...
- hdu I NEED A OFFER!
这道题是道很基本的0/1背包的问题,为了使解题很简单一点,可以将题目中要求的最大概率转换成不能录取的最小概率,这样1-dp[n]即为至少有一个offer的最大概率.状态方程 为:dp[j]=min{d ...
- mac mysql环境配置
安装mysql:http://www.mysql.com/downloads/ 找到 MySQL Community Edition (GPL) Community (GPL) Downloads » ...
- Html - 返回Top
制作浮动top $(window).scroll( function() { var scrollValue=$(window).scrollTop(); scrollValue > 600 ? ...
- Tesseract 对验证码的识别原理和实现步骤
一. Steps: 学习图片库--->处理图片(初步处理)--->校正.学习图片 二. Tesseract: 1. 采集图片库(一般每个出现的字符出现20次左右识别效果比较好),根据图片特 ...
- JavaScript 数组详解（转）
在程序语言中数组的重要性不言而喻,JavaScript中数组也是最常使用的对象之一,数组是值的有序集合,由于弱类型的原因,JavaScript中数组十分灵活.强大,不像是Java等强类型高级语言数组只 ...