JavaScript监听属性改变

为往事干杯 發表於 2020-7-22 14:19:00

<div class="h hm bbd">
<h1 class="ph wzph">参考：https://www.softwhy.com/HTML5/MutationObserver_course/</h1>
<h1 class="ph wzph">JavaScript监听属性改变</h1>
<p class="wzxg1">2018-8-18 01:34<span class="pipe">| 作者: admin<span class="pipe">| 查看: <span id="_viewnum">3639<span class="pipe">| 评论: 0<span class="pipe">|来自: 蚂蚁部落</span></span></span></span></span></p>
<p class="link">原创作品，转载需得到原作者书面许可，同时保留原作者和出处，否则将追究法律责任。</p>
</div>
<div id="article_content" class="view_cont">
<p>关于Mutation Observer基本知识可以参阅以下两篇文章：</p>
<p>（1）.Mutation Observer优点一章节。</p>
<p>（2）.Mutation Observer用法一章节。</p>
<p>下面通过代码实例介绍一下如何监听attributes的变动，也就是监听子节点的变动。</p>
<p>代码实例如下：</p>
<div id="antzone_brush_box">
<div class="brush_box"> <span class="viewsource">纯文本查看 <span class="copycode">复制代码</span></span></div>
<div>
<div id="highlighter_348093" class="syntaxhighlighter notranslate html">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gutter">
<div class="line number1 index0 alt2">01</div>
<div class="line number2 index1 alt1">02</div>
<div class="line number3 index2 alt2">03</div>
<div class="line number4 index3 alt1">04</div>
<div class="line number5 index4 alt2">05</div>
<div class="line number6 index5 alt1">06</div>
<div class="line number7 index6 alt2">07</div>
<div class="line number8 index7 alt1">08</div>
<div class="line number9 index8 alt2">09</div>
<div class="line number10 index9 alt1">10</div>
<div class="line number11 index10 alt2">11</div>
<div class="line number12 index11 alt1">12</div>
<div class="line number13 index12 alt2">13</div>
<div class="line number14 index13 alt1">14</div>
<div class="line number15 index14 alt2">15</div>
<div class="line number16 index15 alt1">16</div>
<div class="line number17 index16 alt2">17</div>
<div class="line number18 index17 alt1">18</div>
<div class="line number19 index18 alt2">19</div>
<div class="line number20 index19 alt1">20</div>
<div class="line number21 index20 alt2">21</div>
<div class="line number22 index21 alt1">22</div>
<div class="line number23 index22 alt2">23</div>
<div class="line number24 index23 alt1">24</div>
<div class="line number25 index24 alt2">25</div>
<div class="line number26 index25 alt1">26</div>
<div class="line number27 index26 alt2">27</div>
<div class="line number28 index27 alt1">28</div>
<div class="line number29 index28 alt2">29</div>
<div class="line number30 index29 alt1">30</div>
<div class="line number31 index30 alt2">31</div>
<div class="line number32 index31 alt1">32</div>
<div class="line number33 index32 alt2">33</div>
<div class="line number34 index33 alt1">34</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="html plain"><!doctype html></code></div>
<div class="line number2 index1 alt1"><code class="html plain"><</code><code class="html keyword">html</code><code class="html plain">></code></div>
<div class="line number3 index2 alt2"><code class="html plain"><</code><code class="html keyword">head</code><code class="html plain">></code></div>
<div class="line number4 index3 alt1"><code class="html plain"><</code><code class="html keyword">meta</code> <code class="html color1">charset</code><code class="html plain">=</code><code class="html string">"utf-8"</code><code class="html plain">></code></div>
<div class="line number5 index4 alt2"><code class="html plain"><</code><code class="html keyword">meta</code> <code class="html color1">name</code><code class="html plain">=</code><code class="html string">"author"</code> <code class="html color1">content</code><code class="html plain">=</code><code class="html string">"http://www.softwhy.com/"</code> <code class="html plain">/></code></div>
<div class="line number6 index5 alt1"><code class="html plain"><</code><code class="html keyword">title</code><code class="html plain">>蚂蚁部落</</code><code class="html keyword">title</code><code class="html plain">></code></div>
<div class="line number7 index6 alt2"><code class="html plain"><</code><code class="html keyword">script</code><code class="html plain">></code></div>
<div class="line number8 index7 alt1"><code class="html plain">window.onload = function () {</code></div>
<div class="line number9 index8 alt2"><code class="html spaces">  </code><code class="html plain">var ul = document.querySelector("ul");</code></div>
<div class="line number10 index9 alt1"><code class="html spaces">  </code><code class="html plain">var Observer = new MutationObserver(function (mutations, instance) {</code></div>
<div class="line number11 index10 alt2"><code class="html spaces">    </code><code class="html plain">console.log(mutations);</code></div>
<div class="line number12 index11 alt1"><code class="html spaces">    </code><code class="html plain">console.log(instance);</code></div>
<div class="line number13 index12 alt2"><code class="html spaces">    </code><code class="html plain">mutations.forEach(function (mutation) {</code></div>
<div class="line number14 index13 alt1"><code class="html spaces">      </code><code class="html plain">console.log(mutation);</code></div>
<div class="line number15 index14 alt2"><code class="html spaces">    </code><code class="html plain">});</code></div>
<div class="line number16 index15 alt1"><code class="html spaces">  </code><code class="html plain">});</code></div>
<div class="line number17 index16 alt2"> </div>
<div class="line number18 index17 alt1"><code class="html spaces">  </code><code class="html plain">Observer.observe(ul, {</code></div>
<div class="line number19 index18 alt2"><code class="html spaces">    </code><code class="html plain">attributes: true</code></div>
<div class="line number20 index19 alt1"><code class="html spaces">  </code><code class="html plain">});</code></div>
<div class="line number21 index20 alt2"><code class="html spaces">  </code><code class="html plain">ul.setAttribute("class", "a");</code></div>
<div class="line number22 index21 alt1"><code class="html spaces">    </code><code class="html plain">ul.setAttribute("class", "b");</code></div>
<div class="line number23 index22 alt2"><code class="html spaces">    </code><code class="html plain">ul.removeAttribute("class");</code></div>
<div class="line number24 index23 alt1"><code class="html plain">}</code></div>
<div class="line number25 index24 alt2"><code class="html plain"></</code><code class="html keyword">script</code><code class="html plain">></code></div>
<div class="line number26 index25 alt1"><code class="html plain"></</code><code class="html keyword">head</code><code class="html plain">></code></div>
<div class="line number27 index26 alt2"><code class="html plain"><</code><code class="html keyword">body</code><code class="html plain">></code></div>
<div class="line number28 index27 alt1"><code class="html plain"><</code><code class="html keyword">div</code> <code class="html color1">id</code><code class="html plain">=</code><code class="html string">"box"</code><code class="html plain">></code></div>
<div class="line number29 index28 alt2"><code class="html spaces">  </code><code class="html plain"><</code><code class="html keyword">ul</code><code class="html plain">></code></div>
<div class="line number30 index29 alt1"><code class="html spaces">    </code><code class="html plain"><</code><code class="html keyword">li</code><code class="html plain">>蚂蚁部落</</code><code class="html keyword">li</code><code class="html plain">></code></div>
<div class="line number31 index30 alt2"><code class="html spaces">  </code><code class="html plain"></</code><code class="html keyword">ul</code><code class="html plain">></code></div>
<div class="line number32 index31 alt1"><code class="html plain"></</code><code class="html keyword">div</code><code class="html plain">></code></div>
<div class="line number33 index32 alt2"><code class="html plain"></</code><code class="html keyword">body</code><code class="html plain">></code></div>
<div class="line number34 index33 alt1"><code class="html plain"></</code><code class="html keyword">html</code><code class="html plain">></code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p>下面对代码进行一下分析，首先看运行控制台截图：</p>
<p><img src="https://www.softwhy.com/data/attachment/portal/201808/18/013616uv3s3vvev3x3fxs3.png" alt="a:3:{s:3:\"pic\";s:43:\"portal/201808/18/013616uv3s3vvev3x3fxs3.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}" title="aid"></p>
<p>当其他所有脚本代码都执行完毕之后，MutationObserver构造函数的回调函数才会被执行。</p>
<p>构造函数的第一个数组参数用来存放所有的变化，每一个成员都是MutationRecord类型。</p>
<div id="antzone_brush_box">
<div class="brush_box"> <span class="viewsource">纯文本查看 <span class="copycode">复制代码</span></span></div>
<div>
<div id="highlighter_24133" class="syntaxhighlighter notranslate javascript">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gutter">
<div class="line number1 index0 alt2">1</div>
<div class="line number2 index1 alt1">2</div>
<div class="line number3 index2 alt2">3</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="javascript plain">Observer.observe(ul, {</code></div>
<div class="line number2 index1 alt1"><code class="javascript spaces">  </code><code class="javascript plain">attributes: </code><code class="javascript keyword">true</code> <code class="javascript comments">//监听属性节点的变化</code></div>
<div class="line number3 index2 alt2"><code class="javascript plain">});</code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p>规定监听器将监听ul元素属性节点的变化。</p>
<div id="antzone_brush_box">
<div class="brush_box"> <span class="viewsource">纯文本查看 <span class="copycode">复制代码</span></span></div>
<div>
<div id="highlighter_623963" class="syntaxhighlighter notranslate javascript">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gutter">
<div class="line number1 index0 alt2">1</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="javascript plain">ul.setAttribute(</code><code class="javascript string">"class"</code><code class="javascript plain">, </code><code class="javascript string">"a"</code><code class="javascript plain">)</code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p>为ul元素添加一个class属性，并设置属性值为a；动作将被记录在mutations数组中。</p>
<div id="antzone_brush_box">
<div class="brush_box"> <span class="viewsource">纯文本查看 <span class="copycode">复制代码</span></span></div>
<div>
<div id="highlighter_177252" class="syntaxhighlighter notranslate javascript">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gutter">
<div class="line number1 index0 alt2">1</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="javascript plain">ul.setAttribute(</code><code class="javascript string">"class"</code><code class="javascript plain">, </code><code class="javascript string">"b"</code><code class="javascript plain">)</code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p>修改ul元素原来class属性值为b；动作将被记录在mutations数组中。</p>
<div id="antzone_brush_box">
<div class="brush_box"> <span class="viewsource">纯文本查看 <span class="copycode">复制代码</span></span></div>
<div>
<div id="highlighter_41481" class="syntaxhighlighter notranslate javascript">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gutter">
<div class="line number1 index0 alt2">1</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="javascript plain">ul.removeAttribute(</code><code class="javascript string">"class"</code><code class="javascript plain">);</code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p>删除ul元素上的class属性；动作将被记录在mutations数组中。</p>
<p>MutationRecord对象，直接看控制台截图：</p>
<p><img src="https://www.softwhy.com/data/attachment/portal/201808/18/013625ig6w7gljo0lz7p8h.png" alt="a:3:{s:3:\"pic\";s:43:\"portal/201808/18/013625ig6w7gljo0lz7p8h.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}" title="aid"></p>
<p><strong>监听指定属性的改变：</strong></p>
<p>如果不指定监听哪些属性，那么所有属性的改变都在监听范围之内。</p>
<p>Mutation Observer提供了监听指定属性的功能，代码实例如下:</p>
<div id="antzone_brush_box">
<div class="brush_box"> <span class="viewsource">纯文本查看 <span class="copycode">复制代码</span></span></div>
<div>
<div id="highlighter_505034" class="syntaxhighlighter notranslate html">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gutter">
<div class="line number1 index0 alt2">01</div>
<div class="line number2 index1 alt1">02</div>
<div class="line number3 index2 alt2">03</div>
<div class="line number4 index3 alt1">04</div>
<div class="line number5 index4 alt2">05</div>
<div class="line number6 index5 alt1">06</div>
<div class="line number7 index6 alt2">07</div>
<div class="line number8 index7 alt1">08</div>
<div class="line number9 index8 alt2">09</div>
<div class="line number10 index9 alt1">10</div>
<div class="line number11 index10 alt2">11</div>
<div class="line number12 index11 alt1">12</div>
<div class="line number13 index12 alt2">13</div>
<div class="line number14 index13 alt1">14</div>
<div class="line number15 index14 alt2">15</div>
<div class="line number16 index15 alt1">16</div>
<div class="line number17 index16 alt2">17</div>
<div class="line number18 index17 alt1">18</div>
<div class="line number19 index18 alt2">19</div>
<div class="line number20 index19 alt1">20</div>
<div class="line number21 index20 alt2">21</div>
<div class="line number22 index21 alt1">22</div>
<div class="line number23 index22 alt2">23</div>
<div class="line number24 index23 alt1">24</div>
<div class="line number25 index24 alt2">25</div>
<div class="line number26 index25 alt1">26</div>
<div class="line number27 index26 alt2">27</div>
<div class="line number28 index27 alt1">28</div>
<div class="line number29 index28 alt2">29</div>
<div class="line number30 index29 alt1">30</div>
<div class="line number31 index30 alt2">31</div>
<div class="line number32 index31 alt1">32</div>
<div class="line number33 index32 alt2">33</div>
<div class="line number34 index33 alt1">34</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="html plain"><!doctype html></code></div>
<div class="line number2 index1 alt1"><code class="html plain"><</code><code class="html keyword">html</code><code class="html plain">></code></div>
<div class="line number3 index2 alt2"><code class="html plain"><</code><code class="html keyword">head</code><code class="html plain">></code></div>
<div class="line number4 index3 alt1"><code class="html plain"><</code><code class="html keyword">meta</code> <code class="html color1">charset</code><code class="html plain">=</code><code class="html string">"utf-8"</code><code class="html plain">></code></div>
<div class="line number5 index4 alt2"><code class="html plain"><</code><code class="html keyword">meta</code> <code class="html color1">name</code><code class="html plain">=</code><code class="html string">"author"</code> <code class="html color1">content</code><code class="html plain">=</code><code class="html string">"http://www.softwhy.com/"</code> <code class="html plain">/></code></div>
<div class="line number6 index5 alt1"><code class="html plain"><</code><code class="html keyword">title</code><code class="html plain">>蚂蚁部落</</code><code class="html keyword">title</code><code class="html plain">></code></div>
<div class="line number7 index6 alt2"><code class="html plain"><</code><code class="html keyword">script</code><code class="html plain">></code></div>
<div class="line number8 index7 alt1"><code class="html plain">window.onload = function () {</code></div>
<div class="line number9 index8 alt2"><code class="html spaces">  </code><code class="html plain">var ul = document.querySelector("ul");</code></div>
<div class="line number10 index9 alt1"><code class="html spaces">  </code><code class="html plain">var Observer = new MutationObserver(function (mutations, instance) {</code></div>
<div class="line number11 index10 alt2"><code class="html spaces">    </code><code class="html plain">console.log(mutations);</code></div>
<div class="line number12 index11 alt1"><code class="html spaces">    </code><code class="html plain">console.log(instance);</code></div>
<div class="line number13 index12 alt2"><code class="html spaces">    </code><code class="html plain">mutations.forEach(function (mutation) {</code></div>
<div class="line number14 index13 alt1"><code class="html spaces">      </code><code class="html plain">console.log(mutation);</code></div>
<div class="line number15 index14 alt2"><code class="html spaces">    </code><code class="html plain">});</code></div>
<div class="line number16 index15 alt1"><code class="html spaces">  </code><code class="html plain">});</code></div>
<div class="line number17 index16 alt2"><code class="html spaces"> </code> </div>
<div class="line number18 index17 alt1"><code class="html spaces">  </code><code class="html plain">Observer.observe(ul, {</code></div>
<div class="line number19 index18 alt2"><code class="html spaces">    </code><code class="html plain">attributes: true,</code></div>
<div class="line number20 index19 alt1"><code class="html spaces">    </code><code class="html plain">attributeFilter: ["class"]</code></div>
<div class="line number21 index20 alt2"><code class="html spaces">  </code><code class="html plain">});</code></div>
<div class="line number22 index21 alt1"><code class="html spaces">  </code><code class="html plain">ul.setAttribute("class", "a");</code></div>
<div class="line number23 index22 alt2"><code class="html spaces">  </code><code class="html plain">ul.setAttribute("ant", "b");</code></div>
<div class="line number24 index23 alt1"><code class="html plain">}</code></div>
<div class="line number25 index24 alt2"><code class="html plain"></</code><code class="html keyword">script</code><code class="html plain">></code></div>
<div class="line number26 index25 alt1"><code class="html plain"></</code><code class="html keyword">head</code><code class="html plain">></code></div>
<div class="line number27 index26 alt2"><code class="html plain"><</code><code class="html keyword">body</code><code class="html plain">></code></div>
<div class="line number28 index27 alt1"><code class="html plain"><</code><code class="html keyword">div</code> <code class="html color1">id</code><code class="html plain">=</code><code class="html string">"box"</code><code class="html plain">></code></div>
<div class="line number29 index28 alt2"><code class="html spaces">  </code><code class="html plain"><</code><code class="html keyword">ul</code><code class="html plain">></code></div>
<div class="line number30 index29 alt1"><code class="html spaces">    </code><code class="html plain"><</code><code class="html keyword">li</code><code class="html plain">>蚂蚁部落</</code><code class="html keyword">li</code><code class="html plain">></code></div>
<div class="line number31 index30 alt2"><code class="html spaces">  </code><code class="html plain"></</code><code class="html keyword">ul</code><code class="html plain">></code></div>
<div class="line number32 index31 alt1"><code class="html plain"></</code><code class="html keyword">div</code><code class="html plain">></code></div>
<div class="line number33 index32 alt2"><code class="html plain"></</code><code class="html keyword">body</code><code class="html plain">></code></div>
<div class="line number34 index33 alt1"><code class="html plain"></</code><code class="html keyword">html</code><code class="html plain">></code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p>上面代码只会监听class属性的变化。</p>
<p>attributeFilter属性值是一个数组，可以规定要监听的属性名称。</p>
</div><br><br>
来源：https://www.cnblogs.com/bigben0123/p/13360438.html

頁: [1]

琼殿技术论坛's Archiver

JavaScript监听属性改变