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 ...
随机推荐
- HDU 2364 (记忆化BFS搜索)
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=2364 题目大意:走迷宫.从某个方向进入某点,优先走左或是右.如果左右都走不通,再考虑向前.绝对不能往 ...
- Java之美[从菜鸟到高手演变]之HashMap、HashTable(转载)
http://blog.csdn.net/zhangerqing/article/details/8193118
- HDU 4614 Vases and Flowers(线段树+二分)
题目链接 比赛的时候一直想用树状数组,但是树状数组区间更新之后,功能有局限性.线段树中的lz标记很强大,这个题的题意也挺纠结的. k = 1时,从a开始,插b个花,输出第一个插的位置,最后一个的位置, ...
- 【应用笔记】【AN003】VC++环境下基于以太网的4-20mA电流采集
简介 4-20mA电流环具有广泛的应用前景,在许多行业中都发挥着重要作用.本文主要介绍了以太网接口的4-20mA电流采集模块在VC++环境下进行温度采集,实现WINDOWS平台对数据的采集.分析及显示 ...
- 使用Eclipse自带Web Service插件(Axis1.4)生成Web Service服务端/客户端
创建一个名字为math的Java web工程,并将WSDL文件拷入该工程中 将Axis所需的jar包拷贝至WebRoot\WEB-INF\lib目录下,这些jar包会自动导入math工程中 一,生成W ...
- [办公应用]我的WORD文档表格操作不灵活 无法调整列宽
最近同事的一个word文档中的表格操作非常不灵活,用鼠标直接调整列宽时总觉得很不灵活.她的操作系统为XP,office 为微软office 2003. 我首先检查了木马,检查了输入法等,结果都没有问题 ...
- spring mvc返回json字符串数据，只需要返回一个java bean对象就行，只要这个java bean 对象实现了序列化serializeable
1.spring mvc返回json数据,只需要返回一个java bean对象就行,只要这个java bean 对象实现了序列化serializeable 2. @RequestMapping(val ...
- Linux 静态IP动态IP设置
1.设置动态IP ifconfig eth0 192.168.1.12 设置后立即生效,重启机器后就无效了 2.设置静态IP 编辑文件 /etc/sysconfig/network-scripts/i ...
- 解决电脑访问Discuz!手机版（支持触屏版）
discuz电脑访问手机版的方法现在需要来修改一下2个文件,即可用电脑浏览discuz的手机版本:找到./source/function/function_core.php 文件,查找 : funct ...
- ThinkPHP公共配置文件与各自项目中配置文件组合的方法
ThinkPHP公共配置文件与各自项目中配置文件组合的方法 文章TAG:thinkphp 公共配置文件 时间:2014-11-25来源:www.aspku.com 作者:源码库 文章热度: 146 ℃ ...