dom監聽事件class
阿新 • • 發佈：2018-11-12
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>dom監聽事件class</title>
<!--DOMNodeInserted 和 DOMNodeRemoved 事件-->
<link rel="stylesheet" href="layui2.4.3/css/layui.css" media="all">
<script src="layui2.4.3/layui.js"></script>
<script>
//Demo
layui.use(['layer','form'], function(){
var form = layui.form;
var $ = layui.jquery;
//console.info($(document).html());
$(document).ready(function(e) {
console.info("k");
});
function classEvent(className,searchClassName,callback)
{
var options={
attributes:true,//觀察node物件的屬性
attributeFilter:['class']//只觀察class屬性
};
var mb=new MutationObserver(function(mutationRecord,observer){
var targetClassName = mutationRecord[0].target.className;
if( targetClassName.indexOf(searchClassName) != -1)
{
//檢查到包含此class
callback();
}
});
$("body").bind('DOMNodeInserted', function(e) {
var target= $(className);
if(target.length > 0)
{
for(var i = 0;i<target.length;i++)
mb.observe(target.get(i),options);
}
});
}
classEvent(".myB","kkk",function(){
//console.info("myB 下有 kkk 的class");
layer.msg("class kkk");
});
//var target=document.getElementById('k');
/*var options={
attributes:true,//觀察node物件的屬性
attributeFilter:['class']//只觀察class屬性
};
var mb=new MutationObserver(function(mutationRecord,observer){
debugger;
console.log(mutationRecord);
console.log(observer);
console.info("className modify: "+mutationRecord[0].target.className);
var targetClassName = mutationRecord[0].target.className;
var SearchClassName="kkk";
if( targetClassName.indexOf(SearchClassName) != -1)
{
console.info("包含 class:"+SearchClassName);
}
});
*/
/*
$("body").bind('DOMNodeInserted', function(e) {
console.info('element now contains: id:' + $(e.target).attr("id") + " content:" + $(e.target).html());
var thisId = $(e.target).attr("id");
var target=document.getElementById(thisId);
var target= $("body");
//target = $(".myB");
console.info("target.length"+target.length);
//debugger;
if(target.length > 0)
{
for(var i = 0;i<target.length;i++)
mb.observe(target.get(i),options);
}
});
*/
//layui-table-tool-panel
//layui-form-checkbox layui-form-checked
$("body").append("<div id='myA'>abc</div>");
$("#myA").html("kkk");
$("#myA").append("<div id='myB'>bbb</div>");
$("#myB").attr("class","kkk");//屬性變化 DOMNodeInserted 不管 這個就是節點插入的時候有反饋
$("#myB").remove();
$("#k").attr("class","jjj");
$("#k").addClass("jj001");
$("#testBtn").click(function(e) {
//再次新增 看看事件還有嗎 應該是沒有了
$("#myA").append("<div class='myB'>bbb</div>");
});
$("#classBtn").click(function(e) {
//再次新增 看看事件還有嗎 應該是沒有了
$(".myB").addClass("kkk");
$("body").addClass("jjj333");
});
});
</script>
<script>
</script>
</head>
<body>
<div id="k"></div>
<bottom class="layui-btn" id="testBtn">新增節點</bottom>
<bottom class="layui-btn" id="classBtn">更改樣式</bottom>
</body>
</html>