dom监听事件class

<!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>
猜你喜欢
