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学习总结之元素的相对定位和选择器(持续更新)
Apr 26 Javascript
js简单的弹出框有关闭按钮
May 05 Javascript
javascript模拟post提交隐藏地址栏的参数
Sep 03 Javascript
JavaScript类继承及实例化的方法
Jul 25 Javascript
详解Angular开发中的登陆与身份验证
Jul 27 Javascript
关于Javascript中defer和async的区别总结
Sep 20 Javascript
JavaScript之class继承_动力节点Java学院整理
Jul 03 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
Sep 10 Javascript
vue引用js文件的多种方式(推荐)
May 17 Javascript
vue.js实现的全选与全不选功能示例【基于elementui】
Dec 03 Javascript
浅谈Vuex注入Vue生命周期的过程
May 20 Javascript
vue动态配置模板 'component is'代码
Jul 04 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反弹shell实现代码
2009/04/22 PHP
PHP常用技术文之文件操作和目录操作总结
2014/09/27 PHP
php中使用sftp教程
2015/03/30 PHP
Jquery 组合form元素为json格式,asp.net反序列化
2009/07/09 Javascript
基于jQuery的左右滚动实现代码
2010/12/03 Javascript
获取客户端网卡MAC地址和IP地址实现JS代码
2013/03/17 Javascript
Extjs4 关于Store的一些操作(加载/回调/添加)
2013/04/18 Javascript
防止jQuery ajax Load使用缓存的方法小结
2014/02/22 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
2015/01/22 Javascript
javascript文本框内输入文字倒计数的方法
2015/02/24 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
2015/08/17 Javascript
详解javascript事件绑定使用方法
2016/10/20 Javascript
React学习笔记之条件渲染(一)
2017/07/02 Javascript
基于Vue2.X的路由和钩子函数详解
2018/02/09 Javascript
jQuery插件jsonview展示json数据
2018/05/26 jQuery
Vue中的methods、watch、computed的区别
2018/11/26 Javascript
详解vue组件中使用路由方法
2019/02/12 Javascript
angularjs1.X 重构controller 的方法小结
2019/08/15 Javascript
关于vue里页面的缓存详解
2019/11/04 Javascript
微信小程序吸底区域适配iPhoneX的实现
2020/04/09 Javascript
JavaScript实现猜数字游戏
2020/05/20 Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
2020/07/19 Javascript
javascript实现时间日期的格式化的方法汇总
2020/08/06 Javascript
Python性能优化技巧
2015/03/09 Python
pymongo实现控制mongodb中数字字段做加法的方法
2015/03/26 Python
基于ID3决策树算法的实现(Python版)
2017/05/31 Python
解决.ui文件生成的.py文件运行不出现界面的方法
2019/06/19 Python
Django配置文件代码说明
2019/12/04 Python
Python如何测试stdout输出
2020/08/10 Python
巴西宠物店在线:Geração Pet
2017/05/31 全球购物
美国汽车性能部件和赛车零件网站:Vivid Racing
2018/03/27 全球购物
公司领导班子对照材料
2014/08/18 职场文书
班子个人四风问题整改措施
2014/10/04 职场文书
小学体育组工作总结
2015/08/13 职场文书
2019年度开业庆典祝福语大全!
2019/07/05 职场文书
Python OpenGL基本配置方式
2022/05/20 Python