原生js底层基础(十九)事件
程序员文章站
2022-06-30 19:18:46
...
javaScript里面的事件触发写法很多,但是考虑到每个人使用的环境的异同,我们需要了解每个写法的兼容等。
1.elem.on事件类型 = 功能函数
事件名可以是click,blur,change,input,keydown,mouseenter,mouseleave等,以下不再赘述。
- 兼容性很好,但是一个元素的同一个事件只能绑定一次
- 基本等于写在HTML行间上,例如以下两片代码相同
<script>
var div = document.getElementsByTagName('div')[0];
div.onclick = function(){
console.log('aaaa')
}
</script>
<div onclick = "console.log('a')">
- 解除:elem.onXXX = null;
2.elem.addEventListener(事件类型,函数/函数名,false)
第三个参数是个布尔值。当事件触发时,有嵌套的两个以上的元素都同时触发时,这个布尔值默认是false(子元素的事件会先被触发,然后再触发父元素。)true(父元素的事件会先被触发,然后再触发子元素。)
-
IE9以下不兼容,可以为一个事件绑定多个处理程序
例如:
function test(){
console.log('bbbbbbb');
}
function test2(){
console.log("cccccc");
}
div.addEventListener('mouseenter',test,false)
div.addEventListener('mouseenter',test2,false)
当鼠标移入触发事件的时候,则同时输出’bbbbbbb’,‘cccccc’
- 解除:elem.removeEventListener(“click”,函数名,false);//参数二不能写匿名函数
3.obj.attachEvent(‘on’+ type,fn);
- IE独有,一个事件同样可以绑定多个处理程序
- this指向window
- 解除:elem.detachEvent(“on”+type,函数名)//参数二不能写匿名函数
4.附加面试题
<ul>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
</ul>
使用原生 js,addEventListener,给每个 li 元素绑定一个click事件,输出他们的顺序。
错误答案:
var liList = document.getElementsByTagName("li");
for(var i = 0; i<liList.length; i ++){
liList[i].addEventListener("click",function(){
console.log(i);
},false)
}
//这样会出现一个问题,预编译的时候系统不去管console.log(i)里面的值,所以等for循环结束,里面的点击事件被触发的时候。那个i不能保证是什么了。要用立即执行函数
正确答案:
for(var i = 0; i<liList.length; i ++){
(function(n){
liList[n].addEventListener("click",function(){
console.log(n);
},false)
}(i))
}
封装兼容方法
function addEvent(elem,type,handle){
if(elem.addEventListener){
return elem.addEventListener(type,handle,false);
}else if(elem.attachEvent){
return elem.attachEvent(on+type,function(){
handle.call(elem);//此方法和普通的方法一样,this是指向window 所以自己手动用call改指向
})
}else{
return elem['on'+type] = handle;
}
}
```
上一篇: ReactiveObjC使用
下一篇: CI中的超级对象