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 相关文章推荐
js querySelector和getElementById通过id获取元素的区别
Apr 20 Javascript
javascript实现详细时间提醒信息效果的方法
Mar 11 Javascript
jQuery获得字体颜色16位码的方法
Feb 20 Javascript
Bootstrap实现input控件失去焦点时验证
Aug 04 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
Oct 27 Javascript
微信小程序学习之数据处理详解
Jul 05 Javascript
Vue打包后出现一些map文件的解决方法
Feb 13 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
Nov 04 Javascript
在Create React App中使用CSS Modules的方法示例
Jan 15 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
让 babel webpack vue 配置文件支持智能提示的方法
Jun 22 Javascript
详解基于原生JS验证表单组件xy-form
Aug 20 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 使用header函数设置HTTP头的示例解析 表头
2013/06/17 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
PHP连接MySQL数据库操作代码实例解析
2020/07/11 PHP
判断客户端浏览器是否安装了Flash插件的多种方法
2010/08/11 Javascript
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
2010/09/03 Javascript
Firefox中beforeunload事件的实现缺陷浅析
2012/05/03 Javascript
jquery无缝向上滚动实现代码
2013/03/29 Javascript
JavaScript每天定时更换皮肤样式的方法
2015/07/01 Javascript
针对初学者的jQuery入门指南
2015/08/15 Javascript
jQuery插件实现文件上传功能(支持拖拽)
2020/08/27 Javascript
JS 循环li添加点击事件 (闭包的应用)
2016/12/10 Javascript
详解vue父子模版嵌套案例
2017/03/04 Javascript
jquery动态添加带有样式的HTML标签元素方法
2018/02/24 jQuery
vue+webpack中配置ESLint
2018/11/07 Javascript
Vue页面刷新记住页面状态的实现
2019/12/27 Javascript
详解如何在Javascript中使用Object.freeze()
2020/10/18 Javascript
[06:09]辉夜杯主赛事开幕式
2015/12/25 DOTA
python实现数通设备tftp备份配置文件示例
2014/04/02 Python
Python的Django应用程序解决AJAX跨域访问问题的方法
2016/05/31 Python
python爬虫爬取快手视频多线程下载功能
2018/02/28 Python
Python生成器定义与简单用法实例分析
2018/04/30 Python
Python Pywavelet 小波阈值实例
2019/01/09 Python
pytorch 自定义数据集加载方法
2019/08/18 Python
Python中BeautifuSoup库的用法使用详解
2019/11/15 Python
Python matplotlib画曲线例题解析
2020/02/07 Python
ubuntu16.04升级Python3.5到Python3.7的方法步骤
2020/08/20 Python
Django限制API访问频率常用方法解析
2020/10/12 Python
苹果中国官方网站:Apple中国
2016/07/22 全球购物
潘多拉意大利官方网上商城:网上选购PANDORA珠宝
2018/10/07 全球购物
编写函数,将一个3*3矩阵转置
2013/10/09 面试题
开展党的群众路线教育实践活动方案
2014/02/05 职场文书
文体活动总结范文
2014/05/05 职场文书
淮阳太昊陵导游词
2015/02/10 职场文书
社区工作者个人总结
2015/02/28 职场文书
比较node.js和Deno
2021/04/27 Javascript
基于Apache Hudi在Google云构建数据湖平台的思路详解
2022/04/07 Servers