事件 绑定，取消冒泡，拖拽 ，点击，事件委托习题
生活随笔
收集整理的這篇文章主要介紹了
事件 绑定，取消冒泡，拖拽 ，点击，事件委托习题
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
事件知識的，冒泡，綁定，委托
?
<script type="text/javascript">//事件綁定 取消 var div=document.getElementsByTagName('div')[0]; div.addEventListener('click',test,false); div.removeEventListener('click', test,false); function test(){console.log('a'); } //取消冒泡； document.οnclick=function(){console.log('全局'); } div.addEventListener("click",function(e){this.style.background='green';// e.stopPropagation();e.cancelBubble=true; },false) //事件委托；利用事件冒泡和事件原對象 var ul=document.getElementsByTagName('ul')[0]; ul.onclick=function(e){var event =e||window.event;var target=event.target||event.srcElement;console.log(target.innerText);}習題小練習
?
?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style text="text/css">input{border:1px solid #01f;}div{margin: 100px;}</style> </head> <body><input type="text" value="請輸入用戶名" style="color:#999"onfocus="if(this.value=='請輸入用戶名'){this.value='';this.style.color='red';}" οnblur="if(this.value==''){this.value='請輸入用戶名'; this.style.color='#999' }"> <div class="box" style="height: 100px;width:100px;background-color:red;position: absolute;left:10px;top: 0;" ></div> <script type="text/javascript">//拖拽練習var div=document.getElementsByTagName('div')[0]; var disx,disy; div.onmousedown=function(e){disx=e.pageX-parseInt(div.style.left);disy=e.pageY-parseInt(div.style.top);document.onmousemove=function(e){var event=e||window.event;div.style.left=e.pageX-disx+"px";div.style.top=e.pageY-disy+"px";}document.onmouseup=function(){document.onmousemove=null;} } //返回按鍵字母 document.οnkeypress=function(e){console.log(String.fromCharCode(e.charCode)); }</script></body> </html>?
轉載于:https://www.cnblogs.com/zhangjiaqi123/p/10512241.html
總結
以上是生活随笔為你收集整理的事件 绑定，取消冒泡，拖拽 ，点击，事件委托习题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： onBlur()事件连续触发问题。
- 下一篇： Spark系列-初体验（数据准备篇）