JavaScript函数中event参数的使用-----function(event){}

什么是event?

Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。 事件通常与函数结合使用,函数不会在事件发生前被执行!

  • 看例子:
    现有ul以及多个li元素,通过事件委托,给ul绑定点击事件,当我们点击某个li元素时,输出所点击li元素的相关信息。
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<ul class='list'>
    			<li>1</li>
    			<li>2</li>
    			<li>3</li>
    			<li>4</li>
    		</ul>
    		<script type="text/javascript">
    			var ul = document.querySelector('ul');
    			//事件委托:将事件处理程序绑定在父元素上,通过冒泡原理设置每个子节点,
    			//只操作了一次DOM,提高了程序的性能;
    			ul.addEventListener('click',function(event) {
    				var lis = document.querySelectorAll('li');
    				for(var i=0; i<lis.length; i++){
    					lis[i].style.backgroundColor = 'white';
    				}
    				event.target.style.backgroundColor = 'pink';
    				console.log(event);
    			})
    		</script>
    	</body>
    </html>
    
    
    假设我们点击了第一个li元素,通过console.log(event);语句,输出event参数的相关信息,如下图所示:在这里插入图片描述
  • 从图片中可以看出来,event中包含了事件触发时的参数,比如click事件的event中包含着pageX、pageY;keydown事件中包含着keyCode等
  • 在IE浏览器中,event是全局的,需要通过window.event来获取,在其他浏览器中,event都是作为参数传入的。
    考虑到浏览器兼容问题,我们应该这样获取event对象:
    event = window.event||event;
    

当function函数中没有传入event参数时,我们应该如何在函数内部使用event呢?

  • 如果函数本身没有传入参数:(参照最上面的例子)
    <script type="text/javascript">
    	var ul = document.querySelector('ul');
    	ul.addEventListener('click',function() {
    		var lis = document.querySelectorAll('li');
    		var event = window.event || arguments[0];
    		for(var i=0; i<lis.length; i++){
    			lis[i].style.backgroundColor = 'white';
    		}
    		event.target.style.backgroundColor = 'pink';
    		console.log(event);
    	})
    </script>
    
    当点击第一个li元素的执行结果:在这里插入图片描述
  • 如果函数本身传入了参数,则需使用以下语句获取event:
     var event = window.event || arguments.callee.caller.arguments[0]
    
    关于arguments、callee、caller的相关使用可以参考这篇文章
    JavaScript函数中arguments、callee、caller的使用

event.target的使用

  • 首先我们来看看target属性中都包含哪些值:(假设我们点击了第一个li元素)在这里插入图片描述
    可以看出target 事件属性可返回事件的目标节点(触发该事件的节点),是目标节点的属性集合。
  • 什么时候使用target属性呢?
    如文章最开始的例子,当我们使用事件委托,给ul绑定点击事件,当我们点击某个li元素时,需要输出所点击li元素的相关信息,这时就可以使用target来获取被点击元素的相关信息。
  • 假设我点击了第二个li元素:在这里插入图片描述
    1、我们使用console.log(event.target);语句,看看发生了什么:在这里插入图片描述
    此时,在控制台中输出了触发点击事件的节点(第二个li元素)
    2、使用console.log(evetn.target.innerHTML);
    在这里插入图片描述

event.currentTarget的使用

  • currentTarget : 指的是绑定了事件监听的元素,当我们使用console.log(event.currentTarget);,会输出什么?在这里插入图片描述
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页