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;
}
}