<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>
Wie ist die Schreibweise der mit 1 und 2 gekennzeichneten Codes zu verstehen? Ich kann nicht verstehen = =Woher kommt die API
ev是事件的参数,在ev中包含了事件触发时的参数,比如click事件的ev中包含ev.pageX,ev.pageY,keydown事件中包ev.keyCode等,在ie中,ev是全局的可以通过window.event来获取,在其他浏览器中都是作为参数传入的。
function 中ev是event的缩写,即事件。而事件的接口属于浏览器端实现。
简单来说:window/event属于全局变量,只要在浏览器中执行,默认存在此变量。
主要是处理浏览器兼容性
比如2
旧的ie浏览器,或者事件对应的元素需要用 ev.srcElement,而现在浏览器只需要使用 ev.target 就可以了
1和2都是为了兼容IE事件的写法。