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

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。