fed
fed copied to clipboard
Published
20 hours ago •
BestACE
BestACE
【资源帖】JS事件处理
/*
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);
样式编辑器
<!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>