jquery 监听dom元素发生变化

  1. DOMNodeInserted事件


<html>
	<head>
		<meta charset="utf-8">
		<title>DOMNodeInserted事件title>
		<style>
			#container {
      
				min-height: 120px;
				border: 1px solid #aaa;
			}
		style>
	head>
	<body>
		<div id="container">div>
		<button type="button" id="btn">add "aaa" for divbutton>
 
 
		<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js">script>
		<script>
			// 添加事件
			$("#btn").click(function() {
      
				$("#container").append("aaa");
			});
			// 监听事件
			$("#container").bind("DOMNodeInserted", ()=>{
      
				// alert("div出发了change事件");
				console.log('div出发了change事件')
			});
		script>
	body>
html>
  1. change事件


	<head>
		<meta charset="utf-8">
		<title>change事件title>
		<style>
			#container {
      
				min-height: 120px;
				border: 1px solid #aaa;
			}
		style>
	head>
	<body>
		<div id="container">div>
		<button type="button" id="btn">add "aaa" for divbutton>
 
 
		<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js">script>
		<script>
			// 添加事件
			$("#btn").click(function() {
      
				$("#container").append("aaa").change();
			});
			// 监听事件
			$("#container").bind("change", ()=>{
      
				// alert("div出发了change事件");
				console.log('div出发了change事件')
			});
		script>
	body>
html>

效果:

jquery 监听dom元素发生变化_第1张图片

你可能感兴趣的:(jquery,dom,监听dom,监听元素,变化)