DOM EventListener

丽个啷个江

于 2020-09-23 23:24:34 发布

阅读量458

点赞数

本文链接：https://blog.csdn.net/lijiang_shen/article/details/108750553

版权

js学习笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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>