jQuery学习---------认识事件处理
3种事件模型:
原始事件模型
DOM事件模型
IE事件模型
原始事件模型(0级事件模型)
1、事件处理程序被定义为函数实例,然后绑定到DOM元素事件对象上,实现事件的注册。
例子:var btn = document.getElementsByTagName("input")[0];
btn.onclick = function(){
函数体....
}
2、也可以把特定的事件处理函数的函数体直接赋给DOM元素的事件属性
例子:<input type="button" onclick="alert(‘hello‘)"
0级事件模型的优缺点:
优点:使用方便
缺点:元素属性被用来存储事件处理函数的引用,
所以每个元素的每个事件只能注册一个事件处理程序。
DOM事件模型:
1、注册事件
addEventListener()方法:
语法:addEventListener("type",function,useCapture)
参数:type:是要绑定的事件类型,但是这里没有“on”前缀。
如onclick事件应写作:click
function:事件处理函数,自带一个默认参数,引用event对象
usrCapture:是一个布尔值,
为true时:在事件传播的捕捉阶段触发响应;
为false时:在事件传播的冒泡阶段触发响应
例子:var btn = document.getElementsByTagName("input")[0];
btn.addEventListener("click",function(){
btn.value = event.type;
},true)
2、事件传播
DOM 2级事件模型中,一旦事件被触发,事件流首先从DOM树的顶部(文档节点#document)向下传播,直到目标节点,然后再从目标节点向上传播到DOM树顶。
从上到下的过程被称为捕获阶段,
从下到上的过程被称为冒泡阶段。
终止事件流的冒泡:stopPropagegation()方法
例子:var btn = document.getElementsByTagName("input")[0];
do{
btn.addEventListener("click",function(){
div.innerHTML += " "+this.nodeName+" ";
},true)
btn = btn.parentNode;
}while(btn);
上例中,第三个参数设置为true,注册的是捕获型事件。
所以点击按钮,事件触发顺序为:#document->html->body->button
如果,第三个参数设置为false,注册的是冒泡型事件。
所以点击按钮,事件的触发顺序为:button->body->html->#document
3、销毁事件
removeEventListener()方法:
注意:removeEventListener()和addEventListener()的第三个参数要保持一致
否则销毁操作是无效的。
IE事件模型:
1、注册事件:
attachEvent()方法:
语法:attachEvent("type",function)
参数:type:元素事件类型,如:onclick
function:事件处理函数
注意:IE时间模型中,事件处理函数中的this指针总是指向window对象,
0型事件模型中,事件处理函数中的this指针总是指向当前注册事件的对象
2、事件传播:
IE事件模型:事件流总是从目标对象向上传递知道树顶,即冒泡型。
终止事件流的冒泡:设置event对象的cancelBubble属性
3、注销事件:
detachEvent()方法
事件处理机制:
Event对象:
当触发事件时,浏览器会自动创建一个event对象,
event对象实际上是Event类型的实例,
默认状态下他会被作为参数传递给事件处理函数
实现访问的兼容性:
var event = event||window.event;
注意:IE和DOM标准浏览器返回的event对象的属性和方法存在差异!!!
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。