javascript - 这个事件代码怎么理解?
本文介绍了javascript - 这个事件代码怎么理解?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
<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>
标注的1和2两处的代码的写法怎么理解?看不懂= =哪来的api
解决方案
ev是事件的参数,在ev中包含了事件触发时的参数,比如click事件的ev中包含ev.pageX,ev.pageY,keydown事件中包ev.keyCode等,在ie中,ev是全局的可以通过window.event来获取,在其他浏览器中都是作为参数传入的。
这篇关于javascript - 这个事件代码怎么理解?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文