第1章 事件流
1-1.事件冒泡:事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收;
然后逐级向上传播至最不具体的那个节点(文档);
1-2.事件捕获:不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件;
第2章 事件处理程序
2-1 HTML事件处理程序
//缺点:HTML和JS代码紧密的耦合在一起;
<input type="button" value="按钮" onclick="showMessage()">
2-2 DOM0级事件处理程序
//较传统的方式:把一个函数赋值给一个事件的处理程序属性,用的比较多;
//优点:简单/跨浏览器;
<input type="button" value="按钮" id="btn2"> <script> var btn2 = document.getElementById('btn2'); //取得btn2按钮对象; btn2.onclick = function () { //给btn2添加onclick属性; alert('这是通过DOM0级添加的事件!'); } btn2.onclick=null; //删除onclick属性; </script>
2-3 DOM2级事件处理程序
//DOM2级事件定义了两个方法:用于处理指定和删除事件处理程序的操作;
//addEventListener()和removeEventListner();
//接收三个参数:要处理的事件名/事件处理函数和布尔值;
//在IE8一下,不起作用;
<input type="button" value="按钮" id="btn3"> <script> var btn3 = document.getElementById('btn3'); btn3.addEventListener('click',showMessage,false); //添加事件程序; btn3.addEventListener('click',function(){ //添加多个事件程序; alert(this.value); },false); btn3.removeEventListener('click',showMessage,false); //删除事件程序; </script>
2-4 IE事件处理程序及跨浏览器
//接收两个参数:事件处理函数名称和事件处理函数
<script> var btn3 = document.getElementById('btn3'); btn3.attachEvent('onclick',showMessage); //添加事件; btn3.detachEvent('onclick',showMessage); //删除事件; </script>
>2.浏览器兼容
//将添加和删除事件处理程序封装到对象中并赋值给变量'eventUtil'; var eventUtil = { //添加句柄 addHandler:function(element,type,handler){ //判断DOM2级事件处理程序; if(element.addEventListener){ element.addEventListener(type,handler,false); //判断IE浏览器; }else if(element.attachEvent){ element.attachEvent("on"+type,handler); //使用DOM0级事件处理程序; }else{ element['on'+type] = handler; } }; //删除句柄 removeHandler:function(element,type,handler){ //判断DOM2级事件处理程序; if(element.removeEventListener){ element.removeEventListener(type,handler,false); //判断IE浏览器; }else if(element.detachEvent){ element.detachEvent("on"+type,handler); //使用DOM0级事件处理程序; }else{ element['on'+type] = null; }; }; }; //跨浏览器添加事件处理程序; eventUtil.addHandler(btn3,'click',showMessage);
第3章 事件对象
3-1 DOM中的事件对象
//在触发DOM上的事件时都会产生一个对象==event;
>1.type == 获取事件类型;
>2.target == 获取事件目标;
>3.stopPropagation() == 停止事件冒泡;
>4.preventDefault() == 阻止事件的默认行为;
function showMes(event){ alert(event.type); //onclick;点击事件; alert(event.target.nodeName); //INPUT;input按钮被触发; event.stopPropagation(); //停止事件冒泡; } <a href="event.html" onclick="stopGoto();">跳转</a> function stopGoto(event){ event.preventDefault(); //阻止默认行为; }
3-2 IE中的事件对象
>1.type == 同上;
>2.srcElement属性 == 获取事件目标;
>3.cancleBubble属性 == 阻止冒泡;设置true表示阻止冒泡,false为不组织冒泡;
>4.returnValue属性 == 用于阻止事件的默认行为;
function showMes(event){ //非IE用event,IE8以下用window.event; event = event || window.event; //事件目标兼容; var ele = event.target || event.srcElement; //兼容阻止事件冒泡; if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancleBubble(); }; //兼容取消事件默认行为; if(event.preventDefault){ event.preventDefault(); }else{ event.returnValue = false; } }
第4章 QQ面板拖拽效果
>1.封装获取Class方法
function getClass(clsName,parent){ var oParent = parent"htmlcode">window.onload = drag; function drag(){ var oTitle = getClass('login_logo_webqq','loginPanel')[0]; //拖拽 oTitle.onmousedown = fnDown; //关闭弹窗 var oClose = document.getElementById('ui_boxyClose'); oClose.onclick = function(){ document.getElementById('loginPanel').style.display = 'none'; } //切换状态 var loginState = document.getElementById('loginstate'), stateList = document.getElementById('loginStatePanel'), lis = stateList.getElementsByTagName('li'), stateTxt = document.getElementById('login2qq_state_txt'), loginStateShow = document.getElementById('login-state_show'); loginState.onclick = function(e){ //阻止冒泡到document使ul隐藏; e = e || window.event; if(e.stopPropagation){ e.stopPropagation(); }esle{ e.cancleBubble = true; } stateList.style.display = "block"; } //鼠标滑过/离开和点击状态列表时 for(var i=0,i<lis.length,i++){ lis[i].onmouseover = function(){ this.style.background = "#567"; } lis[i].onmouseout = function(){ this.style.background = "#fff"; } lis[i].onclick = function(e){ //阻止冒泡到loginState使stateList显示; e = e || window.event; if(e.stopPropagation){ e.stopPropagation(); }esle{ e.cancleBubble = true; } var id = this.id; stateList.style.display = "none"; stateTxt.innerHTML = getClass('stateSelect_text',id)[0].innerHTML; loginStateShow.className = ''; loginStateShow.className = 'login-state-show '+id; } } document.onclick = function(){ stateList.style.display = "none"; } } //鼠标按下事件; function fnDown(event){ event = event || window.event; var oDrag = document.getElementById('loginPanel'), //鼠标按下时,鼠标和面板之间的距离; disX = event.clientX - oDrag.offsetLeft, disY = event.clientY - oDrag.offsetTop; //移动 document.onmouseover = function(event){ event = event || window.event; fnMove(event,disX,disY); } //释放鼠标 document.onmouseup = function(){ document.onmouseover = null; document.onmouseup = null; } } //鼠标移动事件; function fnMove (e,posX,posY){ var oDrag = document.getElementById('loginPanel'), l = e.clientX-posX, t = e.clientY-posY, winW = document.documentElement.clientWidth || document.body.clientWidth, winH = document.documentElement.clientHeight || document.body.clientHeight; maxW = winW-oDrag.offsetWidth, maxH = winH-oDrag.offsetHeight; if(l<0){ l = 0; }else if(l>maxW){ l = maxW; } if(t<0){ t = 0; }else if(t>maxH){ t=maxH; } oDrag.style.left = l+'px'; oDrag.style.top = t+'px'; }第4章 抽奖系统
>1.键盘事件
1.keyDown:当用户按下键盘上的任意键时触发,而且如果按住不放的话,会重复触发此事件;
2.keyPress:当用户按下键盘上的字符键时触发,而且如果按住不放的话,会重复触发此事件;
3.keyUp:当用户释放键盘上的键时触发;>2.抽奖程序
var data = ['iPhone5','iPad','三星电脑','谢谢参与'], timer = null, flag = 0; window.onload = function(){ var play = document.getElementById('play'), stop = document.getElementById('stop'); //(鼠标)开始抽奖 play.onclick = palyFun; stop.onclick = stopFun; //(键盘Enter)开始抽奖 document.onkeyup = function(event){ event = event || window.event; if(event.keyCode == 13){ if(flag == 0){ palyFun(); flag = 1; }else{ stopFun(); flag = 0; } } } } function palyFun(){ var title = document.getElementById('title'), play = document.getElementById('play'); //清除之前的定时器,放置定时器重复; clearInterval(timer); //设置定时器; timer = setInterval(function(){ //随机数*数组元素个数=数组随机索引; var random = Math.floor(Math.random()*data.length); title.innerHTML = data[random]; },50); play.style.background = "#999"; } function stopFun(){ clearInterval(timer); var paly = document.getElementById('play'); paly.style.background = '#036'; }
JavaScript,DOM
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。
更新日志
- 外媒:《死亡岛2》或是今年PS+2档最受欢迎游戏
- 群星.1997-世纪之歌第二辑6CD【宝丽金】【WAV+CUE】
- 邵萱.1997-是是非非【捷登】【WAV+CUE】
- 巫启贤.1998-我是你的【风格】【WAV+CUE】
- 【原神手游】「月草的赐慧」祈愿
- 【原神手游】「赤团开时」祈愿
- 【原神手游】「法器·千夜浮梦」介绍
- 陈立农《青春为名 上部曲 - 恋》[FLAC/分轨][290.58MB]
- 张乔西《明星》[320K/MP3][55.23MB]
- 张乔西《明星》[FLAC/分轨][143.08MB]
- 《P3R:Episode Aegis》:重复爬塔的悲伤
- 《公会传说:遗落的世界》EA版评测:怀旧感CRPG还在追我
- 诛仙老玩家会喜欢《诛仙世界》吗?
- ABC唱片-《母帶直刻神奇黑胶CD》[FLAC+CUE]
- 柏菲·李一凤《真爱过关》限量开盘母带ORMCD[低速原抓WAV+CUE]