一、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.onclick=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)
}

函数语法:Js之on和addEventListener的使用与不同的更多相关文章

  1. 表值函数与JS中split()的联系

    在公司用云平台做开发就是麻烦 ,做了很多功能或者有些收获,都没办法写博客,结果回家了自己要把大脑里面记住的写出来. split()这个函数我们并不陌生,但是当前台有许多字段然后随意勾选后的这些参数传递 ...

  2. 我自己的Javascript 库,封装了一些常用函数 Kingwell.js

    我自己的Javascript 库,封装了一些常用函数 Kingwell.js 博客分类: Javascript javascript 库javascript库  现在Javascript库海量,流行的 ...

  3. Js之on与addEventListener的使用与两者的不同

    Js之on和addEventListener的使用与不同 一.首先介绍两者的用法: 1.on的用法:以onclick为例 第一种: obj.onclick = function(){ //do som ...

  4. jquery change() 函数 语法

    jquery change() 函数 语法 作用:当元素的值发生改变时,会发生 change 事件.该事件仅适用于文本域(text field),以及 textarea 和 select 元素.cha ...

  5. jquery blur()函数 语法

    jquery blur()函数 语法 作用:当元素失去焦点时发生 blur 事件.blur() 函数触发 blur 事件,或者如果设置了 function 参数,该函数也可规定当发生 blur 事件时 ...

  6. JavaScript的使用以及JS常用函数(JS 遍历数组和集合)

    JavaScript入门 学习总结 1. 什么是 JavaScript 2. JavaScript 的特点 3. JS的使用 编写位置 基本语法 变量 打印变量 数据类型 innerHTML和inne ...

  7. Linux下多进程编程之exec函数语法及使用实例

    exec函数族 1)exec函数族说明 fork()函数用于创建一个子进程,该子进程几乎复制了父进程的全部内容,但是,这个新创建的进程如何执行呢?exec函数族就提供了一个在进程中启动另一个程序执行的 ...

  8. Shell函数语法

    Shell函数语法 定义函数: function   函数名(){ 指令... } 调用函数,方法1: 函数名 调用函数,方法2: 函数名  参数一   参数二 return在函数里面使用会跳出函数并 ...

  9. JQuery的ready函数与JS的onload的区别详解

    JQuery的ready函数与JS的onload的区别:1.执行时间window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行.$(document).ready()是DOM结构绘制 ...

随机推荐

  1. QML学习笔记(七)— 实现可拖拽、编辑、选中的ListView

    鼠标单击可选中当前项,头部呈绿色显示:按压当前项可进行拖拽更换列表项位置:点击数据可以进行编辑: GitHub:八至 作者:狐狸家的鱼 这里是自己定义的model,有些字体和颜色都是使用的全局属性, ...

  2. HEOI2019 游记——240秒处的起死回生

    我还没死 Day-1 最后一场模拟赛! T1:自然数幂次和再前缀和,还是O(k)次多项式,拉格朗日插值,,,,,不能总想斯特林数啊!!! T2:神仙DP预处理... T3:AC自动机+LCA处差分+暴 ...

  3. WebClient请求接口,get和post方法

    1,get方式 string URI = "url"; //实例化 WebClient client = new WebClient(); // client.UseDefault ...

  4. 第三十篇-ToolBar的使用

    效果图: 创建标题栏,将原本的Title隐藏,并在菜单栏中设置选项. 一.拖入一个ToolBar组件,并在res/values/styles.xml中将原本的标题栏隐藏,添加<item name ...

  5. HDU 5965 扫雷

    扫雷游戏是晨晨和小璐特别喜欢的智力游戏,她俩最近沉迷其中无法自拔. 该游戏的界面是一个矩阵,矩阵中有些格子中有一个地雷,其余格子中没有地雷. 游戏中,格子可能处于己知和未知的状态.如果一个己知的格子中 ...

  6. ELK-6.5.3学习笔记–使用filebeat管理微服务日志

    微服务日志打印. 转载于http://www.eryajf.net/2369.html 上边是输出了nginx日志,从而进行展示,以及各种绘图分析,而现在的需求是,要将微服务当中的日志汇总到elk当中 ...

  7. python操作execl学习笔记(一)

    本节只记录关于execl的读操作: execl 内容及格式 python3 #!/usr/bin/env python #-*- coding:utf-8 -*- import xlrd import ...

  8. vue基础篇---watch监听

    watch可以让我们监控一个值的变化.从而做出相应的反应. 示例: <div id="app"> <input type="text" v-m ...

  9. tomcat如何访问非webapp下的资源文件

    只要在%tomcathome%\conf\server.xml文件,在标签中加入文件中加入如下代码即可: <Host name="localhost" appBase=&qu ...

  10. Linux记录-JMX监控JAVA进程

    3.修改xxx.sh 加入export JAVA_OPTS="-Dcom.sun.management.jmxremote.authenticate=false -Dcom.sun.mana ...