事件流
事件:是文档或浏览器窗口中发生的特定的交互瞬间。JavaScript和HTML之间的交互都是由事件来实现。动作都是由事件触发的。
事件流:描述的是从页面中接受事件的顺序。
IE的事件流——事件冒泡流。Netscape网景——事件捕获流。
事件冒泡
事件冒泡:即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接受,然后逐级向上传播到最不具体的那个节点(文档)。
事件捕获
事件捕获:不太具体的节点应该更早接受到事件,而最具体的节点最后接受到事件。
事件处理程序
HTML事件处理程序
直接写在HTML中的事件,比如直接在button中加上onclick="alert('hello')",或者onclick="x()",在<body>标签中写函数x()。
缺点:HTML和JS代码紧密地耦合在一起。修改起来非常麻烦。
DOM0级事件处理程序
较传统的方式:把一个函数赋值给一个事件的处理程序属性。把对象取出来,让事件以对象属性的形式出现,去给它添加这样的事件,可以添加多个事件。
var btn2=codument.getElementById('btn2');,再调用btn2.
DOM2级事件处理程序
DOM2级事件定义了两个方法:
addEventListener()用于指定之间处理程序的操作 Listener听众
removeEventListner()用于删除事件处理程序的操作。
接收三个参数:要处理的事件名、作为事件处理的程序、布尔值。
DOM0和DOM2级事件处理程序无法在IE上运行,所以有IE事件处理程序及跨浏览器解决。
attachEvent()添加事件
detachEvent()删除事件
接收相同的两个参数:事件处理程序的名称和事件处理程序的函数,不需要布尔值,因为IE只支持事件冒泡不支持事件捕获,所以不需要选择。
跨浏览器解决,封装在一个对象内,浏览器可以自行选择。
事件对象
DOM中的事件对象
1.type属性:用于获取事件类型
2.target属性:用于获取事件目标
3.stopPropagation()方法:用于阻止事件冒泡
4.preventDefault()方法: 阻止事件的默认行为
IE中的事件对象
1.type属性:用于获取事件类型
2.srcElement属性:用于获取事件目标
3.cancelBubble属性:用于阻止事件冒泡,设置ture为阻止,false为不阻止
4.returnValue属性:阻止事件的默认行为,设置false为阻止事件的默认行为
跨浏览器解决,封装在一个对象内,浏览器可以自行选择。
事件类型
鼠标事件
QQ面板拖动-在标题区域按下-在页面中移动-释放鼠标时停止移动
onmousedown:在用户按下任何鼠标按钮时触发。
鼠标事件都是在浏览器窗口中的特定位置上发生的,这个位置信息都保存在事件的clientX和clientY属性中。所有浏览器都支持这两个属性。
他们的值表示事件发生时鼠标指针在视口中的水平和垂直坐标。不包括页面滚动的距离。
onmouseover是指当鼠标指针在元素内部移动时重复地触发。