JS事件代理演示

马黑黑 · 发表于 2022-2-11 13:21

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

请点击下列项目获取项目数据

项目1
项目2
项目3
项目4
项目5
项目6

马黑黑 · 发表于 2022-2-11 13:23

先给代码：
<style type="text/css">
#myUl li { cursor:pointer; }
#myData { color:red; }
</style>

<div id="myData">请点击下列项目获取项目数据</div>
<ul id="myUl">
<li id="Li1">项目1</li>
<li id="Li2">项目2</li>
<li id="Li3">项目3</li>
<li id="Li4">项目4</li>
<li id="Li5">项目5</li>
<li id="Li6">项目6</li>
</ul>

<script language="javascript">

document.getElementById("myUl").addEventListener("click",function(ev) {
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == "li") {
getData(ev.target.id);
}
})

function getData(id){
document.getElementById("myData").innerHTML = "这是：" + document.getElementById(id).innerHTML;
}

</script>

马黑黑 · 发表于 2022-2-11 14:02

本帖最后由马黑黑于 2022-2-11 14:12 编辑

CSS部分的代码这里不解释。

先看HTML代码：

<div id="myData">请点击下列项目获取项目数据</div>
<ul id="myUl">
      <li id="Li1">项目1</li>
      <li id="Li2">项目2</li>
      <li id="Li3">项目3</li>
      <li id="Li4">项目4</li>
      <li id="Li5">项目5</li>
      <li id="Li6">项目6</li>
</ul>

第一行是用来显示点击结果，不是重点。ul 和 li 是父子关系的元素，ul 超生，有六个孩子 li，每个孩子都有身份（id标识号）。

现在，我们要做的是， ul 这个爸爸要做 li 孩子们的事件代理，意思是说，所有 li 的单击事件只绑定给 ul，由ul 来完成所有 li 的单击事件后要做什么。这就是事件委托：单击孩子但不由孩子去执行工作，而是父亲去代理完成。

我们先从简单的部分去展开讨论：

单击 li 们要做什么？在第一行的div标签显示选择了（单击了）哪个项目。

我们做一个函数，这个函数有一个参数 id，id 是我们自己命名的，用别的字符也行，反正这个参数是我们假设的被单击的 li 的 id：

function getData(id){
      document.getElementById("myData").innerHTML = "这是：" + document.getElementById(id).innerHTML;
}

getData(id)函数是我们编写的，getData是函数名，id 是它要用的参数（指代目标元素的id）。这个函数，等号左边是要给 id="myData" 的 div（第一行的那个div）赋值，等号后面是所赋的值，其中 document.getElementById(id).innerHTML 是关键所在，id 是函数的参数变量，它是暂借的，我们现在并不知道它的值，换言之，我们不知道这个 id 指向那个 li 。反正，我们这个函数的目的是，只要将来 li 的 id 能被获取，就把它的里面的内容（项目x）传输给第一行的div。

接下来进入代理的关键，我们给 ul 这个爸爸层元素编写一个单击事件的监听并处置问题的函数：

document.getElementById("myUl").addEventListener("click",function(ev) {
//内容暂时省略
})

addEventListener 是JS内置的方法或函数，大概意思是添加元素监听器，监听的内容是 click 事件，那么这个监听的动作就预设好了，然后编一个匿名函数 function(ev) ，函数的内容我们暂时省略。上面这个监听事件函数是个匿名函数，也就是说，function(ev) 没有名称只有一个参数 ev，有名称的话要这样写：function doNow(ev) ...。注意观察监听函数的上面这个写法，它的结构很独特。

下面来看看匿名函数的内容：

      var ev = ev || window.event;
      var target = ev.target || ev.srcElement;
      if(target.nodeName.toLowerCase() == "li") {
            getData(ev.target.id);
      }

第一句是为了兼容 ie 而写的，不考虑ie浏览器的话没有也行。ev = ev 表明非ie浏览器能识别这个参数，|| 是或者的意思，window.event 是ie识别 ev 参数的表示法。这句话的意思是，参数 ev 就是 ev ，如果浏览器是ie的话，那么 ev = window.event。

第二句我们声明了一个变量 target，它通过js的 target 方法获取对象指向，ev.target，如果是 ie 浏览器的话，则是 ev.srcElement 对象。

接下来用一个 if 语句来过滤被点击的对象，以确保这些对象只能指向 li 对象（父元素ul被单方面也会有响应，所以要过滤）：

如果target变量所指代的目标对象的子节点元素的名称强制小写以后等于 li ，那么它就是 li 元素，那么，就调用前面编写的 getData(id) 函数，函数的 id 变量值则是 ev.target.id，亦即，ev.target.id 实际上就是被点击对象 li 的 HTML id 标识号，所以用它来代入函数变量设定的 id 。

这就大功告成了，效果如一楼所演示。