关于句柄

句柄即事件监听器,我也是在今天上午看到事件事件监听器,突然不知道这是什么才去查了下。

首先,在HTML中为一个元素添加事件,一般有三种:

1.通过HTML元素属性。简单说来就是在html结构中,给你要添加事件的元素添加一个属性。
属性名为 'on' + 事件名。
如:你要给a元素绑定一个click事件,你就该这么写:
<a href="http://blog.163.com/luping_01/blog/#" onclick='do something'>name</a>

 2.通过对象属性。
对象指的是jDOM树里的对象,我们都知道,所有的html元素在DOM(文档对象类型)里都存在一个相应的DOM元素。
给这个DOM元素添加事件等同于方式一。这个属性名也一样:
也为 on + 事件名
如:
html结构:
<a href="http://blog.163.com/luping_01/blog/#" id="n">name</a>
js:
document.getElementById('n').onclick = function(){ //do something}

3.通过W3C监听方式(标准方式)或者IE专属的中间模型添加事件

W3C方式: elemennt.addEventListener(事件名,处理函数引用,true || false)
这里的事件名就是单纯的事件名,不需要加 on ,true表示在事件传播阶段捕获事件,false表示在事件冒泡阶段捕获事件,一般我们设为false!

在这里所说的就是第三种:

addEventListener()添加句柄

方法用于向指定元素添加事件句柄

$(function () {
    var btn = $("button");
    for (var i in btn) {
        btn[i].addEventListener("click", function () {
            alert(this.innerHTML);
        }, true)
    }
})

在这里呢,是给所有button按钮添加了一个点击事件,当点击按钮时会弹出一个内容为按钮上内容的弹窗,addEventListener()方法一共有三个参数,第一个参数即事件名称,第二个参数是触发事件后所要给出的效果,最后一个则是判断在什么时候捕获事件。

RemoveEventlistener()移除方法添加的事件句柄,RemoveEventlistener()方法和addEventListener()方法用法参数一致

其次,有一个特例就是IE浏览器

IE中,每个元素和window对象都有两个方法:attachEvent方法和detachEvent方法。这两个方法和以上两个方法在作用上是相同的。但是呢,在IE浏览器中事件前需要加上一个on,且第三个参数也非为必要【在其他浏览器中默认为false】,也就是说IE浏览器中添加事件与移除事件的方法只有两个参数即可。

【最后,因为看的并不是很仔细,可能多有错漏,还请多多指正】

原文地址:https://www.cnblogs.com/wanghuanl/p/9318367.html