javascript - Wie ist dieser Ereigniscode zu verstehen?
代言
代言 2017-06-28 09:28:50
0
4
803
    <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

代言
代言

Antworte allen(4)
给我你的怀抱

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事件的写法。

Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage