函数语法：Js之on和addEventListener的使用与不同

一、addEventListener语法

DOM标准：elem.addEventListener("事件名",函数对象,是否在捕获阶段触发)
---是否在捕获阶段触发=  true/false，捕获true,冒泡false[开发中都大多都用false]
addEventListener注意事项：
1.特别说明addEventListener不被IE9以下兼容，IE9以下用使用attachEvent()
obj.attachEvent(event,funtionName);
参数：
event:事件类型（需要写成“onclick”前面加on，这个与addEventListener不同）
funtionName:方法名（要参数是也是需要使用匿名函数来传参）

二、addEventListener与on的区别

1.on事件会被后面的on的事件覆盖
///addEventListener不被覆盖，可移除事件
/结果1,2
btn.addEventListener("click",f1,false);
btn.addEventListener("click",f2,false);
//btn.removeEventListener('click',f1,false);//移动f1，不执行
function f1(){alert(1)
}
function f2(){alert(2)
}//on后一个覆盖前一个,结果2，不能移动事件
btn.οnclick=f1;
btn.onclick= f2;
function f1(){alert(1)
}
function f2(){alert(2)
}

三、addEventListener的IE9以下不兼容

querySelector 和 querySelectorAll 方法很好用，可惜IE6、IE7不支持，document.getElementById都兼容

var  obtn = document.getElementById('tabs');
addEvent(obtn,'click',function(){alert("a")
})
// 添加事件监听
function addEvent(element, eventType, callback){if(element.addEventListener){element.addEventListener(eventType, callback, false);} else if(element.attachEvent){element.attachEvent('on' + eventType, callback);} else {element['on' + type] = callback;}
}

//这样写也语法也对
obtn['onclick']=function(){alert(1111111)
}

转载于:https://www.cnblogs.com/liubingyjui/p/10213787.html

函数语法：Js之on和addEventListener的使用与不同相关推荐

python导入模块的语法结构_python学习第五讲,python基础语法之函数语法,与Import导入模块....
python学习第五讲,python基础语法之函数语法,与Import导入模块. 一丶函数简介函数,就是一个代码块,这个代码块是别人写好的.我们调用就可以. 函数也可以称为方法. 1.函数语法定义 ...
原生js的attachEvent和addEventListener解决window.onload在一个页面只能执行一次的问题
原生js的attachEvent和addEventListener解决window.onload在一个页面只能执行一次的问题参考文章: (1)原生js的attachEvent和addEventLis ...
JQuery的ready函数与JS的onload的区别详解
JQuery的ready函数与JS的onload的区别: 1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行. $(document).ready()是DOM结 ...
C# Replace函数与JS replace函数
C# Replace函数与JS replace函数 C#的Replace函数会替换掉字符串中的所有要替换的字符.而JS中的replace函数只是替换第一次遇到的这个字符,如果后面还有该字符则不替换.这 ...
php语法介绍,PHP 函数语法介绍一
PHP 函数语法介绍一复制代码代码如下: function getAdder($x) { return function ($y) use ($x) { return $x + $y; }; } ...
php中reset()函数,php reset()函数语法
PHP reset() 函数定义和用法 reset()函数把数组的内部指针指向第一个元素,并返回这个元素的值.若失败,则返回 FALSE. reset()函数用来将数组指针设置回数组的开始位置.如果 ...
Generator函数语法
Generator函数语法基础概念 *星号的位置 next方法的参数 tips 基础概念 Generator 函数是 ES6 提供的种异步编程解决方案,语法行为与传统函数完全不同. 执行 Gene ...
VBA 自定义函数语法
VBA 自定义函数语法 Sub subName( [(argList)] ) argList 为参数列表,一个函数允许声明多个参数,各个参数之间用逗号( , )隔开.参数声明语法如下文. '参数的语法 ...
convert函数语法
convert函数语法: CONVERT(data_type(length), data_to_be_converted, style) data_type(length) 规定目标数据类型(带有 ...

函数语法：Js之on和addEventListener的使用与不同

函数语法：Js之on和addEventListener的使用与不同相关推荐

最新文章

热门文章