DOM EventListener

麗個啷個江發表於2020-09-23

DOM EventListener
1.向元素中新增事件控制程式碼的時候：
可以直接新增：

element.addEventListener("click", function(){ alert("Hello World!"); });

如果引用外部函式：

element.addEventListener("click", myFunction);

function myFunction() {
    alert ("Hello World!");
}

在這裡插入圖片描述這裡需要注意：沒有括號()

如果要傳遞引數：

<body>

<p>例項演示了在使用 addEventListener() 方法時如何傳遞引數。</p>
<p>點選按鈕執行計算。</p>
<button id="myBtn">點我</button>
<p id="demo"></p>
<script>
var p1 = 5;
var p2 = 7;
document.getElementById("myBtn").addEventListener("click", function() {
    myFunction(p1, p2);
});
function myFunction(a, b) {
    var result = a * b;
    document.getElementById("demo").innerHTML = result;
}
</script>

在這裡插入圖片描述要使用匿名函式呼叫帶引數的函式，不能直接調

冒泡捕獲
在這裡插入圖片描述在這裡插入圖片描述簡單說就是一個元素裡巢狀另一個元素，確定先執行哪個元素的事件。

<body>
    <div id="mydiv">
        <p id="myp">點選段落，我是冒泡</p>
    </div><br>
    <div id="mydiv2">
        <p id="myp2">我是捕獲</p>
    </div>

   <script>
       document.getElementById("mydiv").addEventListener("click",function(){
           alert("div元素");
       },false);
       document.getElementById("myp").addEventListener("click",function(){
           alert("p元素");
       },false);
        document.getElementById("mydiv2").addEventListener("click",function(){
            alert("div2元素");
        },true);
        document.getElementById("myp2").addEventListener("click",function(){
            alert("p2元素");
        },true);
   </script>
</body>

在這裡插入圖片描述圖中畫框的地方如果不使用呼叫外部函式的方法，就寫成匿名函式

相關文章