【资源帖】JS事件处理

zptcsoft commented 5 years ago

1. 相关资源

2. 案例

样式编辑器

zptcsoft commented 5 years ago

 /*
 1.事件流
 2.事件处理
    html事件处理  HTML元素的事件属性绑定事件处理函数
    DOM0级事件处理
    DOM2级事件处理   最为流行、最为支持的方式   IE9-不支持
        shim  polyfill
        shim      让新的浏览器和旧的浏览器都支持新特性，例如定义一个新的绑定事件的方式 bindEvent（根据不同浏览器做适配）
        polyfill  让旧的浏览器支持新浏览器特性，例如让IE9-可以使用addEventListener
    IE事件处理

 * */
//html属性直接调用
function chgBackground () {
    document.getElementById("b").style.backgroundColor="#f00";
}
//dom0级
var oBtn2=document.getElementById("btn2");
oBtn2.onclick=function(){
    console.log("ok");
    document.getElementById("b").style.backgroundColor="#0f0";
    oBtn2.onclick=null;
    oBtn2.disabled=true;
};
//dom2级
var oBtn3=document.getElementById("btn3");
oBtn3.addEventListener("click",chg);
function chg () {
    //console.log("chg");
    alert("chg");
    oBtn3.removeEventListener("click",chg);
}
//ie级
var oBtn4=document.getElementById("btn4");
oBtn4.attachEvent("onclick",chg);
function chg () {
    alert("chg");
}
oBtn4.detachEvent("onclick",chg);

zptcsoft commented 5 years ago

样式编辑器

<!doctype html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
        :root{
            --bgC:#f00;
            --fontSize:12px;
            --color:#fff;
        }
        body{
            background-color: var(--bgC);
            font-size: var(--fontSize);
            transition:background-color 1s;
        }
        p{
            color: var(--color);
            font-size: 1.5em;
            transition:font-size .2s;
        }
        .k{
            width: 100px;
            height: 100px;
            background:var(--bgC);
            border: 10px solid #000;
            box-shadow:2px 2px 10px 0px rgba(0,0,0,.5);
            margin: 20px;
        }
    </style>
</head>
<body>
    <p>段落文段落文字有一些段落文字有一些段落文字有一些段落文字有一些字有一些</p>
    <div class="k"></div>
    <input type="color" name="chgC" id="chgC" value="主题设置" />
    <input type="range" name="chgSize" id="chgSize" min="12" max="18" value="12" />
    <script type="text/javascript">
        var oChgC=document.getElementById("chgC");
        var oChgSize=document.getElementById("chgSize");
        oChgC.addEventListener("change",chg);
        function chg (event) {
            var event=event||window.event;
            var target=event.target||event.srcElement;
            document.documentElement.style.setProperty('--bgC',target.value);
            document.documentElement.style.setProperty('--color','#000');
        }
        oChgSize.addEventListener("change",chgSize);
        function chgSize (event) {
            var event=event||window.event;
            var target=event.target||event.srcElement;
            document.documentElement.style.setProperty('--fontSize',target.value+"px");
        }
    </script>
</body>
</html>

BestACE / fed

【资源帖】JS事件处理 #433

1. 相关资源

2. 案例

样式编辑器