阻止冒泡的方法有哪些
1.if (v==e.target) {console.log(v) }//适应所有浏览器
2.e.cancelBubble=true//支持IE低版本
3.e.stopPropagation()//高版本浏览器
绑定事件
事件委托:又叫事件代理,在js中用绑定事件的技巧,把原本需要绑定在子元素的事件,委托给父类元素,让父类元素担当事件监听任务,原理就是事件冒泡。
高版本浏览器的绑定方法:
1.标签.addEventListener(事件,函数,布尔值)绑定事件,布尔值为true处理捕获
2.removeEventListener(事件,函数,布尔值)删除事件
IE的事件绑定:
1.标签attachEvent(事件,函数)绑定事件
2.标签detachEvent(事件,函数)函数事件
注意:addEventlistener(高版本浏览器下的)执行的click
attachEvent(IE下的)执行onclick
绑定事件兼容性封装:
var bindfun={
add:function(obj,type,fun,bool){
if(obj.addEventListener){//判断高版本浏览器
obj.addEventListener(type,fun,bool)
}
else{abj.attachEvent("on"+type,fun)}
},
remove:function(obj,type,fun,bool){
if(obj.removeEventListener){//判断IE
obj.removeEventListener(type,fun,bool)
}
else{obj.detachEvent("on"+type,fun) }
}
}
function foo(){
alert("封装的绑定事件执行了")
bindfun.remove(div,"click",foo,false)
}
bindfun.add(div,"click",foo,false)
事件委托:
//点击li变颜色
//事件委托的写法
//target找到事件点击的原元素
// var ul=document.querySelector("ul")//找到父类
document.addEventListener("click",function(ev){//传一个事件对象//document不用找父类了
var e=event||ev//希望浏览器都支持
// e.target.style.backgroundColor="pink"//每一个li相同颜色
switch(e.target.classList.toString()){//不同颜色
case'list1':e.target.style.backgroundColor="pink";break;
case'list2':e.target.style.backgroundColor="skyblue";break;
case'list3':e.target.style.backgroundColor="gold";break;
case'list4':e.target.style.backgroundColor="yellow";break;
}
},false)//执行绑定事件
事件动画
通过周期函数和延迟函数做动画,注意:
1.要判断结束位置,否则函数永远无法停止
2.考虑计算的数字和结束位置是否一致,达到位置重合
3.动画想要平滑执行,需要计算速率
例子:标签移动动画
div.οnclick=function(){
var t=setInterval(function(){
var l=div.offsetLeft
var speed=(800-l)/13
if(l>=800-10){
clearInterval(t)
div.style.left="800px"
}
else{
div.style.left=(l+speed)+"px"
}
},30)
}
事件冒泡/绑定事件/事件动画
最新推荐文章于 2024-08-22 14:32:34 发布