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 相关文章推荐
简短几句 通俗解释javascript的闭包
Jan 17 Javascript
解析js原生方法创建表格效率测试
Jul 08 Javascript
JavaScript实现动态创建CSS样式规则方案
Sep 06 Javascript
浅谈javascript中的闭包
May 13 Javascript
JavaScript的继承实现小结
May 07 Javascript
微信小程序 支付功能(前端)的实现
May 24 Javascript
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
vue项目中导入swiper插件的方法
Jan 30 Javascript
Vue 组件传值几种常用方法【总结】
May 28 Javascript
js实现简单模态框实例
Nov 16 Javascript
使用vue for时为什么要key【推荐】
Jul 11 Javascript
详解前端任务构建利器Gulp.js使用指南
Apr 30 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 获取MySQL数据库里所有表的实现代码
2011/07/13 PHP
php与flash as3 socket通信传送文件实现代码
2014/08/16 PHP
Zend Framework框架之Zend_Mail实现发送Email邮件验证功能及解决标题乱码的方法
2016/03/21 PHP
php7安装yar扩展的方法详解
2017/08/03 PHP
PHP+Redis 消息队列 实现高并发下注册人数统计的实例
2018/01/29 PHP
input+select(multiple) 实现下拉框输入值
2009/05/21 Javascript
javascript 面向对象编程 万物皆对象
2009/09/17 Javascript
Dom与浏览器兼容性说明
2010/10/25 Javascript
基于jQuery的试卷自动排版系统实现代码
2011/01/06 Javascript
JavaScript检查数字是否为整数或浮点数的方法
2015/06/09 Javascript
js实现简单秒表走动的时钟特效
2020/03/25 Javascript
Jquery attr()方法 属性赋值和属性获取详解
2016/04/15 Javascript
js实现点击图片自动提交action的简单方法
2016/10/16 Javascript
解析预加载显示图片艺术
2016/12/05 Javascript
Jquery获取radio选中的值
2017/05/05 jQuery
移动端手指放大缩小插件与js源码
2017/05/22 Javascript
详解vuejs几种不同组件(页面)间传值的方式
2017/06/01 Javascript
jQuery实现checkbox的简单操作
2017/11/18 jQuery
微信小程序手机号码验证功能的实例代码
2018/08/28 Javascript
angularjs通过过滤器返回超链接的方法
2018/10/26 Javascript
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
2019/01/18 Javascript
深入学习JavaScript 高阶函数
2019/06/11 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
2019/11/25 Javascript
Vue实现兄弟组件间的联动效果
2020/01/21 Javascript
Python的Flask站点中集成xhEditor文本编辑器的教程
2016/06/13 Python
Python猜数字算法题详解
2020/03/01 Python
自我鉴定模板
2013/10/29 职场文书
小学科学教学反思
2014/01/26 职场文书
母亲节演讲稿
2014/05/27 职场文书
安全宣传标语口号
2014/06/06 职场文书
民事诉讼代理授权委托书范本
2014/10/08 职场文书
实习单位意见
2015/06/04 职场文书
大学生暑期实践报告
2015/07/13 职场文书
Python 统计序列中元素的出现频度
2022/04/26 Python
讲解MySQL增删改操作
2022/05/06 MySQL
MySQL分布式恢复进阶
2022/07/23 MySQL