欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

原生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;
		}
	}
	```