zoukankan      html  css  js  c++  java
  • 事件委托

    事件委托好处:

    1.提供性能。

    2.添加元素仍然有以前的事件效果。

    js片段

    window.onload = init;
    function init(){
        var oUl =document.getElementById('ul');
        var oInput = document.getElementById('input');
        var iNow =4;
        oInput.onclick = function(){
            iNow++;
            var oLi = document.createElement('li');
            oLi.innerHTML = ""+iNow+"";
            oUl.appendChild(oLi);
            }
        oUl.onmouseover=function(ev){
            var ev = ev || window.event;
            var target =ev.srcElement||ev.target;
            if(target.nodeName.toLocaleLowerCase()=="li"){
                target.style.backgroundColor="red";
                }
            }
        oUl.onmouseout=function(ev){
            var ev = ev || window.event;
            var target =ev.srcElement||ev.target;
            if(target.nodeName.toLocaleLowerCase()=="li"){
                target.style.backgroundColor="";
                }
            }
        }

    html片段

    <input id="input" type="button" value="点击" />
    <p>1.提高性能</p>
    <p>2.新添加的元素还会有以前的事件例如微博应用</p>
    <ul id="ul">
        <li>11111</li>
        <li>22222</li>
        <li>33333</li>
        <li>44444</li>
    </ul>

  • 相关阅读:
    跨域与跨域访问
    bootstrap.min.css.map作用
    CSS
    http协议
    djngo未整理
    redis安装及配置
    git 基础
    yum安装报错
    Go语言与区块链开发(转载)
    electron实现MessageBox
  • 原文地址:https://www.cnblogs.com/dm511418503/p/2942729.html
Copyright © 2011-2022 走看看