js--补漏篇 addEventListener/attachEvent 和onXXX的用法及区别

首先介绍它们的用法：

1.addEventListener()的用法：（同一个 dom 元素上，addEventListener 同/不同类型事件可以绑定多个。）

形式：addEventListener(event,funtionName,useCapture)

参数：

event:事件的类型如 “click”（不要使用 "on" 前缀。例如，使用 "click" ,而不是使用 "onclick"。）

funtionName：方法名

useCapture(可选)：布尔值，指定事件是否在捕获或冒泡阶段执行。

- true - 事件句柄在捕获阶段执行
- false- false- 默认。事件句柄在冒泡阶段执行

写法：

第一种：

obj.addEventListener("click",function(){
//do something
}));

第二种，没参数可以直接写函数名

obj.addEventListener("click",fn,fasle));
funciton fn(){
//do something..
}

第三种：函数有参数时需要使用匿名函数来传递参数

obj.addEventListener("click",function(){fn()parm},false);

绑定多个事件的案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>muzidigbig</title>
</head>
<body>
<p>该实例使用 addEventListener() 方法在按钮中添加多个事件。</p>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
    var x = document.getElementById("myBtn");
    x.addEventListener("mouseover", myFunction);
    x.addEventListener("click", mySecondFunction);
    x.addEventListener("click", mySecondFunction1);
    x.addEventListener("mouseout",function () {
        document.getElementById("demo").innerHTML += "鼠标离开!<br>"
    });
    function myFunction()
    {
        document.getElementById("demo").innerHTML += "鼠标经过!<br>"
    }
    function mySecondFunction()
    {
        document.getElementById("demo").innerHTML += "点击!<br>"
    }
    function mySecondFunction1()
    {
        alert('点击！')
    }
    
</script>
</body>
</html>

       addEventListener里最后一个参数决定该事件的响应顺序：
               如果为true事件执行顺序为 addEventListener ---- 标签的onclick事件 ---- document.onclick　
               如果为false事件的顺序为标签的onclick事件 ---- document.onclick ---- addEventListener

清除事件：

形式：element.removeEventListener(event, function, useCapture)

event	必须。要移除的事件名称。. 注意:不要使用 "on" 前缀。例如，使用 "click" ,而不是使用 "onclick"。提示: 所有 HTML DOM 事件，可以查看我们完整的 HTML DOM Event 对象参考手册。
function	必须。指定要移除的函数。
useCapture	可选。布尔值，指定移除事件句柄的阶段。可能值： true - 在捕获阶段移除事件句柄 false- 默认。在冒泡阶段移除事件句柄注意: 如果添加两次事件句柄，一次在捕获阶段，一次在冒泡阶段，你必须单独移除该事件。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>muzidigbig</title>
    <style>
        #myDiv{
            background-color: pink;
            border: 1px solid;
            padding: 50px;
            color: white;
        }
    </style>
</head>
<body>
<div id="myDiv"> div 元素添加了  onmousemove 事件，在你移动鼠标时会显示随机数。
    <p>点击按钮移除 Div 的事件句柄。</p>
    <button onclick="removeHandler()" id="myBtn">点我</button>
</div>
<p id="demo"></p>
<script>
    document.getElementById("myDiv").addEventListener("mousemove", myFunction);
    function myFunction()
    {
        document.getElementById("demo").innerHTML = Math.random();
    }
    function removeHandler()
    {
        document.getElementById("myDiv").removeEventListener("mousemove", myFunction);
    }
</script>
</body>
</html>

2.onXXXX的用法：以onclick为例

第一种：

obj.onclick = function(){
//do something..
}

第二种：

obj.onclick= fn;
function fn (){
//do something...
}

第三种：当函数fn有参数的情况下使用匿名函数来传参：

obj.onclick = function(){fn(param)};
function fn(param){
//do something..
}

不能够这样写:错误写法：obj.onclick= fn(param):

因为这样写函数会立即执行，不会等待点击触发，特别注意一下

3.attachEvent()的用法：（同一个 dom 元素上，attachEvent 同/不同类型事件可以绑定多个。）

attachEvent是IE有的方法，它不遵循W3C标准

形式：addEventListener(event,funtionName,useCapture)

参数：

event:事件的类型如 “onclick”（要使用 "on" 前缀。例如，使用 "onclick"）

funtionName：方法名

useCapture(可选)：布尔值，指定事件是否在捕获或冒泡阶段执行。

- true - 事件句柄在捕获阶段执行
- false- false- 默认。事件句柄在冒泡阶段执行

不同点：

　　1.attachEvent是IE有的方法，它不遵循W3C标准，而其他的主流浏览器如FF等遵循W3C标准的浏览器都使用addEventListener，所以实际开发中需分开处理。

　　2.多次绑定后执行的顺序是不一样的，attachEvent是后绑定先执行，addEventListener是先绑定先执行。

区别

1.onxxxx事件会被后面的onxxxx相同的事件覆盖；addEventListener /attachEvent则不会覆盖。

2.addEventListener注意事项：

特别说明addEventListener不被IE9以下兼容，IE9以下用使用addEvent()；

obj.addEvent(event,funtionName);

参数：

event:事件类型（需要写成“onclick”前面加on，这个与addEventListener不同）

funtionName:方法名（要参数是也是需要使用匿名函数来传参）

若有不足请多多指教！希望给您带来帮助！

js--补漏篇 addEventListener/attachEvent 和onXXX的用法及区别

清除事件：

猜你喜欢