什么是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);，会输出什么？

JavaScript函数中event参数的使用-----function(event){}相关推荐

JavaScript函数中的arguments（js函数中的arguments，函数默认参数arguments）
简述:js中的函数大家都比较熟悉,今天来分享下函数中的默认参数arguments.js的函数参数和其他的语言有些不同,它并不介意你传进来多少个参数,以及参数的数据类型,即使你在定义函数时,只设置了两个 ...
在JavaScript函数中定义全局变量
是否可以在JavaScript函数中定义全局变量? 我想在其他函数中使用trailimage变量(在makeObj函数中声明). <html xmlns="http://www.w3. ...
JavaScript函数之实际参数对象(arguments) / callee属性 / caller属性 / 递归调用 / 获取函数名称的方法...
函数的作用域:调用对象 JavaScript中函数的主体是在局部作用域中执行的,该作用域不同于全局作用域.这个新的作用域是通过将调用对象添加到作用域链的头部而创建的(没怎么理解这句话,有理解的亲可以留 ...
2020-08-14 理解 javascript 函数中的 curry
理解 javascript 函数中的 curry 函数柯里化: 所谓函数柯里化就是把一个函数的多个传参变成多个函数的单个传参. 函数的柯里化,是 Javascript 中函数式编程的一个重要概念.它返 ...
在setInterval函数中传递参数
本文翻译自:Pass parameters in setInterval function Please advise how to pass parameters into a function c ...
以下是一个使用 VBA 的例子，演示了 ByVal 和 ByRef 的区别，以及如何在函数中传递参数和返回值。
以下是一个使用 VBA 的例子,演示了 ByVal 和 ByRef 的区别,以及如何在函数中传递参数和返回值: Sub Example()Dim x As Integer, y As Integerx ...
python函数中可变参数的传递方式是_Python中函数的参数传递与可变长参数
1.Python中也有像C++一样的默认缺省函数 1 def foo(text,num=0):2 printtext,num3 4 foo("asd") #asd 0 5 foo( ...
[SpringBoot2]ajax函数中data参数的数据设置方式
ajax函数中data参数的数据设置方式:
listen函数的第二个参数_signal(SIGPIPE,?SIG_IGN)listen函数中backlog参数分析
signal(SIGPIPE, SIG_IGN); TCP是全双工的信道, 可以看作两条单工信道, TCP连接两端的两个端点各负责一条. 当对端调用close时, 虽然本意是关闭整个两条信道, 但本端 ...

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

目录

什么是event？

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

event.target的使用

event.currentTarget的使用

JavaScript函数中event参数的使用-----function(event){}相关推荐

最新文章

热门文章