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 ...
随机推荐
- BZOJ 1067 & Interval_Tree
1067: [SCOI2007]降雨量 Time Limit: 1 Sec Memory Limit: 162 MB Submit: 3099 Solved: 800 Description 我们常常 ...
- NSMutableArray 存放BOOL
注意BOOL是不能直接存放在NSMutableArray中的 NSNumber* yesObj = [NSNumber numberWithBool:YES]; NSMutableArray* arr ...
- SecureCrt脚本（二）二级对象之Dialog
Crt自动化 测试 SecureCrt脚本 JS脚本 1.引言 2.Dialog属性和方法 2.1.属性 2.2.方法 2.2.1.FileOpenDialog 2.2.2.MessageBox ...
- FlyCaptureProperty 摄像机属性
An enumeration of the different camera properties that can be set via the API. Declaration enum FlyC ...
- php100 的下拉分页效果
<?php function _PAGEFT($totle, $displaypg = 20, $url = '') { global $page, $firstcount, $pagenav, ...
- hdu A计划
这道题是一道bfs的题目,因为题目中给的数据很小,所以可以采用优先队列的方式来简化处理.这道题在搜索的过程中要注意map1的不同层次的转换,即对'#'的理解.之前wa了两次是因为我考虑了如果上下两层对 ...
- web应用防火墙 – 安全伞18.5.1免费版本发布
“Safe3 Web Application Firewall"是国内安全组织保护伞网络基于新一代Web安全技术开发的全方位企业Web信息安全产品.能有效扫描各种WebShell,同时也可以 ...
- FZU 2195 思维
很无聊的背景故事...求最短的时间原来就是省去了检查员最后上山的时间...还让不让人回家了... 感觉这是个最短路 思想是求出来dis 然后求里面最大的那条边 用总长减去最长边 就是答案 写了一个小时 ...
- Apache Spark源码走读之19 -- standalone cluster模式下资源的申请与释放
欢迎转载,转载请注明出处,徽沪一郎. 概要 本文主要讲述在standalone cluster部署模式下,Spark Application在整个运行期间,资源(主要是cpu core和内存)的申请与 ...
- PHP 防止表单重复提交
原理是:首先在表单页生成一个 随机不重复的 token(可以利用时间戳),把 token 的值分别存入 session 和 表单的隐藏域:当提交表单的时候,在接收页对比传递过来的 token 和ses ...