【Javascript Day18】

標簽事件綁定的屬性參數

阻止默認行為

dialog的實現及組織冒泡（捕獲）傳遞

基于冒泡的事件委托

鍵盤事件的事件源對象信息

JS的自動觸發操作

標簽事件綁定的屬性參數

? ? 
? ? <input type="button" value="事件綁定" οnclick="funA(event,this)">
? ? <input type="button" value="事件綁定" id="btn1">
? ? <input type="button" value="事件綁定" id="btn2">
? ? <script>
? ? ? ? function funA(e,dom){
? ? ? ? ? ? console.log(e);
? ? ? ? ? ? // console.log(this);
? ? ? ? ? ? console.log(dom);
? ? ? ? ? ??
? ? ? ? }

? ? ? ? // JS為元素綁定事件，默認只有一個參數，該參數是事件對象
? ? ? ? // JS為元素綁定的事件，在方法中this關鍵字，表示當前事件綁定的DOM對象
? ? ? ? var btnDom1 = document.querySelector("#btn1");
? ? ? ? btnDom1.onclick = function(e){
? ? ? ? ? ? console.log(e);
? ? ? ? ? ? console.log(this);
? ? ? ? }

? ? ? ??

? ? ? ? var btnDom2 = document.querySelector("#btn2");
? ? ? ? btnDom2.addEventListener("click",function(e){
? ? ? ? ? ? console.log(e);
? ? ? ? ? ? console.log(this);
? ? ? ? })

阻止默認行為

? ? <a href="https://www.baidu.com" οnclick="showTip()">百度</a>
? ? <script>
? ? ? ? function showTip(){
? ? ? ? ? ? alert(1)
? ? ? ? }
? ? </script>
? ? <hr>
? ? <a href="javascript:void(0)">為元素默認行為關鍵屬性取值 javascrip:void(0)</a>
? ? <hr>
? ? <a href="https://www.baidu.com" οnclick="return false">為元素默認行為對應事件，綁定return false</a>
? ? <hr>
? ? <a href="https://www.baidu.com" οnclick="printMsg(event)">為元素默認行為對應事件回調，通過事件對象的preventDefault() 代碼</a>
? ? <script>
? ? ? ? function printMsg(e){
? ? ? ? ? ? console.log("msg",e);
? ? ? ? ? ? e.preventDefault();
? ? ? ? }
? ? </script>

dialog的實現及組織冒泡（捕獲）傳遞

? ? <div class="dialog" id="a" οnclick="closeDialog(event)">
? ? ? ? <div class="content" οnclick="stopFun(event)">
? ? ? ? ? ? <input type="text">
? ? ? ? ? ? <input type="button" value="關閉" οnclick="closeDialog(event)">
? ? ? ? </div>
? ? </div>

? ? <script>
? ? ? ? function showTip(){
? ? ? ? ? ? alert(11)
? ? ? ? }
? ? ? ? var aDialog = document.querySelector("#a");
? ? ? ? function openDialog(){
? ? ? ? ? ? aDialog.style.display = "block";
? ? ? ? }
? ? ? ? function stopFun(e){
? ? ? ? ? ? // 方案2：使用事件對象的專用阻止冒泡(捕獲)方法完成回調執行停止操作 stopPropagation()
? ? ? ? ? ? // ? ? ? stopPropagation()表示將冒泡或者捕獲方法停止在當前方法上
? ? ? ? ? ? e.stopPropagation();
? ? ? ? }
? ? ? ? function closeDialog(e){
? ? ? ? ? ? console.log(e);
? ? ? ? ? ? // 方案1：限定關閉功能只能由綁定事件的元素自身完成
? ? ? ? ? ? // if(e.currentTarget===e.target){
? ? ? ? ? ? // ? ? aDialog.style.display = "none";
? ? ? ? ? ? // }
? ? ? ? ? ? // e.stopPropagation();
? ? ? ? ? ? aDialog.style.display = "none";
? ? ? ? }
? ? </script>

基于冒泡的事件委托

<input type="button" value="addItems" οnclick="addItems()">
? ? <ul id="list" οnclick="execUlFun(event)">
? ? ? ??
? ? </ul>
? ? <script>
? ? ? ? // 事件代理|事件委托
? ? ? ? // ? ? ?將多個子元素的事件基于事件冒泡機制，交給父元素綁定并完成執行
? ? ? ? // ? ? ?優點：減少資源占用->提高運行效率
? ? ? ? // ? ? ?缺點：功能邏輯會比較復雜
? ? ? ? var tagNames = ["LI","SPAN"]
? ? ? ? function execUlFun(e){
? ? ? ? ? ? // console.log("ul的點擊事件",e.target,e.currentTarget);
? ? ? ? ? ? console.log("ul的點擊事件-DOM對象",e.target);
? ? ? ? ? ? // console.dir(e.target)
? ? ? ? ? ? // if(e.target.tagName=="LI"){
? ? ? ? ? ? // ? ? console.log("ul的點擊事件-內容",e.target.innerHTML);
? ? ? ? ? ? // }
? ? ? ? ? ? if( tagNames.includes(e.target.tagName) ){
? ? ? ? ? ? ? ? // console.log("ul的點擊事件-內容",e.target.innerHTML);
? ? ? ? ? ? ? ? // 具體的業務邏輯需要具體的分析
? ? ? ? ? ? ? ? console.log("ul的點擊事件-內容",e.target.innerText,e.target,e);
? ? ? ? ? ? }

? ? ? ? }

? ? ? ? var ulDom = document.querySelector("#list");
? ? ? ? function addItems(){
? ? ? ? ? ? for (var i = 0; i < 10; i++) {
? ? ? ? ? ? ? ? var li = document.createElement("li");
? ? ? ? ? ? ? ? li.classList.add( "item" );
? ? ? ? ? ? ? ? var span = document.createElement("span");
? ? ? ? ? ? ? ? let text = Math.random();
? ? ? ? ? ? ? ? span.innerHTML = text
? ? ? ? ? ? ? ? li.appendChild(span);
? ? ? ? ? ? ? ? // JS規則中每個元素綁定的事件，都是需要瀏覽器進行實際功能的監聽的
? ? ? ? ? ? ? ? // li.onclick = function(){
? ? ? ? ? ? ? ? // ? ? console.log(text,this);
? ? ? ? ? ? ? ? // }
? ? ? ? ? ? ? ? ulDom.appendChild(li);
? ? ? ? ? ? }
? ? ? ? }
? ? </script>

鍵盤事件的事件源對象信息

?
? ? <input type="text" οnkeydοwn="downFun()" οnkeypress="pressFun()" οnkeyup="upFun()">
? ? <script>
? ? ? ? function downFun(){
? ? ? ? ? ? console.log("被按下down");
? ? ? ? }
? ? ? ? function pressFun(){
? ? ? ? ? ? console.log("被按下press");
? ? ? ? }
? ? ? ? function upFun(){
? ? ? ? ? ? console.log("彈起up");
? ? ? ? }
? ? </script>

? ? <hr>
? ? 
? ? <input type="text" οninput="inputUserWord()">
? ? <script>
? ? ? ? function inputUserWord(){
? ? ? ? ? ? console.log("有值輸入");
? ? ? ? }
? ? </script>

? ? <hr>
? ? 
? ? <textarea οnkeydοwn="printEvent(event)"></textarea>
? ? <script>
? ? ? ? function printEvent(e){
? ? ? ? ? ? console.log(e);
? ? ? ? ? ? // 按鍵內容
? ? ? ? ? ? console.log(e.key);
? ? ? ? ? ? // 按鍵內容的ASCII編碼 - 棄用
? ? ? ? ? ? console.log(e.keyCode);
? ? ? ? }
? ? </script>
? ? <div class="box" οnkeydοwn="printKey(event)" contenteditable></div>
? ? <script>
? ? ? ? function printKey(e){
? ? ? ? ? ? console.log(e);
? ? ? ? ? ? console.log(e.key);
? ? ? ? }
? ? </script>
? ? <hr>
? ? <script>
? ? ? ? window.onkeydown = function(){
? ? ? ? ? ? console.log("window監控");
? ? ? ? }
? ? </script>

JS的自動觸發操作

<h1 id="count">0</h1>
? ? <input id="btn" type="button" value="累加" οnclick="addCount()">
? ? <script>
? ? ? ? var count = 0;
? ? ? ? var h1Dom = document.querySelector("#count");
? ? ? ? h1Dom.innerHTML = count;

? ? ? ? function addCount(){
? ? ? ? ? ? console.log("addCount");
? ? ? ? ? ? count++;
? ? ? ? ? ? h1Dom.innerHTML = count;
? ? ? ? }

? ? ? ? // js為dom對象的所有事件，都提供一個同名的觸發方法，該方法只要被調用，會立即執行事件對應的函數
? ? ? ? var btnDom = document.querySelector("#btn");
? ? ? ? // 自動調用點擊功能
? ? ? ? // btnDom.click();

? ? ? ? // 延遲計時器
? ? ? ? // setInterval( fun,time-ms );
? ? ? ? // ? ? ?每過time時間長度，自動執行一次 fun 方法
? ? ? ? setInterval( function(){
? ? ? ? ? ? btnDom.click();
? ? ? ? },500 )
? ? </script>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/diannao/70256.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/70256.shtml
英文地址，請注明出處：http://en.pswp.cn/diannao/70256.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！