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 相关文章推荐
网上应用的一个不错common.js脚本
Aug 08 Javascript
js 控制页面跳转的5种方法
Sep 09 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
Nov 13 Javascript
JS显示下拉列表框内全部元素的方法
Mar 31 Javascript
onclick和onblur冲突问题的快速解决方法
Apr 28 Javascript
浅谈js构造函数的方法与原型prototype
Jul 04 Javascript
JavaScript蒙板(model)功能的简单实现代码
Aug 04 Javascript
C#微信小程序服务端获取用户解密信息实例代码
Mar 10 Javascript
javaScript 逻辑运算符使用技巧整理
May 03 Javascript
Angular2中select用法之设置默认值与事件详解
May 07 Javascript
解决node修改后需频繁手动重启的问题
May 13 Javascript
Vue组件为什么data必须是一个函数
Jun 11 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 实例化类的一点摘记
2008/03/23 PHP
php中autoload的用法总结
2013/11/08 PHP
最新制作ThinkPHP3.2.3完全开发手册
2015/11/23 PHP
js word表格动态添加代码
2010/06/07 Javascript
Jquery+ajax请求data显示在GridView上(asp.net)
2010/08/27 Javascript
jQuery操作checkbox选择(list/table)
2013/04/07 Javascript
浅析document.createDocumentFragment()与js效率
2013/07/08 Javascript
JS中for循序中延迟加载动态效果的具体实现
2013/08/18 Javascript
javascript实现checkBox的全选,反选与赋值
2015/03/12 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
2016/10/08 Javascript
javascript实现鼠标点击页面 移动DIV
2016/12/02 Javascript
JavaScript的继承实现小结
2017/05/07 Javascript
vue元素实现动画过渡效果
2017/07/01 Javascript
JS实现验证码倒计时的注册页面
2018/01/02 Javascript
vue2.0 父组件给子组件传递数据的方法
2018/01/15 Javascript
详解webpack打包nodejs项目(前端代码)
2018/09/19 NodeJs
angular4+百分比进度显示插件用法示例
2019/05/05 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
2019/07/19 Javascript
[02:39]DOTA2英雄基础教程 天怒法师
2013/11/29 DOTA
[14:03]2017DOTA2亚洲邀请赛开幕式:12神兵演绎水墨中华
2017/04/01 DOTA
[49:02]KG vs Infamous 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
Python将多个excel文件合并为一个文件
2018/01/03 Python
Python3.5文件读与写操作经典实例详解
2019/05/01 Python
Python3.7实现验证码登录方式代码实例
2020/02/14 Python
Python如何在单元测试中给对象打补丁
2020/08/03 Python
Python创建临时文件和文件夹
2020/08/05 Python
以特惠价提供在线奢侈品购物:FRMODA.com
2018/01/25 全球购物
俄罗斯化妆品和香水网上商店:Iledebeaute
2019/01/03 全球购物
拉夫劳伦爱尔兰官方网站:Ralph Lauren爱尔兰
2020/04/10 全球购物
学生周末长期请假条
2014/02/15 职场文书
初中学校军训方案
2014/05/09 职场文书
幼儿园教师师德承诺书
2015/04/28 职场文书
Java比较两个对象中全部属性值是否相等的方法
2021/08/07 Java/Android
利用python做数据拟合详情
2021/11/17 Python
Python作用域和名称空间的详细介绍
2022/04/13 Python
CSS文本阴影 text-shadow 悬停效果详解
2022/05/25 HTML / CSS