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

本文链接：https://blog.csdn.net/muzidigbig/article/details/81097160

首先介绍它们的用法：

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

形式：addEventListener(eventName,funtionName,useCapture)

参数：

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

funtionName：方法名

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

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

写法：

第一种：

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

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

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

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

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

- this 指向 调用者
- 注意：
    - 多次绑定会**依次**执行
    - 兼容性
    - IE8 不支持，如果是 IE8 需要使用 attachEvent 函数

绑定多个事件的案例：

<!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.attachEvent()的用法：（同一个 dom 元素上，attachEvent 同/不同类型事件可以绑定多个。）

attachEvent只是IE7/8有的方法，它不遵循W3C标准

- this 指向 window
    - 注意：
	- 只有 IE 支持，其他都不支持
	- IE内部的兼容性
	    - edge 	不支持
	    - IE10	支持，多次绑定**正序**执行 	
	    - IE9	支持，多次绑定**正序**执行 	
	    - IE8	支持，多次绑定**倒序**执行

形式：attachEvent(eventName,funtionName)

参数：

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

funtionName：方法名

比较特别的是attachEvent不需要指定capture/bubble的参数, 因为在windows IE环境下都是使用Bubble的模式.

移除：detachEvent(eventName,fun)

不同点：

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

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

        <body>
		<h2 id="h2">事件监听</h2>
	</body>
	<script type="text/javascript">
		function fun() {
			alert('事件监听')
		}
		/** 
		 * @param {Object} obj  事件源
		 * @param {Object} type 事件类型
		 * @param {Object} fun  事件处理函数
		 */
		function addEvent(obj, type, fun) {
			if(obj.addEventListener) {
				obj.addEventListener(type, fun, false);
			} else {
				obj.attachEvent("on" + type, fun)
			}
		}
		function removeEvent(obj, type, fun) {
			if(obj.removeEventListener) {
				obj.removeEventListener(type, fun, false);
			}else{
				obj.detachEvent("on" + type, fun)
			}
		}
		addEvent(document.getElementById('h2'),'click', fun)
	</script>

3.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.οnclick= fn(param):

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

区别：

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

2.addEventListener注意事项：

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

obj.addEvent(eventName,funtionName);

参数：

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

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

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