前端笔记之JavaScript（十）深入JavaScript节点&DOM&事件

一、DOM

JavaScript语言核心。变量的定义、变量的类型、运算符、表达式、函数、if语句、for循环、算法等等。这些东西都属于语言核心，下次继续学习语言核心就是面向对象了。JavaScript能做非常多的事情：DOM开发、Ajax开发、Canvas开发、NodeJS开发、前端框架（React、Vue、Angular等等）、HTML5开发。这些都需要语言核心的知识。

DOM开发说白了就是浏览器中的页面效果开发，在2011年之前，DOM开发占据了前端开发工程师的90%的工作；但是现在，DOM开发的工作比重已经降到了10%以下。换句话说，2011年之前，前端 = 做特效的；2011年之后，前端要负责得到后台的数据接口，用前端MVC逻辑分层开发前端组建、界面、功能，还要写HTML5，还要做canvas动画！

上层的框架屏蔽了下层的语言的一些麻烦、不方便的东西，并且提供更方便的API。

jQuery就是干这个事情的，把JS中的不方便封装起来，暴露的API都是非常简便的。

jQuery的哲学就是DOM编程领域的霸主，操作DOM节点、绑定监听、运动、css样式、Ajax等等都有封装。

工作上都是用jQuery，如果不用jQuery也是用类似的东西。没有人会不用轮子去开发页面效果。

JavaScript中Library表示“库”，如果这个库的功能很强大，甚至颠覆了传统编程的语法、行文习惯，我们就可以叫做“框架”。

---

1.1 DOM是什么

文档对象模型 (DOM，Document Object Model) 是 HTML 和 XML 文档的编程接口。它给文档（结构树）提供了一个结构化的表述并且定义了一种方式—程序可以对结构树进行访问，以改变文档的结构，样式和内容。 DOM 提供了一种表述形式— 将文档作为一个结构化的节点组以及包含属性和方法的对象。从本质上说，它将 web 页面和脚本或编程语言连接起来了。

到底什么是DOM？就是你可以像操作对象一样操作HTML页面，而不是操作字符串。

DOM将 web 页面和脚本或编程语言连接起来了。

回看一下我们之前学习的DOM操作，都在干嘛？我们在开发特效，但是微观的看，实际上在进行：

1） 得到HTML节点

2） 改变节点的属性

3） 改变节点的样式

4） 修改节点、删除节点、增加节点

5） 节点之间的关系

---

1.2原生JavaScript得到节点

 document.getElementById('box');

 document.getElementsByTagName('p');

以上两是全线浏览器都兼容的得到元素方法。

以下这些得到元素的方法都不兼容IE678。 

document.getElementsByName('aaa')[0]  //通过name属性得到元素们
document.getElementsByClassName('pp') //通过类名得到元素们
document.querySelector('#box');
document.querySelectorAll('#box p');  //通过选择器得到元素们

jQuery是DOM开发的王者！帮我们解决了元素选择的兼容问题。

jQuery底层很强大，比如$('.par1')机制不是getElementsByClassName()，而是在遍历所有节点，选择类名有par1的项。

---

二、原生JavaScript节点关系

在jQuery中学习parent()、children() 、siblings()、next()、prev()等等节点关系，JS中也有对应的属性。

原生JS提供的节点关系很少：

childNodes、firstChild、lastChild、parentNode、nextSibling、previousSibling

 

常见的nodeType值：

 1-普通元素节点、比如div、p等等

 2-属性节点

 3-文本节点

 8-注释节点

 9-document节点

 10-文档DTD

 

想要查看某一个元素的节点类型，直接读取它的nodeType属性即可。

改变nodeType为3的文本节点的内容，要改变他的nodeValue属性

 

2.1 childNodes儿子节点

childNodes在IE6、7、8和高级浏览器不一致，高级浏览器认为所有的换行为空文本节点，而IE678无视这个空文本节点。

div中没有文本节点，此时应该是4个节点，但是IE9、Chrome、火狐会认为有9个节点、IE8认为有4个节点。

高级浏览器会把空文本当做一个节点，标签前后的空文本也被算作一个。

注释的前后算不算空文本节点，各个浏览器有不同的解释。所以用节点的时候，一定要去过滤、判断节点的nodeType是不是1。

<div id="box">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</div>

 oBox.childNodes.length;  //Chrome数值9、IE678是4

为解决兼容性问题（到底空文本算不算儿子，所以要封装函数来解决）：

可以利用nodeType是不是1来过滤文本节点、注释节点等，编写一个函数，得到一个标签真正的子节点。

jQuery也有这层过滤：

//封装一个children函数，这个函数能返回obj对象的所有真正儿子节点
function chidlren(obj,num){
    var arr = []; //存储所有儿子
    //遍历所有的节点
    for(var i = 0; i < obj.childNodes.length;i++){
        //遍历的过程，寻找真正的HTML儿子节点、过滤文本、注释等节点
        //判断节点类型是不是1
        if(obj.childNodes[i].nodeType == 1){
            arr.push(obj.childNodes[i]); //如果是儿子节点就插入数组中
        }
    }
    //return arr;
    //返回的是：如果用户传入了num，返回某一个儿子，如果没有num，返回所有儿子
    return num ? arr[num] : arr;
}
chidlren(oBox)[2].style.backgroundColor = 'red';
chidlren(oBox,3).style.backgroundColor = 'red';

---

2.2 parentNode父亲节点

parentNode属性表示父亲节点。任何节点的parentNode的nodeType一定是1，也就是说父亲节点一定是标签节点。文本节点、注释节点没有儿子。

var input = document.getElementsByTagName('input');
for(var i = 0;i < input.length;i++){
   //当点击某个input时，如果自己被选中，此时改变父亲的颜色为绿色，否则为白色
   input[i].onclick = function(){
       if(this.checked){
           this.parentNode.style.backgroundColor = 'green';
       }else{
           this.parentNode.style.backgroundColor = 'white';
       }
   }
}

---

2.3 previousSibling和nextSibling兄弟节点

上一个兄弟previousSibling、下一个兄弟nextSibling。同样的，文本节点也属于节点，注释也是节点，所以一个节点的上一个兄弟可能是文本、注释节点。原生JS中没有提供类似nextAll()、prevAll()、siblings()方法，如果节点没有上一个兄弟或下一个兄弟、返回null。

 

 console.log(pp.previousSibling.nodeType)  

 console.log(pp.nextSibling.nodeType)

var pp = document.getElementById("pp");
//返回obj的前面一个兄弟
function prevSibling(obj){
    //开始遍历obj节点的前面，直到遇见一个nodeType为1的节点
    var prev = obj;
    //循环遍历。注意while的条件是一个赋值语句！赋值语句也有表达式的
    while(prev = prev.previousSibling){
        if(prev.nodeType == 1){
            return prev;
        }
    }
    return null;
}
//得到真正的后面兄弟
function nextSibling(obj){
    //开始遍历obj节点的前面，直到遇见一个nodeType为1的节点
    var next = obj;
    while(next = next.nextSibling){
        if(next.nodeType == 1){
            return next;
        }
    }
    return null;
}
//返回obj的前面所有兄弟
function prevAll(obj){
    //开始遍历obj节点的前面，直到遇见一个nodeType为1的节点
    var prev = obj;
    var arr = [];
    while(prev = prev.previousSibling){
        if(prev.nodeType == 1){
            arr.push(prev);
        }
    }
    return arr;
}
prevSibling(pp).style.background = "red";
nextSibling(pp).style.background = "green";
prevAll(pp)[1].style.background = "green";

---

三、原生JavaScript DOM节点操作

HTML节点我们原来最多就是改改HTML属性，比如改改src属性；或者改改css样式，比如.style或者.css()。

现在的问题是，我们要增加节点、删除节点、移动节点、替换节点。

 

---

3.1 createElement()创建和appendChild()添加

创建节点的方法： create创建，Element元素。接收一个参数，就是创建的标签是什么。

 document.createElement()

追加节点的方法：创建出来的节点不在DOM树上，所以就应该用appendChild()来添加到DOM树上：

 父亲.appendChild(新儿子);

var btn = document.getElementById('btn');
var txt = document.getElementById('txt');
var ul = document.getElementsByTagName('ul')[0];
btn.onclick = function(){
   //创建一个li标签，用变量oLi 来表示，创建除了的节点不是任何节点的儿子（没有在DOM树上）
   var oLi = document.createElement('li');
   oLi.innerHTML = txt.value; //改变这个节点的内容
   //把新创建的节点，追加到DOM树上
   ul.appendChild(oLi);
}

appendChild()一般来说就是用来追加新创建的节点，如果试图把页面上已经有的节点，appendChild()到别的地方，那么这个节点将移动，也就是说，同一个节点不可能在页面上两个地方出现。

比如：

<div id="box1">
    <p id="xiaoming">我是小明</p>
</div>
<div id="box2">

</div>
<script type="text/javascript">
     var box2 = document.getElementById('box2');
     var xiaoming = document.getElementById('xiaoming');
     box2.appendChild(xiaoming);
</script>

以上将把xioaming移动到box2里面。

用innerHTML创建节点：

事实上，工作的时候很少用createElement。因为innerHTML足够好用，innerHTML也可以用来创建节点，甚至效率createElement还高。

var year = document.getElementById('year');
for(var i = 1950; i <= 2018;i++){
   //创建节点
   var op = document.createElement('option');
   //改变创建出来的节点内容
   op.innerHTML = i;
   //上DOM树
   year.appendChild(op); // 父亲.appendChild(新儿子);
}

innerHTML创建：

for(var i = 1950; i <= 2018; i++) {
    year.innerHTML += '<option>'+i+'</option>';
}

JavaScript是动态变量：

var oBox = document.getElementById('box');
//得到box里面所有的p，现在box没有p，所以ops是一个空数组
var ops = oBox.getElementsByTagName('p');
var np = document.createElement('p'); //创建节点
oBox.appendChild(np); //追加节点
var np = document.createElement('p'); //创建节点
oBox.appendChild(np); //追加节点
var np = document.createElement('p'); //创建节点
oBox.appendChild(np); //追加节点
var np = document.createElement('p'); //创建节点
oBox.appendChild(np); //追加节点
var np = document.createElement('p'); //创建节点
oBox.appendChild(np); //追加节点
//这里弹出多少？初学者认为弹出0，因为先得到数组p，然后创建节点，节点又没有往数组里面push，所以应该ops数不变才对。
//但是JS中存储DOM节点的变量是动态，不是一个瞬时照片，而是一个有生命的动态对象，当oBox里面的p标签变化时，ps也变化
console.log(ops.length)

---

3.2 insertBefore()添加

appendChild是把新节点插入在父亲的所有子节点的后面，也就是说添加的节点就是父亲的最后一个儿子。

我们可以在任意一个位置添加子节点：会在原有标杆儿子之前插入

 父亲.insertBefore(新儿子,原有标杆儿子)

var btn = document.getElementById('btn');
var txt = document.getElementById('txt');
var ul = document.getElementsByTagName('ul')[0];
var lis = document.getElementsByTagName('li');
btn.onclick = function(){
   //创建一个li标签，用变量oLi 来表示，创建除了的节点不是任何节点的儿子（没有在DOM树上）
   var oLi = document.createElement('li');
   oLi.innerHTML = txt.value; //改变这个节点的内容
   //把新创建的节点，追加到DOM树上
   //在lis[0]的前面插入
   ul.insertBefore(oLi,lis[0]);
}

如果想每次都在开头添加，那么就是：

 ul.insertBefore(oLi,lis[0]);

lis这个变量是动态的，这次添加的li，下回就是lis[0]。

---

3.3 removeChild()删除

父亲.removeChild(儿子);
<ul>
    <li>吃饭 <a href="###">删除</a></li>
    <li>睡觉 <a href="###">删除</a></li>
    <li>打豆豆 <a href="###">删除</a></li>
</ul>
<script type="text/javascript">
     var ul = document.getElementsByTagName('ul')[0];
     var lis = document.getElementsByTagName('li');
     var as = document.getElementsByTagName('a');

     for(var i = 0;i< as.length;i++){
        as[i].onclick = function(){
            ul.removeChild(this.parentNode);

            //如果要自杀，也要找到爸爸
            //this.parentNode.removeChild(this);
        }
     }
</script>

如果要自杀，也要找到爸爸:

 this.parentNode.removeChild(this);

---

3.4 replaceChild()替换

替换节点：

 父亲.replaceChild(新儿子,旧儿子)

<div>
    <p>赵丽颖</p>
    <p id="xh">小黑</p>
    <p>迪丽热巴</p>
</div>
<script type="text/javascript">
     var oBox = document.getElementsByTagName('div')[0]
     var xh = document.getElementById('xh');

     //创建节点，孤儿节点
     var op = document.createElement('p');
     op.innerHTML = '朱老师'; //更改op的内容
     oBox.replaceChild(op,xh);
</script>

---

3.5 clone()克隆

克隆节点，参数true表示深度克隆，节点里面的所有内容和事件一同复制。

复制之后的节点是个孤儿节点，所以也要使用appendChild()等方法来添加上DOM树。

 克隆对象.cloneNode(true)

<div id="box1">
    <ul>
        <li><span>赵丽颖</span></li>
        <li><span>迪丽热巴</span></li>
        <li><span>柳岩</span></li>
        <li><span>志玲姐姐</span></li>
    </ul>
</div>
<div id="box2">

</div>
<script type="text/javascript">
     var box1 = document.getElementById('box1');
     var box2 = document.getElementById('box2');
     var ul = document.getElementsByTagName('ul')[0];
     var lis  = document.getElementsByTagName('li');

     //克隆li和li的所有后代(要加true)，然后追加到ul中
     //ul.appendChild(lis[0].cloneNode());  //克隆第0个li
     box2.appendChild(ul.cloneNode(true)); //克隆ul追加到box2中
</script>

---

四、事件监听

一堆理论知识正要来袭。

4.1事件流

我们考虑一个结构，三个div嵌套，点击最内层的div，我们点击了谁？仅仅点击了最内层div吗？不是就像手指放在到一个同心圆中，实际上手指触碰到了任何一个圆。

点击最内层的div，实际上浏览器会认为我们点击了所有的盒子，甚至于body、document、window。

 

为了描述事件的传播，人为规定了一个事件的传播方向，称为“事件流”。两个阶段：事件捕获阶段，事件冒泡阶段。

“事件流”描述的是页面上各个元素接收事件的顺序。

 

---

4.2 DOM0级事件监听

DOM分级别，DOM0级、1级、2级、3级，是不同的标准，标准一直在升级。

之前学习的on开头的语法添加事件，称为“DOM0级事件”。

事件的触发一定是按照事件流的顺序，由于DOM0级只能监听冒泡阶段，所以顺序是：box3→box2→box1→body→document→window 如果改变监听顺序，弹出顺序不变。

box1.onclick = function(){ alert('我是box1');}
box2.onclick = function(){ alert('我是box2');}
box3.onclick = function(){ alert('我是box3');}
document.body.onclick = function(){alert('我是body')}
document.onclick = function(){alert('我是document')}
window.onclick = function(){alert('我是window')}

这种监听写法，就是DOM0级，就是把onclick当做属性添加给了div元素。

这种事件添加方法，只能监听冒泡过程，不能监听事件捕获阶段。

 

DOM0级事件处理函数中，this指的是触发事件的DOM元素，就是事件传播到的这个元素。

DOM0级事件处理函数中，如果同一个对象，同一个事件名，绑定多个监听，后面写的覆盖前面写的。

 box1.onclick = function(){ alert('我是box1');}

 box1.onclick = function(){ alert('我是box1，后面写的');}

DOM0级事件，IE6、7事件只能冒泡到document，IE8只能冒泡body，不能继续冒泡到window。也就是说不能给window对象添加事件。

---

4.3 DOM2级事件监听

DOM1级规范中，没有对事件进行改动，所以没有DOM1级的事情

DOM2级做了新的规范，不用on**来绑定监听了，而是用一个方法

W3C推出了addEventListener()函数，add添加、event事件，listener监听

它接收三个参数：事件，函数，是否监听捕获阶段

 元素.addEventListener(事件,事件处理函数,是否添加到捕获阶段)

第一个参数：事件名不用谢on。（click、mouseover）

第二个参数：函数可以是匿名函数，也可以是有名函数

第三个参数：布尔值，true表示监听捕获，false表示监听冒泡阶段

box1.addEventListener('click',function(){
   alert('我是box1的捕获阶段')
},true);

第三个参数是true，表示监听box1的捕获阶段的单击事件。

要记住true表示捕获，false冒泡阶段：口诀：true上，false下。

box1.addEventListener('click',function(){
   alert('我是box1的捕获阶段')
},true);
box2.addEventListener('click',function(){
   alert('我是box2的捕获阶段')
},true);
box3.addEventListener('click',function(){
   alert('我是box3的捕获阶段')
},true);
box1.addEventListener('click',function(){
   alert('我是box1的冒泡阶段')
},false);
box2.addEventListener('click',function(){
   alert('我是box2的冒泡阶段')
},false);
box3.addEventListener('click',function(){
   alert('我是box3的冒泡阶段')
},false);

box1的捕获→box2的捕获→box3的捕获→box3的冒泡→box2的冒泡→box1的冒泡

坑：最内层的box3，谁先写就谁先执行，也就是说对于最内层的box3，就不区分冒泡和捕获了，对于不少罪内层的元素来说，改变事件监听的顺序，不会影响执行结果，先捕获，后冒泡。

 

DOM2级事件中，如果给同一个元素，同一个事件名，同一个阶段添加多个事件监听，彼此不会覆盖，先写的先执行。

box1.addEventListener('click',function(){
   alert('我是box1的冒泡阶段A')
},false);
box1.addEventListener('click',function(){
   alert('我是box1的冒泡阶段B')
},false);
box1.addEventListener('click',function(){
   alert('我是box1的冒泡阶段C')
},false);

弹出顺序是：A→B→C

DOM2级事件监听中，this指的是触发事件的这个元素，就是事件传播到的这个元素。

---

DOM2级小测试-看看执行顺序：正确答案在下篇文章。

小题目：页面box1最大，嵌套box2、box3，点击box3弹出顺序

box2.onclick = function(){
   alert('A');
}
box2.onclick = function(){
   alert('B');
}
box2.addEventListener('click',function(){
   alert('C')
},false);
box2.addEventListener('click',function(){
   alert('D')
},false);
box2.addEventListener('click',function(){
   alert('E')
},true);
box2.addEventListener('click',function(){
   alert('F')
},true);
box3.addEventListener('click',function(){
   alert('G')
},false);
box3.onclick = function(){
   alert('H')
}
box3.addEventListener('click',function(){
   alert('I')
},true);

---

4.4低版本IE事件监听

IE6、7、8不支持addEventListener()方法，支持attachEvent()。

box1.attachEvent('onclick', function(){
   alert(1)
});

第一个参数：必须写on，和addEventListener不一样

第二个参数：事件处理函数

没有第三个参数，不能自由选择添加到什么阶段，永远是冒泡阶段，也就是说IE678不能监听捕获阶段。

box1.attachEvent('onclick', function(){
   alert('我是1a');
});
box1.attachEvent('onclick', function(){
   alert('我是1c');
});
box1.attachEvent('onclick', function(){
   alert('我是1b');
});
box2.attachEvent('onclick', function(){
   alert('我是2');
});
box3.attachEvent('onclick', function(){
   alert('我是3');
});

比较搞笑，如果给同一个元素添加多个事件名相同的监听，不互相覆盖，但是倒着执行，先执行后写：

box1.attachEvent('onclick', function(){
   alert('我是a');
});
box1.attachEvent('onclick', function(){
   alert('我是b');
});
box1.attachEvent('onclick', function(){
   alert('我是c');
});

弹出c、b、a

最诡异是，this永远是window对象而不是事件传播到的元素。

box1.attachEvent('onclick', function(){
   alert(this === window);
});

所以最正确的工作实践，就是用DOM0级事件监听方法，除非基于特别充分的理由，否则不用DOM2级。什么时候理由充分用DOM2级呢？比如一些新兴事件，如手机事件：touchstart、touchmove、touchend事件等等。只能用DOM2级。

上面学习的就是一些理论知识，总结一下：

事件流永远是先下（捕获）后（冒泡），但是不同监听方式，决定了监听那一部分。

面试意义大于实际意义！

jQuery中用的就是DOM2级，也有轮子，jQuery事件同名不会被覆盖。

---

4.5事件监听移除

DOM0级事件监听的移除很简单，直接把事件属性赋值给null即可。

var box1 = document.getElementById('box1');
box1.onclick = function(){
   alert('你好，再次点击就没有效果了');
   box1.onclick = null; //移除事件监听
}

DOM2级事件监听移除，必须指名道姓移除，也就是说，如果是匿名函数添加的事件监听，是不可能去掉的。

添加的时候要有名字：

box1.addEventListener('click',function fun(){
   alert('你好');
   box1.removeEventListener('click',fun,true);
},true);

点击按钮后，移除box1的事件监听：

btn.onclick = function(){
   box1.removeEventListener('click',fun,true);
}

IE6、7、8用detachEvent即可，同样，也必须起名。

box1.attachEvent('onclick',fun)
function fun(){
   alert('你好');
}
btn.onclick = function(){
   box1.detachEvent('onclick',fun);
}

---

五、事件对象event

这里的知识就不是理论了 ，有实战价值。

5.1 event兼容性问题

在任何事件中，都有事件对象event。浏览器会往事件处理函数中，传入一个实参，就是事件对象，里面封装了你这次触发事件（点击、鼠标移入、移出、键盘按下）的细节。比如鼠标位置、是否按下某个键等等。

一般用变量event来接收，注意，不是必须的，名字可以改。

所有事件的细节，都被封装到event对象里面。

比如clinetX、clinetY就是这次鼠标点击的位置。

先说兼容性问题，IE678中，event这事件对象不是实参，而是全局变量，系统会在每一个事件发生的时候，都去改变这个全局变量的值：

box.onclick = function(){  //圆括号不能写event，如果写了，就遮蔽了全局的event
   alert(event.clientX)
}

兼容写法：

box.onclick = function(event){
   //因为在Chrome中event是实参，IE678events全局变量，所以用或的短路语法，它支持哪个用哪个
   var event = event || window.event;
   alert(event.clientX)
}

---

5.2事件对象属性

 event.type      返回事件类型，没有on，比如“click”

 event.target    返回你点击的最小哪个元素，即使这个元素身上没有监听，也返回它

 event.currentTarget  返回自己，this一定和它是同一个元素，都是自己

 event.bubbles     返回布尔值，表示这个事件是否冒泡

●bubbles属性，表示事件是否冒泡

box1.onmouseover = function(event){
   var event = event || window.event;
   console.log(event.bubbles); //表示是否冒泡
}

基本上所有事件这个属性都是true，表示这个事件冒泡，但是要记住：

 onmouseover的event.bubbles是true，表示冒泡

 onmouseout的event.bubbles是true，表示冒泡

 onmouseenter的event.bubbles是false，表示不冒泡

有两个事件不冒泡：

 onmouseenter和mouseleave的event.bubbles是false，不冒泡

onmouseenter和mouseleave这两个事件IE678910全面兼容！反而是Chrome30之前不兼容，但是现在可以当做全面兼容。它们两个事件是著名天生不冒泡的，当一个内部元素鼠标进入了，会执行这个元素的事件处理函数，但是事件捕获继续往外层传播。它的外层盒子不会触发onmouseenter事件。

box1.onmouseenter = function(event){
    alert('鼠标进入了box1')
}
box2.onmouseenter = function(event){
    alert('鼠标进入了box2')
}
box1.onmouseout = function(event){
    alert('鼠标离开了box1')
}
box2.onmouseout = function(event){
    alert('鼠标离开了box2')
}

onmouseenter和mouseleave比onmouseover和onmouseout好用

// $('#box').mouseenter(function(){
//    $(this).children('.mask').slideDown();
// });
// $('#box').mouseleave(function(){
//    $(this).children('.mask').slideUp();
// });
$('#box').mouseover(function(){
   $(this).children('.mask').slideDown();
});
$('#box').mouseout(function(){
   $(this).children('.mask').slideUp();
});

●target、srcElement属性，表示事件发生的最内层元素

chrome同时支持下面2个属性，IE只支持srcElement：

 var target = event.target || event.srcElement;

用这个属性可以优化代码效率，可以制作“事件委托”。把子元素的事件，委托给父亲，父亲通过event.target来判断是谁触发了事件。不使用事件委托，我们将会有很多事件监听；使用事件委托，事件监听只有1个。提升了页面的效率。

box1.onclick = function(event){
   var event = event || window.event;
   var target = event.target || event.srcElement;
   alert(target.id)
}

事件委托：

比如，小圆点添加监听，不要给所有li，直接给ol，让ol的event.target这个元素有cur

<body>
    <ol>
        <li class="cur">0</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ol>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    $('ol').mouseover(function(event){
        var event = event || window.event;
        //得到触发事件的最小元素
        var target = event.target || event.srcElement;
        //让触发事件的元素添加cur
        $(target).addClass('cur').siblings().removeClass('cur');
    });
</script>

当页面上有大量的重复元素要添加监听的时候，比如100/200个，一定要注意事件委托。

window.onload = function(){
  var oUl = document.getElementById("ul1");
  oUl.onclick = function(ev){
    var ev = ev || window.event;
    var target = ev.target || ev.srcElement;
    if(target.nodeName.toLowerCase() == 'li'){
            alert(123);
         alert(target.innerHTML);
    }
  }
}

---