obj.onlick:
<
div
style=
"width: 100px; height: 100px; background-color:red;position: absolute;left: 0px;"
></
div
>
<
script
type=
"text/javascript"
>
var
div=
document.
getElementsByTagName(
"div")[
0];
div.
onclick=
function(){
this.
style.
backgroundColor=
"green";
}
<
/
script
>
点击这个红正方形就会变成绿色
但是这个一个对象的一个处理事件只能实现一个方法
obj.addEventLinstener(type,function,false)
addEventListener
<
ul
>
<
li
>0
</
li
>
<
li
>1
</
li
>
<
li
>2
</
li
>
<
li
>3
</
li
>
</
ul
>
<!-- <div style="width: 100px; height: 100px; background-color:red;position: absolute;left: 0px;"></div> -->
<
script
type=
"text/javascript"
>
var
liCol=
document.
getElementsByTagName(
"li"),
len=
liCol.
length;
for(
var
i=
0;
i<
len;
i++){
(
function(
i){
liCol[
i].
addEventListener(
"click",
function(){
console.
log(
i);
},
false)
}(
i))
}
<
/
script
>
这个实现了
点击什么数字打印出什么数字
ele.removeEvetListener()
<
div
style=
"width: 100px; height: 100px; background-color:red;position: absolute;left: 0px;"
></
div
>
<
script
type=
"text/javascript"
>
var
div=
document.
getElementsByTagName(
"div")[
0];
div.
addEventListener(
"click",
test,
false);
function
test(){
console.
log(
"a");
}
div.
removeEventListener(
"click",
test,
false);
这样以后就点击不了下面的这个小方块了
事件冒泡：
<
div
class=
"wrapper"
>
<
div
class=
"oppset"
>
<
div
class=
"dirren"
></
div
>
</
div
>
</
div
>
<!-- <div style="width: 100px; height: 100px; background-color:red;position: absolute;left: 0px;"></div> -->
<
script
type=
"text/javascript"
>
var
wrapper=
document.
getElementsByClassName(
"wrapper")[
0];
var
oppset=
document.
getElementsByClassName(
"oppset")[
0];
var
dirren=
document.
getElementsByClassName(
"dirren")[
0];
wrapper.
addEventListener(
"click",
function(){
console.
log(
"wrapper");
},
false)
oppset.
addEventListener(
"click",
function(){
console.
log(
"oppset");
},
false)
dirren.
addEventListener(
"click",
function(){
console.
log(
"dirren");
},
false)
这三个重叠的正方形，点击最小的那个就会打印出：
这就是事件冒泡的意思，好像会“漏”下去一样，因为这三个div结构是嵌套的，所以才会这样，而不是因为视觉上的重叠
事件捕获：
将后面的参数改成true
wrapper.
addEventListener(
"click",
function(){
console.
log(
"wrapper");
},
true)
oppset.
addEventListener(
"click",
function(){
console.
log(
"oppset");
},
true)
dirren.
addEventListener(
"click",
function(){
console.
log(
"dirren");
},
true)
打印的顺序是反的，再来看：
wrapper.
addEventListener(
"click",
function(){
console.
log(
"wrapper");
},
false)
oppset.
addEventListener(
"click",
function(){
console.
log(
"oppset");
},
false)
dirren.
addEventListener(
"click",
function(){
console.
log(
"dirren");
},
false)
wrapper.
addEventListener(
"click",
function(){
console.
log(
"wrapperB");
},
true)
oppset.
addEventListener(
"click",
function(){
console.
log(
"oppsetB");
},
true)
dirren.
addEventListener(
"click",
function(){
console.
log(
"dirrenB");
},
true)
先设定了三个事件执行，再设定了三个事件捕获，点击最小的正方形就会出现：
可以发现点击最小的正方形就会先捕获，然后到了小正方形的时候就会事件执行，然后是最小的正方形的事件捕获，再依次事件执行
event.stopPropagation():
wrapper.
addEventListener(
"click",
function(
e){
e.
stopPropagation();
console.
log(
"wrapper");
},
false)
oppset.
addEventListener(
"click",
function(
e){
e.
stopPropagation();
console.
log(
"oppset");
},
false)
dirren.
addEventListener(
"click",
function(
e){
console.
log(
"dirren");
e.
stopPropagation();
},
false)
这样就会取消冒泡，点击小正方形就会只打印一个：
封装取消绑定的方法：
function
stopBubble(
event){
if(
event.
stopPropagation()){
event.
stopPropagation();
}
else{
event.
stopBubble=
true;
}
}
取消默认事件的方法：
1.return false
document.
oncontextmenu=
function(){
console.
log(
"a");
return
false;
}
oncontextmenu是一个网页中点击鼠标右键的一个默认事件，然而这样return false之后单击右键就只会打印a，但是不会出现菜单了
2.event.preventDefault()
这里传入一个对象e，因为系统默认就会给函数加上一个对象e
document.
oncontextmenu=
function(
e){
console.
log(
"a");
e.
preventDefault();
}
3.event.returnValue=false
document.
oncontextmenu=
function(
e){
console.
log(
"a");
e.
returnValue=
false;
}
4.封装取消默认事件的函数
function
cancelHandeler(
event){
if(
event.
preventDefault()){
event.
preventDefault();
}
else{
event.
returnValue=
false;
}
}