JavaScript简单入门可以看看我丑丑的Github博客JavaScript简单入门
事件
JavaScript与HTML之间的交互是通过事件实现的。事件是文档或者浏览器窗口中发生的,特定的交互瞬间。
事件流
事件流描述的是从页面中接收事件的顺序。
事件传播的顺序对应浏览器的两种事件流模型:捕获型事件流和冒泡型事件流。
事件捕获
事件开始时是由较为不具体的节点接收,然后逐级向下传播到最具体的节点 。
事件冒泡
事件开始时是由最具体的节点接收,然后逐级向上传播到较为不具体的节点。
DOM事件流
“DOM2级事件”规定事件流包括三个阶段:
事件捕获阶段 --> 处于目标阶段 --> 事件冒泡阶段
● 事件捕获:事件发生时(onclick,onmouseover……)首先发生在document上,然后依次传递给body,最后到达目的节点(即事件目标)
● 事件冒泡:事件到达事件目标之后不会结束,会逐层向上冒泡,直至document对象,跟事件捕获相反
例如单击页面div
事件处理程序
事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字。响应某个事件的函数就叫事件处理程序(或事件侦听器)。事件处理程序的名字以"on"开头。
为事件指定事件处理程序的方法主要有3种。
html事件处理程序
事件直接加在DOM元素上。
//原生函数
<input type="button" value="click me!" onclick="alert('clicked!')" />
//自定义函数
<input onclick="myAlert()" type="button" value="click me!" />
<script type="text/javascript">
function myAlert(){
alert("谢谢支持");
}
</script>
DOM0级事件处理程序
把一个函数赋值给一个事件处理程序属性。
<input id="myBtn" type="button" value="click me!"/>
<script>
var myBtn=document.getElementById("myBtn");
myBtn.onclick=function(){
alert("clicked!");
}
</script>
DOM2级事件处理程序
DOM2级事件处理程序可以为一个元素添加多个事件处理程序。其定义了两个方法用于添加和删除事件处理程序:addEventListener()和removeEventListener()。
优点:
- 可以绑定多个事件。
- 可以解除相应的绑定
- addEventListener
elementObject.addEventListener(eventName,handle,useCapture); IE8及以下不支持,属于DOM2级的方法,可添加多个方法不被覆盖
- removeEventListener
通过addEventListener添加的事件处理程序必须通过removeEventListener删除,且参数一致。
<input id="myBtn" type="button" value="click me!"/>
<script>
var myBtn=document.getElementById("myBtn");
var handler=function(){
alert("hello");
}
myBtn.addEventListener("click",handler,false);
myBtn.removeEventListener("click",handler,false);
</script>
IE特有
- attachEvent
elemObject.attachEvent("eventName", functionReference); IE特有,兼容IE8及以下,可添加多个事件处理程序,只支持冒泡阶段
useCapture:(可选)指定事件是否在捕获或冒泡阶段执行。true,捕获。false,冒泡。默认false。
- detachEvent
通过attachEvent添加的事件处理程序必须通过detachEvent方法删除,且参数一致。
兼容写法示例
function addEvent(obj,type,handle){
try{
// Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
obj.addEventListener(type,handle,false);
}catch(e){
try{
// IE8.0及其以下版本
obj.attachEvent('on' + type,handle);
}catch(e){
// 早期浏览器
obj['on' + type] = handle;
}
}
}
取消事件
- 给对象的事件属性赋值为null,可取消此事件的所有注册过的处理事件程序。
document.body.onclick=null; //onclick属性赋值为null,相当于注销了onclick事件
- 阻止通过on这种方式绑定的事件的默认事件
ele.onclick = function() {
return false; //通过返回false值阻止默认事件行为
};
阻止事件
阻止事件冒泡
标准事件对象是e.stopPropagation(),IE则使用e.cancelBubble = true/false
var btn = document.getElementById("myButton");
btn.addEventListener("click", function(event) {
event.stopPropagation();
});
//IE
btn.attachEvent("onclick", function(event) {
event.cancelBubble = true;
});
阻止默认事件
标准事件对象使用preventDefault(),IE则使用returnValue = true/false
var btn = document.getElementById("myButton");
btn.addEventListener("click", function(event) {
event.preventDefault();
});
//IE
btn.attachEvent("onclick", function(event) {
event.returnValue = false;
});
事件对象
事件在浏览器中是以对象的形式存在的,即event。触发一个事件,就会产生一个事件对象event,该对象包含着所有与事件有关的信息。
部分属性如下:
- type属性,被触发的事件的类型
- target属性,直接事件目标,真正触发事件的目标
- currentTarget属性,其事件处理程序当前正在处理事件的那个元素
在事件处理程序内部,对象this始终等于currentTarget的值,而target则是包含事件的实际目标。
DOM中的事件对象
<input id="btn" type="button" value="click"/>
<script>
var btn=document.getElementById("btn");
btn.onclick=function(event){
console.log(event);
}
btn.addEventListener("click", function (event) {
console.log(event);
},false);
IE中的事件对象
- 通过DOM0级方法添加事件处理程序时,event对象作为window对象的一个属性存在
<input id="btn" type="button" value="click"/>
<script>
var btn=document.getElementById("btn");
btn.onclick= function () {
var event=window.event;
console.log(event);
}
</script>
- 通过attachEvent()添加的事件处理程序,event对象作为参数传入
<input id="btn" type="button" value="click"/>
<script>
var btn=document.getElementById("btn");
btn.attachEvent("onclick", function (event) {
console.log(event);
})
</script>
部分属性如下:
- srcElement属性,事件的目标(与DOM中的target属性相同)
兼容性处理
function showMsg(event){
event = event || window.event;
var ele = event.target || event.srcElement;
......
}
事件处理程序中this
IE事件处理程序中this的值等于 window 对象,而在标准事件绑定当中,this的值等于被绑定的元素。
var btn = document.getElementById("myButton");
btn.attachEvent("onclick", function(event) {
alert(this === window); // true
});
btn.addEventListener("click", function(event) {
alert(this === btn); // true
});
事件委托
利用冒泡的原理,把事件加到父元素或祖先元素上,触发执行效果,解决事件处理程序过多问题。
事件委托优点:
- 提高JavaScript性能。事件委托可以显著的提高事件的处理速度,减少内存的占用
- 动态的添加DOM元素,不需要因为元素的改动而修改事件绑定。
<ul id="color">
<li>red</li>
<li>orange</li>
<li>yellow</li>
<li>green</li>
</ul>
<script>
(function(){
var color = document.getElementById("color");
color.addEventListener('click', showColor, false);
function showColor(e) {
e = e || window.event;
var targetElement = e.target||e.srcElement;
if (targetElement.nodeName.toLowerCase()==="li") {
alert(targetElement.innerHTML);
}
}
})();
</script>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。