事件绑定的一点小知识_两种事件绑定的区别-优快云博客

本文链接：https://blog.youkuaiyun.com/zyl_lyr1019/article/details/17767983

本文探讨了DOM1级与DOM2级事件绑定的区别，特别是针对事件绑定时返回false对默认行为的影响。通过实例展示了不同绑定方式如何影响超链接的行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本篇文章呢，主要是关于事件绑定中，不同方法间的一点小区别，就是dom1级绑定和dom2级绑定的一点小的差别。

前言：

事件绑定，通常使用的绑定方式有三种：

1：绑定到标签中。
2：绑定到dom对象中，dom1级事件绑定。
3：绑定到事件对象中。dom2级事件绑定。

这三种绑定方法的好坏，以及主要区别，这里就不在说明，不清楚的请自己查看相关资料吧。

DOM1级绑定和DOM2级事件绑定的小区别：

我假设大家对这块的基本使用都很熟悉，这里我就直接上例子吧，

<body>
<a href="http://www.baidu.com">baidu</a>
<a href="http://www.baidu.com">baidu2</a>
</body>

然后，我对这两个超链接，添加一个点击事件。使用第二和第三种的绑定方法，代码如下：

window.οnlοad=function(){
	var a=document.getElementsByTagName("a")[0];
	addEvent(a,'click',function(){
		//该方法是通过DOM2级事件绑定方法定义的一个函数，这里没有添加。
		return false;
	})
	var a2=document.getElementsByTagName("a")[1];
	a2.οnclick=function(){
		return false;
	}
}

对第一个a标签使用DOM2级进行事件绑定。
对第二个a标签，使用DOM1级方法进行事件绑定。

这个时候，我们分别点击两个超链接，却发现，第一个超链接，依然可以跳转到指定的页面，而第二个超链接却没有跳转。为什么？

这里就得说一下DOM1级事件绑定，和DOM2级事件绑定的区别了。

我们都知道，DOM树中的每一个元素标签，都是一个DOM元素，这些DOM元素都是继承自Object对象的（IE8-的浏览器不是），那么DOM元素就会有一些自定义的属性存在，而这些属性都是浏览器内置存在的，是使用C/C++语言进行解析处理的。

所以这里，使用DOM1级的事件绑定，本质上就是把回调函数，绑定到对应的DOM元素的onclick方法上面。

而DOM2级的绑定，是通过事件对象event绑定的，并没有绑定到DOM元素的onclick方法上。

你可以在之前的代码中，添加这样一段函数，查看DOM元素对象的onclick属性的值。

function aa(){
	var a=document.getElementsByTagName("a");
	for(var i=0,len=a.length;i<len;i++){
		console.log(a[i].onclick);
	}
}

这样，在浏览器的调试工具，你就可以看到这样的内容：（浏览器下，只会看到等号右侧的，我这里为了看着方便，所以如下写法）

a[0].οnclick=null
a[1].οnclick=function (){ return false; }

第一个标签的onclick是没有绑定执行函数的。
第二个标签的onclick绑定了函数。

现在再看一下，浏览器下，对这两种事件绑定的区别在哪。

这两张图，分别对应的上面的两个超链接，在浏览器的事件监听下的属性。

注意两幅图中红框部分，DOM2级（左图）的绑定方法，不会被认为是一个属性，而DOM1级（右图）的绑定则会被认为是DOM元素的属性。
这也从另外一方面说明了，两种事件绑定方法的不同之处。

那为何绑定到DOM元素的属性上面的这种方法，会阻止标签的默认动作呢？这个吧，DOM元素再添加onclick事件时，重写了一部分东西，比如，函数返回false时，阻止元素的默认动作。比如对于元素标签来说，a标签通过DOM1级绑定，如果返回true，则不执行打开网页的操作，比如form标签的onsubmit事件，当返回false时，则不执行提交表单的操作。按照上面的理论，如果form表单的submit事件是通过DOM2级绑定的事件处理程序，那么就算是返回false，依然会进行表单提交。有兴趣的可以自己测试一下哦。

对于事件方面，虽然DOM1级的事件绑定，当返回false时，会阻止默认动作的，但是并不会阻止冒泡。

至于如何对DOM2级绑定，进行阻止默认动作，那就只能使用DOM方法了，就要对事件对象event进行处理了，这个大家应该都知道的，

window.οnlοad=function(){
    var a=document.getElementsByTagName("a")[0];
    addEvent(a,'click',function(e){
        e = e || window.event;
        if(e.preventDefault){
            e.preventDefault();
        }else{
            e.returnValue = false;
        }
    })
    var a2=document.getElementsByTagName("a")[1];
    a2.οnclick=function(){
        return false;
    }
}

总结：

对于DOM元素本身携带的方法或者属性，有些是有浏览器写好的一些功能，在平时使用时，也许并不很容易发现（比如，本篇文章说到的，DOM1级事件绑定，在函数返回false值，会自动的阻止DOM元素的默认动作，这应该是浏览器本身就写好的一个功能），所以，如果出现相关的问题，可以进行这方面的验证。

本篇文章的缘由是优快云论坛的一个帖子“js的两种写法为什么第一种写法无效?”。

本篇文章中的观点，只代表我个人的想法。如果您发现有些问题叙述错误，或者理论错误等，欢迎提出指正，非常感谢。

方便测试：下面是整体的代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>bindEvent</title>
<script type="text/javascript">
function addEvent(obj,type,fun){
	if(obj.addEventListener){
		obj.addEventListener(type,fun,false);
	}else{
		obj[type+fun]=fun;
		obj['on'+type+fun]=function(){obj[type+fun](window.event)};
		obj.attachEvent('on'+type,obj['on'+type+fun]);
	}
}
window.οnlοad=function(){
	var a=document.getElementsByTagName("a")[0];
	addEvent(a,'click',function(e){
        e = e || window.event;
        if(e.preventDefault){
            e.preventDefault();
        }else{
            e.returnValue = false;
        }
    })；
	var a2=document.getElementsByTagName("a")[1];
	a2.οnclick=function(){
		return false;
	}
}
function aa(){
	var a=document.getElementsByTagName("a"),
		html = "";
	for(var i=0,len=a.length;i<len;i++){
		console.log(a[i].onclick);
		html +="a["+i+"].οnclick="+a[i].onclick+"<br />"; 
	}
	document.getElementById("a").innerHTML = html;
}
</script>
</head>
<body>
<a href="http://www.baidu.com">baidu</a>
<a href="http://www.baidu.com">baidu2</a>
<div><input type = "button" value = "get"  onclick = "aa()"></div>
<div id = "a"></div>
</body>
</html>