扫盲-----addEventlistener()方法，事件监听(一)

时间：2022-10-16 04:36:43

一、扫盲事件起因

    时间：2018年6月1日周五下午，原本我以为我已经把当前的bug改好，应该没啥问题了，坐等下班公司聚餐（开心）

突然，隔壁同组大哥，哎。。。。cp,你看看，你这个首页报了很多错哎。我的第一反应就是，扫盲-----addEventlistener()方法，事件监听(一)不可能，怎么会有错误呢，我明明都自己测过好几次了。我一看，扫盲-----addEventlistener()方法，事件监听(一)我去，果然。。。。首页报的错误都是在我写的组件里面出现的同一个错误。我的天。。。。。当页面缩放时，渲染页面提示,某方法不存在：即我在setresize()方法中调用getChartinit（）方法，当我缩放浏览器页面大小时，提示getChartint()不是一个方法。于是为了弄清楚原因，我便开始了我的扫盲路程。这是一条小白修仙路

扫盲-----addEventlistener()方法，事件监听(一)

扫盲-----addEventlistener()方法，事件监听(一)

那么什么是addEventListener()方法呢？

addEventListener()方法，即为事件监听；可以使用removeEventListener()方法来移除事件的监听。

语法：   element.addEventListener(event,function,useCapture);

其中第一个参数是事件的类型（如“click”或“mousedown”）

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

注意：不要使用“on”前缀。例如，使用“click”,而不是使用“onclick”.

关于使用

  • 使用函数名，引用外部函数：

element.addEventListener("click", myFunction);

function myFunction() {
    alert ("Hello World!");
}
  • 向window对象添加句柄

window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext;
});
  • 传递参数

当传递参数值时，使用“匿名函数”调用带参数的函数：

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;
}

什么是事件冒泡或事件捕获？

事件传递有两种方式：冒泡与捕获

事件传递定义了元素事件触发的顺序。如果将<p>元素插入到<div>元素中，用户点击<p>元素，哪个元素的“click”事件先被触发呢？

在冒泡中，内部元素的事件会先被触发，然后再触发外部元素，即：<p>元素的点击事件先触发，然后会触发<div>

元素的点击事件。

在捕获中，外部元素会先被触发，然后才会触发内部元素的事件，即：<div>元素的点击事件先触发，然后再触发<p>

元素的点击事件。

addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型：

addEventListener( event,  function,  useCapture);

默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

document.getElementById("myDiv").addEventListener("click", myFunction, true);

如何移除监听事件呢?

emoveEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:

element.removeEventListener("mousemove", myFunction);



标签：

相关文章