JavaScript中事件的绑定与解绑 |
您所在的位置：网站首页 › js中常用事件的名称 › JavaScript中事件的绑定与解绑 |
JavaScript中事件的绑定与解绑
|
一、事件的绑定
在Javascript中，事件绑定一共有3种方式： ① 行内绑定 this指向window ② 动态绑定 dom对象.事件 = 事件的处理程序（通常是一个匿名函数） this指向了当前正在操作的dom对象③ 事件监听 addEventListener 三个参数 谷歌,火狐,IE11支持,IE8不支持 addEventListener 中的this指向当前绑定事件的对象 事件的类型无on attachEvent 两个参数 谷歌火狐不支持,IE11不支持,IE8支持 attachEvent中的this指向window 事件的类型有on 1. 对象.on事件名字=事件处理函数缺点: 如果绑定多个事件，前面的事件会被后面的事件覆盖 document.getElementById("btn").onclick = function () { console.log("第一"); }; document.getElementById("btn").onclick = function () { console.log("第二"); }; 2. 对象.addEventListener("没有on的事件名字",事件处理函数,false);解释：第三个参数在本篇文章的事件阶段中有解释 优点：可以绑定多个事件 缺点：谷歌、火狐、IE11支持,IE8不支持 document.getElementById("btn").addEventListener("click", function () { console.log("第一"); }, false); document.getElementById("btn").addEventListener("click", function () { console.log("第二"); }, false); 3. 对象.attachEvent("有on的事件名字",事件处理函数);优点：可以绑定多个事件 缺点：谷歌、火狐、IE11不支持,IE8支持 document.getElementById("btn").attachEvent("onclik", function () { console.log("第一"); }); document.getElementById("btn").attachEvent("click", function () { console.log("第二"); }, false); 4. 兼容代码 //为任意元素.绑定任意的事件, 任意的元素,事件的类型,事件处理函数 function addEventListener(element, type, fn) { //判断浏览器是否支持这个方法 if (element.addEventListener) { element.addEventListener(type, fn, false); } else if (element.attachEvent) { element.attachEvent("on" + type, fn); } else { element["on" + type] = fn; } } addEventListener(document.getElementById("btn"), "click", function () { console.log("码仙1"); }); addEventListener(document.getElementById("btn"), "click", function () { console.log("码仙2"); }); addEventListener(document.getElementById("btn"), "click", function () { console.log("码仙3"); }); 二、事件的解绑用什么方式绑定事件,就应该用对应的方式解绑事件 对象.on事件名字=事件处理函数 对象.on事件名字=null; --> 解绑事件 对象.addEventListener("没有on的事件类型",命名函数,false); 对象.removeEventListener("没有on的事件类型",函数名字,false); --> 解绑事件 对象.attachEvent("on事件类型",命名函数); 对象.detachEvent("on事件类型",函数名字); --> 解绑事件 1. 对象.on事件名字=null; document.getElementById("btn1").onclick = function () { console.log("码仙"); }; document.getElementById("btn2").onclick = function () { document.getElementById("btn1").onclick = null; }; 2. 对象.removeEventListener("没有on的事件类型",函数名字,false); function f1() { console.log("第一个"); }; function f2() { console.log("第二个"); }; document.getElementById("btn1").addEventListener("click", f1, false); document.getElementById("btn1").addEventListener("click", f2, false); //点击第二个按钮把第一个按钮的第一个点击事件解绑 document.getElementById("btn2").onclick = function () { //解绑事件的时候,需要在绑定事件的时候,使用命名函数 document.getElementById("btn1").removeEventListener("click", f1, false); document.getElementById("btn1").removeEventListener("click", f2, false); }; 3. 对象.detachEvent("on事件类型",函数名字); function f1() { console.log("第一个"); }; function f2() { console.log("第二个"); }; document.getElementById("btn1").attachEvent("onclick", f1); document.getElementById("btn1").attachEvent("onclick", f2); document.getElementById("btn2").onclick = function () { document.getElementById("btn1").detachEvent("onclick", f1); }; 4. 兼容代码 //绑定事件的兼容 function addEventListener(element, type, fn) { if (element.addEventListener) { element.addEventListener(type, fn, false); } else if (element.attachEvent) { element.attachEvent("on" + type, fn); } else { element["on" + type] = fn; } } //为任意的一个元素,解绑对应的事件 function removeEventListener(element, type, fnName) { if (element.removeEventListener) { element.removeEventListener(type, fnName, false); } else if (element.detachEvent) { element.detachEvent("on" + type, fnName); } else { element["on" + type] = null; } } function f1() { console.log("第一个"); } function f2() { console.log("第二个"); } addEventListener(document.getElementById("btn1"), "click", f1); addEventListener(document.getElementById("btn1"), "click", f2); document.getElementById("btn2").onclick = function () { removeEventListener(document.getElementById("btn1"), "click", f1); removeEventListener(document.getElementById("btn1"), "click", f2); }; 三、事件阶段通过 e.eventPhase 这个属性可以知道当前事件在哪个阶段 如果这个属性的值是: 1 ---->捕获阶段 2 ---->目标阶段 3 ---->冒泡阶段 一般默认都是冒泡阶段,很少用捕获阶段 冒泡阶段:从里向外 捕获阶段:从外向里 addEventListener方法的第三个参数是false的时候是冒泡阶段 addEventListener方法的第三个参数是true的时候是捕获阶段 #div1 { width: 300px; height: 200px; background-color: red; } #div2 { width: 250px; height: 150px; background-color: green; } #div3 { width: 200px; height: 100px; background-color: blue; } //同时注册点击事件 var objs = [document.getElementById("div3"), document.getElementById("div2"), document.getElementById("div1")]; objs.forEach(function (ele) { //遍历注册事件 ele.addEventListener("click", function (e) { //为每个元素绑定事件 console.log(this.id + " ====> " + e.eventPhase); }, true); });
多个元素嵌套,有层次关系,这些元素都注册了相同的事件,如果里面的元素的事件触发了,外面的元素的该事件自动的触发了 #div1 { width: 300px; height: 200px; background-color: red; } #div2 { width: 250px; height: 150px; background-color: green; } #div3 { width: 200px; height: 100px; background-color: blue; } document.getElementById("div1").onclick = function () { console.log(this.id); }; document.getElementById("div2").onclick = function () { console.log(this.id); }; document.getElementById("div3").onclick = function () { console.log(this.id); };
主要有on() bind() live() delegate()等几种，相对应的 解绑是off() unbind() die() undelegate() on()、bind()、live()、delegate()中除了bind()，其他的都可以给后来追加的元素对象添加绑定事件。 这几种方法中各自有对应支持的JQuery版本。 在给动态添加的页面元素绑定事件时，通常用on()方法 |
【本文地址】
今日新闻 |
推荐新闻 |