JavaScript之坑了我--事件绑定原理

论坛 期权论坛 编程之家     
选择匿名的用户   2021-6-1 00:22   615   0


html元素事件绑定共两种方式:

(1)行内式:
<--input type="”button”" data-ke-οnclick="”alert(‘haha!’);”/">

注意:原来事件处理过程可以相当于一个函数的执行语句;

-- <--input type="button" data-ke-οnclick="
alert('luozhixiao');

var arr2 = [['luozhixiao',22,'huazhou'],['limeisheng',44,'meizhou']];

for(var i in arr2){

for(var j in arr2[i]){

console.log(arr2[i][j]);

}
}

"/>


(2)动态绑定:(目前做项目最流行的方式:元素、样式、事件分离,解耦!!!)

function myAlert(){

alert("dianjile");

}

document.getElementById("btn1").onclick = myAlert;

原理注意

这种其实是:对象obj的属性onclick被赋值了:

Obj . onclick = myAlert ; //即: Obj . onclick();

即浏览器监听这个html元素上的事件,一旦发生“点击”,则执行onclick();

不要写成了:document.getElementById("btn1").onclick = myAlert();这样加了括号的话,变成了浏览器执行到这一行时,先执行myAlert(),然后将此函数的返回值赋给onclick事件

当然如果真的遇上奇葩需求,可以象下面这样:

var i = 0;

function myAlert(){//根据条件判断应该返回哪个函数

if(i == 0){

return function(){alert(“条件不足,无法登录!”) ; } ;

}else{

return function(){alert(“条件充足,请登录!”) ; } ;

}

}

document.getElementById("btn1").onclick = myAlert();这样的话,myAlert()执行后返回值就为一个函数

(3)添加事件监听:当同一个html元素的同一个事件需要添加多个函数时使用。
兼容性注意:

   基于IE内核的浏览器:attachEvent(eventName , callback);仅仅支持冒泡模型 

   基于W3C标准的浏览器:addEventListener(eventName , callback,capture);

           当capture ==false , 默认值:冒泡模型;

               当capture == true , 捕捉模型;

注意:低版本的IE内核浏览器不支持addEventListener仅支持attachEvent,而且只支持冒泡模型,而且先绑定的function后执行(即倒序执行),事件名称需要“on”前缀。所以编程时要注意兼容性的问题。

   (1)document.getElementById("btn1").attachEvent("onclick",fn1); //冒泡模型

document.getElementById("btn1").attachEvent("onclick",fn2); //冒泡模型

//倒序执行:先执行fn2,再执行fn1


(2)document.getElementById("btn1").addEventListener("click",fn1,false);//冒泡模型

document.getElementById("btn1").addEventListener("click",fn2,true);//监听模型

   //正序执行。(还是这样比较符合我们人类的思维吧!)


然而,为了解决兼容性问题,我们可以这样:

  事件监听时的兼容性问题统一解决方案:jquery源码实现也是如此。



function addEvent(obj , type , eventName){

if(window.attachEvent){//如果是基于IE

obj.attachEvent("on"+type,eventName);

}else{//如果是基于W3C

obj.addEventListener(type,eventName);

}

}


function fn1(){alert("fn1执行...");}

function fn2(){alert("fn2执行...");}


addEvent(document.getElementById("btn1"),"click","fn1");

addEvent(document.getElementById("btn1"),"click","fn2");



来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/29900383/viewspace-1822652/,如需转载,请注明出处,否则将追究法律责任。

转载于:http://blog.itpub.net/29900383/viewspace-1822652/

分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:3875789
帖子:775174
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP