js修改onclick动作的四种方法(推荐)


Posted in Javascript onAugust 18, 2016

第一种:button.onclick = Function("alert('hello');");

第二种:button.onclick = function(){alert("hello"); };

第三种:button.onclick = myAlert;

              function myAlert(){
                     alert("hello");
              }

第四种:

这种情况更加动态,更为实用,而且还能添加多个函数(添加的事件的顺序即执行顺序),呵呵

if(window.addEventListener){ // Mozilla, Netscape, Firefox
    //element.addEventListener(type,listener,useCapture); 
    button.addEventListener('click', alert('11'), false);
    button.addEventListener('click', alert('12'), false);//执行顺序11 -> 12
  } else { // IE
    button.attachEvent('onclick', function(){alert('21');});
    button.attachEvent('onclick', function(){alert('22');});执行顺序22 -> 21
  }

实例讲解:

button.onclick = Function ("alert('31');");
  button.onclick = Function ("alert('32');");
  button.onclick = Function ("alert('33');"); //如果这样写,那么将会只有最后一个方法被执行

  button.attachEvent("onclick", function(){alert('41');});
  button.attachEvent("onclick", function(){alert('42');});
  button.attachEvent("onclick", function(){alert('43');}); //如果这样写,三个方法都会被执行

  // 当然,你也可以这样写
  button.onclick = Function("alert('51');");
  button.attachEvent("onclick", function(){alert('52');});

   //对应移除事件
  detachEvent('onclick' ,func);//ie下使用删除事件func
  removeEventListener('click' ,func);//Mozilla下,删除事件func

以上这篇js修改onclick动作的四种方法(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
getElementById在任意一款浏览器中都可以用吗的疑问回复
May 13 Javascript
JS处理VBArray的函数使用说明
May 11 Javascript
js中reverse函数的用法详解
Dec 26 Javascript
基于JavaScript实现类似于百度学术高级检索功能
Mar 02 Javascript
PassWord输入框代码分享
Jun 07 Javascript
浅谈JS中逗号运算符的用法
Jun 12 Javascript
JavaScript 数据类型详解
Mar 13 Javascript
你可能不知道的JSON.stringify()详解
Aug 17 Javascript
js 图片转base64的方式(两种)
Apr 24 Javascript
微信小程序发布新版本时自动提示用户更新的方法
Jun 07 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
Oct 28 Javascript
JS数组方法reverse()用法实例分析
Jan 18 Javascript
AngularJS 整理一些优化的小技巧
Aug 18 #Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
Aug 18 #Javascript
js获取form表单所有数据的简单方法
Aug 18 #Javascript
Javascript中浏览器窗口的基本操作总结
Aug 18 #Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
Aug 18 #Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
Aug 18 #Javascript
jQuery fadeOut 异步实例代码详解
Aug 18 #Javascript
You might like
php_pdo 预处理语句详解
2016/11/21 PHP
微信公众号模板消息群发php代码示例
2016/12/29 PHP
js解析与序列化json数据(一)json.stringify()的基本用法
2013/02/01 Javascript
js中document.write使用过程中的一点疑问解答
2014/03/20 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
2014/10/30 Javascript
JS实现超简单的仿QQ折叠菜单效果
2015/09/21 Javascript
Bootstrap项目实战之子栏目资讯内容
2016/04/25 Javascript
每日十条JavaScript经验技巧(二)
2016/06/23 Javascript
bootstrap table实例详解
2017/01/06 Javascript
JS中正则表达式全局匹配模式 /g用法详解
2017/04/01 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
2018/08/28 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
2019/04/25 Javascript
python双向链表实现实例代码
2013/11/21 Python
让python在hadoop上跑起来
2016/01/27 Python
浅谈Python中用datetime包进行对时间的一些操作
2016/06/23 Python
Python守护进程和脚本单例运行详解
2017/01/06 Python
使用Python绘制图表大全总结
2017/02/11 Python
Python爬虫框架Scrapy常用命令总结
2018/07/26 Python
Python使用dict.fromkeys()快速生成一个字典示例
2019/04/24 Python
Pytorch使用MNIST数据集实现CGAN和生成指定的数字方式
2020/01/10 Python
Python线程条件变量Condition原理解析
2020/01/20 Python
keras分类模型中的输入数据与标签的维度实例
2020/07/03 Python
纯css3实现思维导图样式示例
2018/11/01 HTML / CSS
Annoushka英国官网:英国奢侈珠宝品牌
2018/10/20 全球购物
美国环保妈妈、儿童和婴儿用品购物网站:The Tot
2019/11/24 全球购物
德国的各种媒体在线商店:Thalia.de(书籍、电子书、玩具等)
2020/10/08 全球购物
JPA面试常见问题
2016/11/14 面试题
DTD的含义以及作用
2014/01/26 面试题
毕业横幅标语
2014/10/08 职场文书
介绍信范文
2015/01/31 职场文书
公司内部升职自荐信
2015/03/27 职场文书
python 调用js的四种方式
2021/04/11 Python
完美解决golang go get私有仓库的问题
2021/05/05 Golang
go语言基础 seek光标位置os包的使用
2021/05/09 Golang
go语言使用Casbin实现角色的权限控制
2021/06/26 Golang
mysql查看表结构的三种方法总结
2022/07/07 MySQL