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 相关文章推荐
Prototype最新版(1.5 rc2)使用指南(1)
Jan 10 Javascript
js 获取浏览器高度和宽度值(多浏览器)
Sep 02 Javascript
javascript 禁用IE工具栏,导航栏等等实现代码
Apr 01 Javascript
jQuery UI设置固定日期选择特效代码分享
Aug 27 Javascript
jQuery EasyUI菜单与按钮详解
Jul 13 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
Oct 20 Javascript
JS实战篇之收缩菜单表单布局
Dec 10 Javascript
基于JavaScript实现本地图片预览
Feb 08 Javascript
使用gulp搭建本地服务器并实现模拟ajax
Apr 05 Javascript
Node.js开发第三方微信公众平台
Jun 05 Javascript
Vue.js数字输入框组件使用方法详解
Oct 19 Javascript
flexible.js实现移动端rem适配方案
Apr 07 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
给海燕B411配件机起死回生配上件
2021/03/02 无线电
邮箱正则表达式实现代码(针对php)
2013/06/21 PHP
php网页标题中文乱码的有效解决方法
2014/03/05 PHP
主流PHP框架的优缺点对比分析
2014/12/25 PHP
Windows下Apache + PHP SESSION丢失的解决过程全纪录
2015/04/07 PHP
PHP购物车类Cart.class.php定义与用法示例
2016/07/20 PHP
PHP 命名空间和自动加载原理与用法实例分析
2020/04/29 PHP
javascript数组的扩展实现代码集合
2008/06/01 Javascript
Jquery之Ajax运用 学习运用篇
2011/09/26 Javascript
jsp+javascript打造级连菜单的实例代码
2013/06/14 Javascript
JavaScript 中的 this 工作原理
2018/06/20 Javascript
Vue 用Vant实现时间选择器的示例代码
2019/10/25 Javascript
vue实现两个组件之间数据共享和修改操作
2020/11/12 Javascript
学习python (1)
2006/10/31 Python
删除目录下相同文件的python代码(逐级优化)
2012/05/25 Python
Python文件操作类操作实例详解
2014/07/11 Python
Windows下安装python2.7及科学计算套装
2015/03/05 Python
Python保存MongoDB上的文件到本地的方法
2016/03/16 Python
python实现外卖信息管理系统
2018/01/11 Python
python实现图片筛选程序
2018/10/24 Python
Python中整数的缓存机制讲解
2019/02/16 Python
Python将json文件写入ES数据库的方法
2019/04/10 Python
详解Python3 对象组合zip()和回退方式*zip
2019/05/15 Python
python将邻接矩阵输出成图的实现
2019/11/21 Python
python通过移动端访问查看电脑界面
2020/01/06 Python
python GUI库图形界面开发之PyQt5下拉列表框控件QComboBox详细使用方法与实例
2020/02/27 Python
python实现QQ邮箱发送邮件
2020/03/06 Python
虚拟环境及venv和virtualenv的区别说明
2021/02/05 Python
日本土著品牌,综合型购物网站:Cecile
2016/08/23 全球购物
美国领先的眼镜和太阳镜在线零售商:Glasses.com
2019/08/26 全球购物
毕业生的自我鉴定
2013/10/29 职场文书
大学生暑期实践感言
2014/02/26 职场文书
班组长安全工作职责
2014/07/15 职场文书
人力资源管理毕业求职信
2014/08/05 职场文书
生死牛玉儒观后感
2015/06/11 职场文书
利用JavaScript写一个简单计算器
2021/11/27 Javascript