原生js和jquery实现元素绑定，给li添加绑定

1、绑定事件

 // 原生javascript绑定事件
 // 1️⃣
 	function addHandler(targetObj, event, func)
    {
        if (targetObj){
            if (targetObj.addEventListener) {
            	targetObj.addEventListener(event, func, false)
            }
            else if (targetObj.attachEvent){
            	targetObj.attachEvent("on" + event, func)
            }
            else targetObj["on" + event] = func;
        } 
    }
    addHandler(element,"change",function(){})
// 2️⃣ 
	element.onchange = function() {}
// 3️⃣ 在DOM元素上调用onChange方法
	<input type="text" id="email" name="email" onchange="emailHandle()">
	function emailHandle() {}

// jquery绑定事件
// 1️⃣ 直接调用change事件
element.change(function(){})
// 2️⃣ 使用绑定方法on，给元素绑定change事件
element.on("change", function(){})

绑定方法on，之前遇到过一种场景，在使用jquery的老项目中，需要给一个之后添加的DOM元素绑定一个事件，因为元素还未存在，不能给元素绑定事件，所以只能通过已存在的父元素给其绑定事件。还有种情况，当给很多相同的元素添加事件，比如说li，最好是通过事件委托，委托给父级元素，减少性能的消耗

比如：点击button，给ul添加li元素，同时给li元素绑定点击事件

	<ul></ul>
	<button class="addLi">add</button>
	-----------------------------------------------------
	$(".addLi").click(function(){
		$("ul").append("<li>"+new Date()+"</li>")
	})
	$("ul").on("click", "li", function(){
		alert($(this).text())
	})
// 直接使用$("li").click(function(){alert($(this).text())})是不能触发点击事件的
// 给li添加click事件时，li还未存在，并不能绑定上
	----------------------------------------------------
	var ul = document.getElementsByTagName("ul")
	var btn = document.getElementsByClassName("addLi")
	// button添加li元素
	btn[0].onclick = function(){
		var li = document.createElement("li")
		var liText = document.createTextNode(new Date())
		li.appendChild(liText)
		ul[0].appendChild(li)
	}
	// li元素click事件
	ul[0].addEventListener("click", function(event){
		var target = event.target
		if(target.nodeName == "LI"){
			alert(target.innerText)
		}
	})

`