首页 > 代码库 > JS事件
JS事件
1.注册事件
1.1 使用HTML元素的事件属性
<div id=‘myDiv‘ style="width:100px;height:100px;background-color:red" onclick="clickHandler()" onm ouseover="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方法添加的监听器，该属性才有效
<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>
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>
4.5 returnValue:是否取消默认行为，设置为false则取消默认行为
<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>
returnValue是IE浏览器特有的属性
<a id="aa" href="#">click here</a> <script> var link = document.getElementById("aa"); link.addEventListener("click",clickHandler); function clickHandler(ev){ var ev = ev ? ev : window.event; window.event.returnValue = false; } </script>
只能用window.event来访问
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; }
JS事件