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

版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/qq_35423431/article/details/94717989

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)
}
})

`