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 相关文章推荐
经常用的图片在容器中的水平垂直居中实例
Jun 10 Javascript
通过 Dom 方法提高 innerHTML 性能
Mar 26 Javascript
javascript 验证日期的函数
Mar 18 Javascript
jquery ui resize 中border-box的bug修正
Apr 26 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
May 25 Javascript
解析JavaScript中的字符串类型与字符编码支持
Jun 24 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
Oct 19 Javascript
jquery.cookie.js的介绍与使用方法
Feb 09 Javascript
JavaScript字符串检索字符的方法
Jun 23 Javascript
十分钟带你快速了解React16新特性
Nov 10 Javascript
js实现弹出框的拖拽效果实例代码详解
Apr 16 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
Jun 15 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使用ffmpeg给视频增加字幕显示的方法
2015/03/12 PHP
PHP使用mysql_fetch_row查询获得数据行列表的方法
2015/03/18 PHP
PHP数组实例详解
2016/06/26 PHP
PHP如何根据文件头检测文件类型实例代码
2018/10/14 PHP
JavaScript 基础篇之对象、数组使用介绍(三)
2012/04/07 Javascript
JS数学函数Exp使用说明
2012/08/09 Javascript
一个简单的瀑布流效果(主体形式自写)
2013/05/27 Javascript
javascript 手动给表增加数据的小例子
2013/07/10 Javascript
JS去除字符串两端空格的简单实例
2013/12/27 Javascript
addEventListener 的用法示例介绍
2014/05/07 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
2015/10/10 Javascript
基于jquery animate操作css样式属性小结
2015/11/27 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
2016/12/31 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
2017/01/23 Javascript
vue如何实现observer和watcher源码解析
2017/03/09 Javascript
Angular4学习笔记router的简单使用
2018/03/30 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
2019/05/17 Javascript
小程序云函数调用API接口的方法
2019/05/17 Javascript
bootstrap table插件动态加载表头
2019/07/19 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
2019/07/25 Javascript
Vue Element UI + OSS实现上传文件功能
2019/07/31 Javascript
vue cli3 配置proxy代理无效的解决
2019/10/30 Javascript
javaScript中indexOf用法技巧
2019/11/26 Javascript
Python实现树的先序、中序、后序排序算法示例
2017/06/23 Python
使用python实现接口的方法
2017/07/07 Python
对python实时得到鼠标位置的示例讲解
2018/10/14 Python
python初步实现word2vec操作
2020/06/09 Python
Django框架实现在线考试系统的示例代码
2020/11/30 Python
Html5适配iphoneX刘海屏的简单实现
2019/04/09 HTML / CSS
Java servlet面试题
2012/03/04 面试题
电大会计学自我鉴定
2014/02/06 职场文书
解除劳动合同协议书范本
2014/09/13 职场文书
高一课前三分钟演讲稿
2014/09/13 职场文书
个人收入证明模板
2014/09/18 职场文书
高中班主任培训心得体会
2016/01/07 职场文书
2016反腐倡廉警示教育心得体会
2016/01/13 职场文书