本篇主要介绍HTML元素事件的注册、注销的方式。
1. HTML 事件(一) 事件的介绍
2. HTML 事件(二) 事件的注册与注销
3. HTML 事件(三) 事件流[未发布]
4. HTML 事件(四) 模拟事件操作[未发布]
1.注册事件:介绍通过元素的事件属性、addEventListener()以及attachEvent()方法进行事件的注册。
2.注销事件:介绍通过removeEventListener()、detachEvent()以及事件属性赋值为null来进行事件的注销。
注册事件的方式其实有2种:一种 属性注册 ,另一种通过 方法注册 。
① 属性注册 方式又可分为在HTML元素内的事件属性赋值和通过JS指定元素对象的事件属性。
② 方法注册 方式可通过addEventListener()或attachEvent()方法进行事件的注册。
说明:在HTML页面中,设置元素属性为一个函数。
语法:<button onlick="sayHello()">点击</button>
注意:事件属性是以" on "开头,后面跟着事件名称。如:onclick、onload。
function sayHello() { console.log('hello') }
<button onclick="sayHello()">点击</button>
说明:通过JS获取元素的对象,设置其事件属性为一个事件处理程序。
语法:EventTarget.onEventName=function(e){};
注意:事件属性是以" on "开头,后面跟着事件名称。如:onclick、onload。
唯一性:属性注册具有唯一性;同一个事件,最后注册的处理程序将会覆盖前面注册的处理程序。
// 注册body的click事件 document.body.onclick = function (e) { alert(1); };
document.body.onclick=function(e){ console.log(1); } // 会覆盖前面注册的事件处理程序 document.body.onclick=function(e){ console.log(2); } document.body.click(); // => 2 :只输出后面属性注册的
说明:在JS中,window、document、HtmlElement等对象可以通过addEventListener()方法注册事件的处理程序。
语法:EventTarget.addEventListener(eventName, eventHandler, |useCapture )
①eventName {string} :所要注册的事件名称,不区分大小写。此名称不需要像注册事件属性那样前缀加上" on "。如注册鼠标点击事件,写为click。
②eventHandler {function | function Object} :函数或者函数对象。事件触发时所需要执行的函数;当使用函数对象多次注册同一事件时,只当注册一遍。
③useCapture {boolean} 可选 :是否处于捕获阶段,默认为false。
多次注册:addEventListener()方法能为同一个对象的同一事件注册多次。当发生此事件时,注册的处理事件程序将按照注册先后顺序执行。
①IE9之前的IE的不支持此方法,可使用attachEvent()代替。
②若使用相同的事件处理程序 对象 多次注册在同一个事件上,只算注册一次。
document.body.addEventListener('click',function(e){ console.log('1'); }); document.body.addEventListener('click',function(e){ console.log('2'); }); document.body.click(); // => 1,2
function sayHello(){ console.log('hello'); } document.body.addEventListener('click',sayHello); // 使用处理程序多次注册同一事件,只当注册一次 document.body.addEventListener('click',sayHello); document.body.click(); // => hello :只输出一遍
说明:IE9之前的IE版本可通过此方法注册事件。
语法:EventTarget.attachEvent(eventName, eventHandler)
①eventName {string} :所要注册的事件名称, 区分大小写 。这里的名称跟事件属性一样,以" on "开头,后面跟着事件名称。如:onclick、onload。
②eventHandler {function | function Object} :函数或者函数对象。事件触发时所需要执行的函数;当使用函数对象多次注册同一事件时,可注册多次(addEventListener()方法只当注册一次)。
多次注册:attachEvent()方法能为同一个对象的同一事件注册多次。当触发此事件时,也会依次执行。
function say(){ console.log('1'); } document.body.attachEvent('onclick',say); document.body.attachEvent('onclick',say); // say第二次注册同一事件 document.body.click(); // => 1 1 :输出了2次say函数
JQuery中的事件注册方式对多浏览器的差异性进行了解决:判断元素是否含有addEventListener()或者attachEvent()方法。
function add(element,type, eventHandle){ if (element.addEventListener) { element.addEventListener(type, eventHandle, false); } else if (element.attachEvent) { element.attachEvent("on" + type, eventHandle); } }
可以注册元素的事件, 相应的可以也注销元素的事件。
JS中,可调用removeEventListener()[对应于addEventListener()] 和detachEvent()[对应于attachEvent()]来注销元素的某个事件指定的处理程序,也可以给事件属性赋值null来注销此事件的所有绑定。
说明:注销通过addEventListener()注册的事件处理程序。
语法:EventTarget.removeEventListener(eventName, eventHandlerObj)
①eventName {string} :所要注销的事件名称,不区分大小写。此名称不需要像注册事件属性那样前缀加上" on "。如注册鼠标点击事件,写为click。
②eventHandlerObj {function Object} :函数对象。传入一个函数体是没有效果的。
function sayHello(e) { console.log('1'); } // 注册body click事件 document.body.addEventListener('click', sayHello); // 注销body click事件的sayHello函数 document.body.removeEventListener('click',sayHello); document.body.click(); // 触发click事件,不输出任何结果
function sayHello(e) { console.log('1'); } // 注册body click事件 document.body.addEventListener('click', sayHello); // 第二个参数为函数体,虽然跟sayHello函数的内容一样,但不会注销 document.body.removeEventListener('click', function(e) { console.log('1'); }); document.body.click(); // => 1 :输出结果为1,并没有注销成功
说明:注销通过attachEvent()注册的事件处理程序。
语法:EventTarget.detachEvent(eventName, eventHandlerObj)
①eventName {string} :所要注销的事件名称,区分大小写。这里的名称跟事件属性一样,以"on"开头,后面跟着事件名称。如:onclick、onload。
②eventHandlerObj {function Object} ::函数对象。传入一个函数体是没有效果的。
function sayHello() { console.log('1'); } document.body.attachEvent('onclick', sayHello); document.body.detachEvent('onclick', sayHello); // 注销事件 document.body.click(); // 不输出结果
function sayHello() { console.log('1'); } document.body.attachEvent('onclick', sayHello); // 第二个参数为函数体,虽然跟sayHello函数的内容一样,但不会注销 document.body.detachEvent('onclick', function (e) { console.log('1'); }); document.body.click(); // => 1 :输出结果为1,并没有注销成功
因为attachEvent()可以把一个函数对象多次注册到元素同一个事件上,所以调用一次detachEvent()只能注销掉一次。
function sayHello() { console.log('1'); } document.body.attachEvent('onclick', sayHello); document.body.attachEvent('onclick', sayHello); // 注册了2次 document.body.click(); // => 1 1:输出2次 document.body.detachEvent('onclick', sayHello); // 注销1次 document.body.click(); // => 1 :输出结果为1,只注销了1次
给对象的事件属性赋值为null,可取消此事件的所有注册过的处理事件程序。
document.body.addEventListener('onclick', function(e){ console.log(1); }); document.body.addEventListener('onclick', function(e){ console.log(2); }); document.body.onclick=null; // onclick属性赋值为null,相当于注销了onclick事件 document.body.click(); // 无操作
================================== 系列文章 ==========================================