js的事件

本人之前认为事件就是一些点击移入等事情触发的事情.

JavaScript使我们可以创建动态的页面,事件是可以被JavaScript监测到的.事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行

IE的事件流是事件冒泡,Netscape Communicator的事件流是事件捕获

事件的所有属性
属性        当以下情况发生时，出现此事件      FF     N     IE
onabort      图像加载被中断               1    3   4
onblur       元素失去焦点                1    2   3
onchange     用户改变域的内容              1    2   3
onclick      鼠标点击某个对象              1    2   3
ondblclick   鼠标双击某个对象              1    4   4
onerror      当加载文档或图像时发生某个错误    1   3   4
onfocus      元素获得焦点                1    2   3
onkeydown    某个键盘的键被按下         1    4   3
onkeypress   某个键盘的键被按下或按住      1    4   3
onkeyup      某个键盘的键被松开         1    4   3
onload       某个页面或图像被完成加载      1    2   3
onmousedown  某个鼠标按键被按下         1    4   4
onmousemove  鼠标被移动                  1    6  3
onmouseout   鼠标从某元素移开              1    4   4
onmouseover  鼠标被移到某元素之上        1    2   3
onmouseup    某个鼠标按键被松开         1    4   4
onreset      重置按钮被点击               1    3   4
onresize     窗口或框架被调整尺寸        1    4   4
onselect     文本被选定                 1    2   3
onsubmit     提交按钮被点击               1    2   3
onunload     用户退出页面                1    2   3

1.事件冒泡

IE的事件流叫做事件冒泡,既事件开始由最具体的元素接收,然后逐级向上传播到较为不具体的节点
事件冒泡触发顺序
div —> body —>html —>document
现在所有的浏览器都支持事件冒泡,有些会跳过HTML

2.事件捕获

另一个事件流叫做事件捕获.事件捕获的思想是不太具体的节点应该更早接收到事件,而最具体的节点应该最后接收到事件.事件捕获的用意是在于在事件达到预定目标之前捕获他.触发事件
document —> html —> body —> div

在事件捕获过程中,document对象首先接收到click事件,然后事件沿DOM树依次向下,一直传播到事件的实际目标.

事件处理程序都带有 ‘on’

一.HTML事件处理程序

可以直接在HTML事件里面书写事件

<input type="button" value="Click me" onclick="alert('hello world')">

也可以在script里面去书写事件

<input type="button" value="Click me" onclick="showMessage()">
<script>
function showMessage() {
    alert('hello world')
}
</script>

这个函数是一个独立的script 元素中定义的,当然也可以被包含在另一个外部文件中,事件处理程序中的代码在执行时,有权访问全局作用域中的任何代码,这样指定事件处理程序具有一些独到之处,这个函数中有一个局部变量event,也就是事件对象

<input type="button" value="Click me" onclick="alert(event.type)">
<!--输出click-->

<input type="button" value="Click me" onclick="alert(this.value)">
<!--输出Click me-->

<input type="button" value="Click me" onclick="alert(value)">

---

动态创建的函数,可以扩展作用域在函数内部,可以像访问局部变量一样访问document及本元素的成员.

function onclick() {
    with (this.form){
        with (this){

        }
    }
}

---

二.DOM 0级事件处理程序

DOM0级方法指定的事件处理程序被认为是元素的方法,所以事件处理是在元素作用域中运行

<p id="myBtn">123</p>  输出123 输出myBtn

var btn = document.getElementById('myBtn');
btn.onclick = function () {
    alert(this.innerText);
    alert(this.id)
}
也可以删除DOM 0级事件,将这个值设置为null就可以
btn.onclick = null;

三.DOM 2级事件处理程

DOM 2级事件 定义了两个方法,用于处理指定和删除事件处理程序的操作:addEventListener()和removeEventListener()
所有的DOM节点都包括这两个方法,并且都接受三个参数:要处理的事件名,作为事件处理程序的函数和一个布尔值.这个布尔值如果是true.表示在捕获阶段调用事件处理程序,如果是false,表示在冒泡阶段调用事件处理程序.
例子:

<p id="myBtn">123</p>

<script>
输出的是myBtn,采用的是冒泡事件处理程序
var btn = document.getElementById('myBtn');
btn.addEventListener('click',function () {
    alert(this.id);
},false)
</script>

通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除;移除时传入的参数与添加出炉
程序时使用的参数相同.这也意味着通过addEventListen()添加的匿名函数将无法移除

<script>
添加的二级事件
var btn = document.getElementById('myBtn');
btn.addEventListener('click',function () {
    alert(this.id);
},false)

移除的二级事件(但是没有用,匿名函数移除不了) 执行顺序 先显示this.id 后显示 hello world

btn.removeEventListener('click',function () {
    alert(this.id);
},false);
btn.addEventListener('click',function () {
    alert('hello world');
},false)

这样书写的可以移除 添加二级事件

var hander = function () {
    alert(this.id);
};
btn.addEventListener('click',hander,false);
移除二级事件
btn.removeEventListener('click',hander,false);
</script>

IE事件处理程序

IE实现DOM中类似的两个方法:attachEvent()和detachEvent().这两个方法接受相同的两个参数
attachEvent()添加事件 这个执行顺序是先执行hello world 后执行 this.id

btn.attachEvent('onclick',function () {
    alert(this.id)
})
btn.attachEvent('onclick',function () {
    alert('hello world')
})

注意:attachEvent()的第一个参数是’onclick’,而非DOM的addEventener()方法中的’click’

在IE中使用attachEvent()与使用DOM0级方法的主要区别在于处理程序的作用域.在使用DOM0级方法情况下事件处理,程序会在其所属元素的作用域内运行;

在attachEvent()方法中,事件处理程序会在全局作用域中运行,所以this等于window

事件对象

在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息,包括导致事件的元素.事件类型.和与特定事件相关的信息.鼠标操作导致的事件对象中,会包含鼠标位置信息,而键盘操作导致的事件对象中会包含与按下键有关的信息.所有的浏览器都支持event对象

DOM中的事件对象

兼容DOM事件的浏览器中都会将event对象传入到事件处理程序中.无论是DOM0级事件还是DOM2级事件,都会传入event对象.
event,type事件类型

btn.onclick = function (event) {
  alert(event.type)//输出的是'clcik'
};

btn.addEventListener('click',function (event) {
    alert(event.type)//输出的是'click'
},false)
target是目标实际触发者,currentTarget和target值相同
btn.onclick = function (event) {
    alert(event.currentTarget===this); //true
    alert(event.target===this);  //true
}

阻止特定事件的默认行为
event.preventDefault()
阻止事件冒泡和捕获
event.stopPropagation()

IE中的事件对象与DOM中event对象不同写为window.event 阻止默认程序的是 returnValue
写为Window.event.returnValue = false;
阻止默认程序 window.event.cancelBubble = true;

load事件,当页面加载完全后会触发window上面的load事件.有两种定义onload事件处理程序的方式.
第一种方式:EventUtil
第二中是在<bodyonload="alert('Loaded')">

unload事件,与load事件对象是卸载之后发生的事件

resize事件,当浏览器改变时会触发resize事件

scroll事件,在页面中元素改变的时候会触发,例如滚动滑动条.