绑定事件的两种方式/DOM事件的级别
我们在之前的一篇文章《04-JavaScript/22-DOM简介和DOM操作》中已经讲过事件的概念。这里讲一下绑定(注册)事件的两种方式,我们以onclick事件为例。
DOM0的写法:onclick
element.onclick =
function
()
{
}
举例:
<body>
<button>点我</button>
<script>
var btn = document.getElementsByTagName("button")[0];
//这种事件绑定的方式,如果绑定多个,则后面的会覆盖掉前面的
btn.onclick =
function
()
{
console.log("事件1");
}
btn.onclick =
function
()
{
console.log("事件2");
}
</script>
</body>
点击按钮后,上方代码的打印结果:
事件2
我们可以看到,DOM对象.事件 = 函数
的这种绑定事件的方式:一个元素的一个事件只能绑定一个响应函数。如果绑定了多个响应函数,则后者会覆盖前者。
DOM2的写法:addEventListener(高版本浏览器)
element.addEventListener('click',
function
()
{
},
false);
参数解释:
- 参数1:事件名的字符串(注意,没有on)
- 参数2:回调函数:当事件触发时,该函数会被执行
- 参数3:true表示捕获阶段触发,false表示冒泡阶段触发(默认)。如果不写,则默认为false。【重要】
举例:
<body>
<button>按钮</button>
<script>
var btn = document.getElementsByTagName("button")[0];
// addEventListener: 事件监听器。 原事件被执行的时候,后面绑定的事件照样被执行
// 这种写法不存在响应函数被覆盖的情况。(更适合团队开发)
btn.addEventListener("click", fn1);
btn.addEventListener("click", fn2);
function fn1()
{
console.log("事件1");
}
function fn2()
{
console.log("事件2");
}
</script>
</body>
点击按钮后,上方代码的打印结果:
事件1
事件2
我们可以看到,addEventListener()
这种绑定事件的方式:
- 一个元素的一个事件,可以绑定多个响应函数。不存在响应函数被覆盖的情况。执行顺序是:事件被触发时,响应函数会按照函数的绑定顺序执行。
- addEventListener()中的this,是绑定事件的对象。
addEventListener()
不支持 IE8 及以下的浏览器。在IE8中可以使用attachEvent
来绑定事件(详见下一小段)。
DOM2的写法:attachEvent(IE8及以下版本浏览器)
element.attachEvent('onclick',
function
()
{
});
参数解释:
- 参数1:事件名的字符串(注意,有on)
- 参数2:回调函数:当事件触发时,该函数会被执行
举例:
<body>
<button>按钮</button>
<script>
var btn = document.getElementsByTagName('button')[0];
btn.attachEvent('onclick',
function()
{
console.log('事件1');
});
btn.attachEvent('onclick',
function()
{
console.log('事件2');
});
</script>
</body>
在低版本的IE浏览器上,点击按钮后,上方代码的打印结果:
事件2
事件1
我们可以看到,attachEvent()
这种绑定事件的方式:
- 一个元素的一个事件,可以绑定多个响应函数。不存在响应函数被覆盖的情况。注意:执行顺序是,后绑定的先执行。
- attachEvent()中的this,是window
兼容性写法
上面的内容里,需要强调的是:
addEventListener()
中的this,是绑定事件的对象。attachEvent()
中的this,是window。
既然这两个写法的this
不同,那么,有没有一种兼容性的写法可以确保这两种绑定方式的this是相同的呢?我们可以封装一下。代码如下:
<body>