<input type="text" id="txt" placeholder="输入要添加的文本" />
<button id="btn">加 </button>
<ul id="ul">
<li>11111</li>
<li>22</li>
<li>3333</li>
<li>4444</li>
</ul>
<script type="text/javascript">
var ul = document.getElementById("ul");
var lis = ul.getElementsByTagName('li');
var btn = document.getElementById("btn");
btn.onclick = function() { //动态添加li
var txt = document.getElementById("txt"),
txtValue = txt.value,
ali = document.createElement("li");
console.log(txt.value);
ali.innerHTML = txtValue;
ul.appendChild(ali);
}
ul.onmouseover = function(ev) {
var ev = ev || window.event; //获取发生事件 event 兼容 =====1
var target = ev.target || ev.srcElement; //获取真正被触发的元素 =====2
if (target.nodeName.toLocaleLowerCase() == 'li') {
//判断target是否是所需要的元素 正是因为这个判断 我们可以得到任何想要的元素 a li td 等等
target.style.background = "red";
}
}
ul.onmouseout = function(ev) {
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if (target.nodeName.toLocaleLowerCase() == 'li') {
target.style.background = "";
}
}
</script>
Comment comprendre l'écriture des codes marqués 1 et 2 ? Je ne comprends pas = =D'où vient l'API
ev est le paramètre de l'événement. ev contient les paramètres lorsque l'événement est déclenché. Par exemple, l'ev de l'événement click contient ev.pageX, ev.pageY, l'événement keydown contient ev.keyCode, etc. ev est global. Il peut être obtenu via window.event, qui est transmis en paramètre dans d'autres navigateurs.
ev dans
function est l'abréviation d'événement, c'est-à-dire event. L'interface d'événement appartient à l'implémentation côté navigateur.
Pour faire simple : window/event est une variable globale Tant qu'elle est exécutée dans le navigateur, cette variable existe par défaut.
Traitant principalement de la compatibilité des navigateurs
Par exemple, 2
Les anciens navigateurs IE, ou les éléments correspondant aux événements doivent utiliser ev.srcElement, mais désormais les navigateurs n'ont besoin que d'utiliser ev.target
1 et 2 sont tous deux destinés à la compatibilité avec l'écriture d'événements IE.