好的废话不多说 我直接给出一份演示
现在我要对id为demo的节点的后代的拥有class test的节点进行监听
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#demo .test{
width: 10px
height: 10px
background-color: #00AEEF
margin: 5px
}
</style>
</head>
<body>
<div id="demo">
</div>
<script>
//获取所有的父节点
function getParentNode(Obj,Arr){
if(!Arr){
var Arr=[]
}
Arr.push(Obj)
if(Obj&&Obj.parentNode){
getParentNode(Obj.parentNode,Arr)
}
return Arr
}
//判断是否拥有class
function hasClass(e,v){
if(!e.getAttribute)return false
if(e.getAttribute("class")==null)return false
var allClass=e.getAttribute("class").split(" ")
if(allClass.indexOf(v)!=-1){return true}else{return false}
}
//事件委托 现在我要对id为demo的节点的后代的拥有class test的节点进行监听
//添加事件
document.getElementById("demo").addEventListener("click",function(e){
e=e||(typeof window.event=="undefined"?event:window.event)//这里对事件对象进行了一个兼容
var target=typeof e.srcElement=="undefined"? e.target: e.srcElement
var path=getParentNode(target)
for(var i=0i<path.lengthi++){
if(hasClass(path[i],"test")){
clickTest.call(path[i],e)
}
}
function clickTest(e){
console.log("你点了这个节点")
console.log(e)
console.log(this)
}
})
document.getElementById("demo").innerHTML="<div class='test'><span>"+
"asdasd</span></div>"
</script>
</body>
</html>
可以看到当我执行domObj.innerHTML=xxx时我是没有对class为test进行添加事件的 但是我点击它执行的函数就是clickTest
具体原理自己看代码吧 我就不详细说了
当使用JavaScript点击元素，但光标不移动时，可能是因为没有正确设置光标位置。可以通过设置光标位置来解决这个问题，例如，可以使用JavaScript的selectionStart和selectionEnd属性来设置光标的位置。另外，也可以使用JavaScript的focus()方法来设置光标的位置，这样就可以让光标移动到指定的位置。此外，也可以使用CSS的cursor属性来设置光标的位置，这样就可以让光标移动到指定的位置。总之，只要正确设置光标位置，就可以解决JavaScript点击元素时光标不移动的问题。
