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 - 如何引入js代码
Mar 09 Javascript
模仿JQuery sortable效果 代码有错但值得看看
Nov 05 Javascript
关于火狐(firefox)及ie下event获取的两种方法
Dec 27 Javascript
javascript顺序加载图片的方法
Jul 18 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
Dec 12 Javascript
Javascript随机标签云代码实例
Jun 21 Javascript
用js动态添加html元素,以及属性的简单实例
Jul 19 Javascript
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
jquery实现提示语淡入效果
May 05 jQuery
关于JavaScript中的this指向问题总结篇
Jul 23 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
Sep 30 Javascript
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
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面向对象全攻略 (五) 封装性
2009/09/30 PHP
PHP CodeIgniter框架的工作原理研究
2015/03/30 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
PHP+Redis 消息队列 实现高并发下注册人数统计的实例
2018/01/29 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
Jquery getJSON方法详细分析
2013/12/26 Javascript
Egret引擎开发指南之发布项目
2014/09/03 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
2015/04/14 Javascript
js实现卡片式项目管理界面UI设计效果
2015/12/08 Javascript
js中获取 table节点各tr及td的内容简单实例
2016/10/14 Javascript
JS实现动态增加和删除li标签行的实例代码
2016/10/16 Javascript
js中通过getElementsByName访问name集合对象的方法
2016/10/31 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
2017/01/23 Javascript
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
2017/08/04 Javascript
Vue2 配置 Axios api 接口调用文件的方法
2017/11/13 Javascript
15个顶级开源JavaScript框架和库
2018/10/10 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
2019/03/07 Javascript
性能优化篇之Webpack构建速度优化的建议
2019/04/03 Javascript
微信小程序非跳转式组件授权登录的方法示例
2019/05/22 Javascript
详解Vue 的异常处理机制
2020/11/30 Vue.js
python批量替换多文件字符串问题详解
2018/04/22 Python
python之验证码生成(gvcode与captcha)
2019/01/02 Python
将python文件打包成EXE应用程序的方法
2019/05/22 Python
python实现接口并发测试脚本
2019/06/25 Python
numpy 返回函数的上三角矩阵实例
2019/11/25 Python
Keras中的两种模型:Sequential和Model用法
2020/06/27 Python
基于Django快速集成Echarts代码示例
2020/12/01 Python
CSS3 2D模拟实现摩天轮旋转效果
2016/11/16 HTML / CSS
简历中的自我评价范文
2014/02/05 职场文书
团日活动总结报告
2014/06/25 职场文书
高一学年自我鉴定范文(3篇)
2014/09/26 职场文书
建议书范文
2015/02/05 职场文书
解决hive中导入text文件遇到的坑
2021/04/07 Python
Python OpenCV快速入门教程
2021/04/17 Python
Python基础之pandas数据合并
2021/04/27 Python
windows系统搭建WEB服务器详细教程
2022/08/05 Servers