Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,037

HOME > Community Zone > Forum > มีใครเคยทดสอบ การเขียนโค๊ด รับ event ด้วยคำสั่ง onClick ในทุก object กับ event body onclick อันเดียวไหมครับ



 

มีใครเคยทดสอบ การเขียนโค๊ด รับ event ด้วยคำสั่ง onClick ในทุก object กับ event body onclick อันเดียวไหมครับ

 



Topic : 135841



โพสกระทู้ ( 9,586 )
บทความ ( 2 )



สถานะออฟไลน์




ว่าจะทดลองทำเช็คความเร็วดูแต่ลองมาถามดูก่อน

คือผมสงสัยว่า ถ้าเราใส่ onclick เข้าไปทุก object
กับ การเราใช้ body onclick อันเดียว แล้ว เช็ก event target เอา อันไหนจะเร็วกว่ากัน

อันนี้คิดเอาเอง ว่า body อันเดียว น่าจะเร็วกว่าหรือเปล่า

ตัวอย่าง
Code (PHP)
<body onclick="check_event(event)">
   <span myattr="xxxx" >xxxx</span>
   <span myattr="yyyy" >yyyy</span>
</body>
<script>
function check_event(e){
  switch(e.target.getAttribute('myattr')){
    case 'xxxx': alert('xxxx'); break;
    case 'yyyy': alert('yyyy'); break;
    default:
  }
}


กับ

Code (PHP)
<body>
   <span myattr="xxxx" onclick="alert('xxxx')" >xxxx</span>
   <span myattr="yyyy" onclick="alert('yyyy')"  >yyyy</span>
</body>




Tag : JavaScript









ประวัติการแก้ไข
2021-01-19 11:02:00
Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2021-01-19 11:00:53 By : Chaidhanan View : 890 Reply : 6
 

 

No. 1



โพสกระทู้ ( 210 )
บทความ ( 0 )



สถานะออฟไลน์


ผมทายว่า แบบแยก เพราะไม่เคยลองเหมือนกัน (benmark ไม่น่าจะต่างกันมาก)

อัปเดตผลให้ดูหน่อยนะครับ






แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2021-01-19 16:23:14 By : lakornworld
 


 

No. 2



โพสกระทู้ ( 4,756 )
บทความ ( 8 )



สถานะออฟไลน์


ไม่เคยลองครับ และไม่ค่อยได้เอาไปใส่ใน html ด้วย

ปกติผมจะแยกใส่ไฟล์ .js

ส่วนกรณีนี้ผมแนะให้ลอง JS event delegation ด้วย น่าจะไวเหมือนกัน

Code (JavaScript)
document.addEventListener('click', function(e) {
    // do something.
});


https://dmitripavlutin.com/javascript-event-delegation/
https://javascript.info/event-delegation
https://flaviocopes.com/javascript-event-delegation/
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2021-01-20 22:51:41 By : mr.v
 

 

No. 3



โพสกระทู้ ( 4,756 )
บทความ ( 8 )



สถานะออฟไลน์


Code (JavaScript)
var maximumLoop = 100000;


function runLoop() {
    const t0 = performance.now();

    let targetElement = document.getElementById('runResult');
    if (targetElement) {
        // reset result before start.
        targetElement.innerHTML = '';
    }

    for (i = 1; i <= maximumLoop; i++) {
        if (targetElement) {
            targetElement.insertAdjacentHTML('beforeend', i + ', ');
        }
        if (i%100 == 0) {
            if (targetElement) {
                targetElement.insertAdjacentHTML('beforeend', '<br>' + "\n");
            }
        }
    }// endfor;

    const t1 = performance.now();
    // https://developer.mozilla.org/en-US/docs/Web/API/Performance/now benchmark time original source code.
    console.log(`Call to this function took ${t1 - t0} milliseconds.`);
}


function runLoop2(event) {
    if (event.target.classList.contains('runLoop')) {
        const t0 = performance.now();

        let targetElement = document.getElementById('runResult');
        if (targetElement) {
            // reset result before start.
            targetElement.innerHTML = '';
        }

        for (i = 1; i <= maximumLoop; i++) {
            if (targetElement) {
                targetElement.insertAdjacentHTML('beforeend', i + ', ');
            }
            if (i%100 == 0) {
                if (targetElement) {
                    targetElement.insertAdjacentHTML('beforeend', '<br>' + "\n");
                }
            }
        }// endfor;

        const t1 = performance.now();
        // https://developer.mozilla.org/en-US/docs/Web/API/Performance/now benchmark time original source code.
        console.log(`Call to this function took ${t1 - t0} milliseconds.`);
    }
}


function listenEventDelegation() {
    document.addEventListener('click', function(event) {
        if (event.target.classList.contains('runLoop')) {
            runLoop();
        }
    });
}

test01.js




Code
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <button class="runLoop" onclick="runLoop();">Run loop.</button> <button class="runLoop" onclick="runLoop();">Run loop again.</button> <div id="runResult" style="border: 1px dashed #f00; padding: 10px;"></div> <script type="application/javascript" src="test01.js"></script> </body> </html>

test01-all-element.html




Code
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body onclick="runLoop2(event);"> <button class="runLoop">Run loop.</button> <button class="runLoop">Run loop again.</button> <div id="runResult" style="border: 1px dashed #f00; padding: 10px;"></div> <script type="application/javascript" src="test01.js"></script> </body> </html>

test01-on-body.html




Code
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <button class="runLoop">Run loop.</button> <button class="runLoop">Run loop again.</button> <div id="runResult" style="border: 1px dashed #f00; padding: 10px;"></div> <script type="application/javascript" src="test01.js"></script> <script type="application/javascript"> listenEventDelegation(); </script> </body> </html>

test01-js-event-delegation.html




ผลการทดลอง
แบบ all-element
ครั้งที่ 1 267 milliseconds.
ครั้งที่ 2 449 milliseconds.
ครั้งที่ 3 457 milliseconds.

แบบ on-body
ครั้งที่ 1 872 milliseconds.
ครั้งที่ 2 547 milliseconds.
ครั้งที่ 3 554 milliseconds.

แบบ js-event-delegation
ครั้งที่ 1 272 milliseconds.
ครั้งที่ 2 434 milliseconds.
ครั้งที่ 3 451 milliseconds.
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2021-01-21 14:15:41 By : mr.v
 


 

No. 4



โพสกระทู้ ( 9,586 )
บทความ ( 2 )



สถานะออฟไลน์


ตอบความคิดเห็นที่ : 3 เขียนโดย : mr.v เมื่อวันที่ 2021-01-21 14:15:41
รายละเอียดของการตอบ ::
ขอบคุณครับ ไม่ต้องทดลองเองเลย ว่าจะว่าจะ อยู่นั่น

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2021-01-21 14:47:02 By : Chaidhanan
 


 

No. 5



โพสกระทู้ ( 210 )
บทความ ( 0 )



สถานะออฟไลน์


ตอบความคิดเห็นที่ : 3 เขียนโดย : mr.v เมื่อวันที่ 2021-01-21 14:15:41
รายละเอียดของการตอบ ::
ขอบคุณสำหรับข้อมูลครับ

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2021-01-21 21:11:46 By : lakornworld
 


 

No. 6



โพสกระทู้ ( 4,756 )
บทความ ( 8 )



สถานะออฟไลน์


พอดีกำลังว่างเลยลองสักหน่อย
บวกกับอยากรู้ด้วยว่าอันไหนจึงจะดี เพราะบางทีคิดเองมันไม่เหมือนเห็นผลลัพธ์ด้วยตา ก็เลยลองทำดูเลยครับ

แต่จริงๆที่ on body ช้าก็อาจจะเพราะโค้ดไม่ดีก็ได้นะครับ อาจจะมีวิธีเขียนตรวจให้ทำงานเร็วกว่านั้น


ประวัติการแก้ไข
2021-01-21 21:37:57
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2021-01-21 21:35:13 By : mr.v
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : มีใครเคยทดสอบ การเขียนโค๊ด รับ event ด้วยคำสั่ง onClick ในทุก object กับ event body onclick อันเดียวไหมครับ
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 05
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่