JavaScript实现js文本输入监听并执行指定函数

JavaScript实现js文本输入监听并执行指定函数，在js运用中如何能实时跟踪用户输入的信息，并执行指定函数来预处理一些逻辑呢，需要用到js中的“addEventListener”方法。

本文介绍的实现效果是：当input被输入内容，js可以监听到输入事件。

html代码

	<main>
		<section> <img id="qrious">
			<form autocomplete="off">
				<label> 背景色
					<input type="text" name="background" value="#ffffff" id="color2">
				</label>
			</form>
		</section>
	</main>

js代码

<script>
	  (function() 
	  {
	    var $background = document.querySelector('main form [name="background"]')
		// change input
	    $background.addEventListener('change', function() {
			console.log("change监听内容改变了");
	    })
		$background.addEventListener('input', function() {
			console.log("input监听内容改变了");
		})
	  })()
</script>

注意事项：

首先使用document.querySelector来确定需要操作的对象，本文中需要监听的对象是main标签里的form标签中的 input，input的name属性为：background；然后利用对象下的addEventListener函数来监听input类型的事件，监听到用户输入时就打印input监听内容改变了。
同理，可以利用change来监听input类型为color的颜色变化。