一.事件机制
2.事件绑定
6)addEventListener的第三个参数
false:冒泡;
true:捕获;
IE的attachEvent没有第三个参数,所以就不说了
冒泡:从最内层标签开始执行事件,逐层向外,直到执行到document的事件
捕获:一个事件从document开始执行,逐层向内层标签执行,最后执行事件触发的标签
注意:必须是相同的事件;
案例:(01.冒泡.html);
结构
<body>
<div id="box">
<p>我是</p>
</div>
<body>
js:点击段落,依次弹出提示框如下:
(我是p的绑定事件)
(我是div的绑定事件)
(我是body的绑定事件)
(我是document的点击事件)
案例:(02.捕获.html)
结构
<body>
<div id="box">
<p>我是</p>
</div>
<body>
js:点击段落,依次弹出提示框如下:
(我是document的点击事件)
(我是body的绑定事件)
(我是div的绑定事件)
(我是p的绑定事件)
7)阻止冒泡
标准浏览器阻止冒泡
事件对象.stopPropagaton();
Propagaton:传送、传播
事件对象:当出发时间是会自动创建一个事件对象,通过实践对象可以访问很多信息,比如获取事件源、鼠标/页面的坐标等等。
如:
p.addEventListener('click',function(event)){
},false;
参数event就是事件对象
IE低版本浏览器阻止冒泡
获取事件对象
var e =window.event;
e.cancelBubble = true;
封装阻止冒泡的兼容函数
function stopBubble(evt){
//evt被识别就是标准浏览器,就会返回evt给event变量,如果evt不能识别就是IE低版本浏览器,就会吧window.event给event变量
var event = evt || window.event;
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
}
p.addEventListener('click',
function(event){
alert('我是p的绑定事件');
stopBubble(event);
},false);
案例:(03.阻止冒泡.html)
阻止01案例的冒泡行为
1)只实现标准浏览器的
2)只实现低版本的
3)实现浏览器兼容的。
二.事件对象event
任何事件在触发的时候,在事件处理函数中会自动生成一个事件对象event,这个event对象包含了所有与事件相关的信息,
比如:事件源是谁,事件是什么,鼠标的位置,键盘按键是谁等等信息。
event事件对象的获取:
1.标准浏览器:它是事件处理函数中的形式参数(名称不定),例如:e
2.IE低版本浏览器:window的一个event属性,格式固定,window.event。
div.onclick = function(evt){
// 兼容
var event = evt ||window.event;
console.log(event);
}
案例:(04.事件对象.html)
单击body,在控制台输出事件对象
1)标准浏览器输出
2)IE低版本浏览器输出
单击document,再控制台输出事件对象
3)兼容的写法
使用event对象获取事件源
event.target || event.srcElement
IE下,event对象有srcElement属性,但是没有target属性FireFox下,event对象有target属性,但是没有srcElement属性
Chrome下,event对象有target属性,也有srcElement属性。这两个都能得到事件源。
案例:(05.event对象获取事件源.html)
结构:
<div id="box">点击</div>
<input type="button" value="btn" id="btn">
js:
1)单击div,控制台输出事件对象及三个事件源对象
2)单击按键,控制台输出事件对象及四个事件源对象
要求:事情对象及事件源的获取需要实现浏览器兼容性
使用event阻止浏览器的默认行为
超链接,在单击的时候,打开新页面是默认事件
表单,有提交数据到服务器的默认事件
有时候,我们需要阻止默认事件
1.DOM0
在事件处理函数的最后或者当满足一定条件的时候,加return false了;就会阻止默认事件
2标准浏览器
通过实践对象的preventDefault()
方式阻止默认事件
事件对象.preventDefault();
3.IE低版本浏览器
通过设置事件对象returnValue属性值来阻止默认事件
事件对象.returnValue = false;
兼容写法:
封装阻止默认事件的兼容函数
function prevent(evt){
var event = evt || window.event;
if(event.preventDefault){//标准浏览器
event.preventDefault();
}else if(event.returnValue){//IE低版本
event.returnValue = false;
}else{//以上浏览器皆不是
return false;
}
}
案例:(06.阻止默认事件.html)
结构:
超链接
输入框 提交按钮
js:
1)阻止超链接、表单提交、右键的默认事件
2)实现浏览器的兼容