javascript中的事件
一.简介
javascript中的事件，可以理解就是在HTML文档或者浏览器中发生的一种交互操作。
本篇文章会从以下几个点去详细介绍javascript中的事件：
>> 事件处理程序
>> 事件流机制
>> 事件对象
>> 实践应用——事件委托
二.事件处理程序
事件处理程序指的是处理事件的函数，也可以称其为事件侦听器。
所以了解事件的第一步就是如何去添加或者删除事件处理程序，下面会总结几种常见的事件处理程序的添加/删除方法。
1.HTML事件处理程序
HTML事件处理程序，即直接将事件处理程序添加在HTML元素中。
一般在代码中比较常见，直接看示例。
<button onclick=“submit()”>提交</button>
五.实践应用——事件委托
最后这一部分，主要是针对事件冒泡的一个应用。
我们假设有这样一个场景：有一个商品列表，点击其中某一个商品，弹框显示商品标题。同时用户可以在商品列表添加商品。
现在我们实现一下这个需求。
<html>
<head>
<meta charset=“utf-8”/>
<title>事件委托</title>
<style> li{ cursor: pointer; padding: 20px;
}
</style>
</head>
<body>
<h1>事件委托</h1>
<div class=‘box’>
<button onclick=“add()”>添加商品</button>
<div class=‘list’>
<h3>商品列表</h3>
<ul>
<li>商品1</li>
<li>商品2</li>
<li>商品3</li>
<li>商品4</li>
</ul>
</div>
</div>
<script type=“text/javascript”>
// 遍历商品列表添加点击事件
var liEle = document.getElementsByTagName(‘li’); for(var i = 0; i<liEle.length; i++){ var element = liEle[i];
element.addEventListener(‘click’, function(){
alert(this.innerHTML);
})
} // 添加商品
function add(){ var ulEle = document.getElementsByTagName(‘ul’)[0]; var liLength = document.getElementsByTagName(‘li’).length; var newLiEle = document.createElement(‘li’);
newLiEle.innerHTML = “商品”+(liLength+1);
ulEle.appendChild(newLiEle);
} </script>
</body>
</html>
我们看一下浏览器效果。
可以看到，循环li元素添加的点击事件均可以正常执行，而点击【添加商品】按钮添加的商品5，点击之后并没有click事件，因此没有弹窗显示。
这个需求实际上可以转化为这样的应用场景：事件添加个数不确定。
那么根据前面提说的事件流、事件冒泡和事件对象，我们很容易就能想到解决办法：
将click事件添加到父元素ul元素上，利用事件冒泡和event.target实现弹窗。
这个办法我们被称为事件委托机制。
下面我们代码实现一下。
（修改代码：27行-32行）
1 <html>
2 <head>
3 <meta charset=“utf-8”/>
4 <title>事件委托</title>
5 <style>
6 li{
7 cursor: pointer;
8 padding: 20px;
9 }
10 </style>
11 </head>
12 <body>
13 <h1>事件委托</h1>
14 <div class=‘box’>
15 <button onclick=“add()”>添加商品</button>
16 <div class=‘list’>
17 <h3>商品列表</h3>
18 <ul>
19 <li>商品1</li>
20 <li>商品2</li>
21 <li>商品3</li>
22 <li>商品4</li>
23 </ul>
24 </div>
25 </div>
26 <script type=“text/javascript”>
27 // 将click事件添加到父元素ul元素上，利用事件冒泡和event.target实现弹窗
28 var ulEle = document.getElementsByTagName(‘ul’)[0]; 29 ulEle.addEventListener(‘click’, function(){ 30 var target = event.target; 31 alert(target.innerHTML); 32 }) 33
34 // 添加商品
35 function add(){ 36 var ulEle = document.getElementsByTagName(‘ul’)[0]; 37 var liLength = document.getElementsByTagName(‘li’).length; 38 var newLiEle = document.createElement(‘li’); 39 newLiEle.innerHTML = “商品”+(liLength+1); 40 ulEle.appendChild(newLiEle); 41 } 42 </script>
43 </body>
44 </html>
完结！！！
如果觉得有用的话，点个赞鼓励一下~
转载请先注明出处~
最近作者新开通了一个微信公众号。
微信公众号会分享一些自己日常的东西，包括个人总结呀，吸猫日常呀，同时也会分享一些博客上的前端技术文章。
欢迎大家扫码关注～
原文链接：https://www.cnblogs.com/HouJiao/p/12309348.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。