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 相关文章推荐
来自国外的30个基于jquery的Web下拉菜单
Jun 22 Javascript
jQuery在线选座位插件seat-charts特效代码分享
Aug 27 Javascript
基于Javascript实现倒计时功能
Feb 22 Javascript
js前端解决跨域问题的8种方案(最新最全)
Nov 18 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
Dec 06 Javascript
利用Promise自定义一个GET请求的函数示例代码
Mar 20 Javascript
vue组件三大核心概念图文详解
May 30 Javascript
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
JS实现移动端双指缩放和旋转方法
Dec 13 Javascript
有趣的JavaScript隐式类型转换操作实例分析
May 02 Javascript
Node.js 中如何收集和解析命令行参数
Jan 08 Javascript
vue keep-alive的简单总结
Jan 25 Vue.js
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
一个没有MYSQL数据库支持的简易留言本的编写
2006/10/09 PHP
WordPress开发中的get_post_custom()函数使用解析
2016/01/04 PHP
PHP读MYSQL中文乱码的快速解决方法
2016/10/01 PHP
Eclipse PHPEclipse 配置的具体步骤
2017/08/08 PHP
Yii2框架控制器、路由、Url生成操作示例
2019/05/27 PHP
JQUERY操作JSON实例代码
2010/02/09 Javascript
JavaScript几种形式的树结构菜单
2010/05/10 Javascript
判断及设置浏览器全屏模式
2014/04/20 Javascript
jQuery 隐藏和显示 input 默认值示例
2014/06/03 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
2015/02/13 Javascript
javascript实时显示当天日期的方法
2015/05/20 Javascript
coffeescript使用的方式汇总
2015/08/05 Javascript
解决JS请求服务器gbk文件乱码的问题
2015/10/16 Javascript
jQuery表格插件datatables用法详解
2020/11/23 Javascript
js重写方法的简单实现
2016/07/10 Javascript
javascript删除html标签函数cIsHTML
2017/01/09 Javascript
DOM事件探秘篇
2017/02/15 Javascript
解决vue 更改计算属性后select选中值不更改的问题
2018/03/02 Javascript
react-native-video实现视频全屏播放的方法
2018/03/19 Javascript
学习JS中的DOM节点以及操作
2018/04/30 Javascript
JavaScript中七种流行的开源机器学习框架
2018/10/11 Javascript
vue input输入框关键字筛选检索列表数据展示
2020/10/26 Javascript
layui清空,重置表单数据的实例
2019/09/12 Javascript
原生JS实现无缝轮播图片
2020/06/24 Javascript
浅谈js中的attributes和Attribute的用法与区别
2020/07/16 Javascript
Python实现输出程序执行进度百分比的方法
2017/09/16 Python
基于python 处理中文路径的终极解决方法
2018/04/12 Python
详解Python并发编程之从性能角度来初探并发编程
2019/08/23 Python
基于python3.7利用Motor来异步读写Mongodb提高效率(推荐)
2020/04/29 Python
python3 re返回形式总结
2020/11/20 Python
python 邮件检测工具mmpi的使用
2021/01/04 Python
C#和SQL Server的面试题
2016/08/12 面试题
个人授权委托书样本
2014/09/13 职场文书
2014年化验室工作总结
2014/11/21 职场文书
2015年青年志愿者协会工作总结
2015/04/27 职场文书
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
2021/05/25 Vue.js