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 相关文章推荐
基于JQuery实现鼠标点击文本框显示隐藏提示文本
Feb 23 Javascript
Javascript无参数和有参数类继承问题解决方法
Mar 02 Javascript
JavaScript中常见的字符串操作函数及用法汇总
May 04 Javascript
jquery彩色投票进度条简单实例演示
Jul 23 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
Mar 21 Javascript
Vue之Watcher源码解析(2)
Jul 19 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
Dec 11 Javascript
JS操作字符串转数字的常见方法示例
Oct 29 Javascript
Javascript原生ajax请求代码实例
Feb 20 Javascript
原生javascript中this几种常见用法总结
Feb 24 Javascript
使用Node.js实现base64和png文件相互转换的方法
Mar 11 Javascript
Vue 实现拨打电话操作
Nov 16 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
根德YB400的电路分析
2021/03/02 无线电
超级简单的发送邮件程序
2006/10/09 PHP
URL Rewrite的设置方法
2007/01/02 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
jQuery 性能优化手册 推荐
2010/02/23 Javascript
JavaScript OOP面向对象介绍
2010/12/02 Javascript
判断在css加载完毕后执行后续代码示例
2014/09/03 Javascript
基于Css3和JQuery实现打字机效果
2015/08/11 Javascript
使用jquery.qrcode.js生成二维码插件
2016/10/17 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
2017/03/09 Javascript
详解Angular 4 表单快速入门
2017/06/05 Javascript
微信小程序使用navigateTo数据传递的实例
2017/09/26 Javascript
VuePress 静态网站生成方法步骤
2019/02/14 Javascript
详解JavaScript 的变量
2019/03/08 Javascript
vue获取验证码倒计时组件
2019/08/26 Javascript
浅析TypeScript 命名空间
2020/03/19 Javascript
Python简单网络编程示例【客户端与服务端】
2017/05/26 Python
Windows 7下Python Web环境搭建图文教程
2018/03/20 Python
python中实现控制小数点位数的方法
2019/01/24 Python
在VS2017中用C#调用python脚本的实现
2019/07/31 Python
python KNN算法实现鸢尾花数据集分类
2019/10/24 Python
Python urllib3软件包的使用说明
2020/11/18 Python
Under Armour美国官网:美国知名高端功能性运动品牌
2016/09/05 全球购物
美国领先的男士和女士内衣购物网站:Freshpair
2019/02/25 全球购物
欧姆龙医疗欧洲有限公司:Omron Healthcare Europe B.V
2020/06/13 全球购物
阿尔卡特(中国)的面试题目
2014/08/20 面试题
校园联欢晚会主持词
2014/03/17 职场文书
护士自我鉴定总结
2014/03/24 职场文书
应届生自荐书
2014/06/23 职场文书
房屋出租协议书范本(标准版)
2014/09/24 职场文书
房屋维修申请报告
2015/05/18 职场文书
2015年学校医务室工作总结
2015/07/20 职场文书
2016年全国爱牙日宣传活动总结
2016/04/05 职场文书
如何书写你的职业生涯规划书?
2019/06/27 职场文书
通过Python把学姐照片做成拼图游戏
2022/02/15 Python
Java数组详细介绍及相关工具类
2022/04/14 Java/Android