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 相关文章推荐
防止页面被iframe(兼容IE,Firefox火狐)
Jul 04 Javascript
jQuery结合Json提交数据到Webservice,并接收从Webservice返回的Json数据
Feb 18 Javascript
jQuery中 delegate使用的问题
Jul 03 Javascript
javascript中对Date类型的常用操作小结
May 19 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
Jun 28 Javascript
Angular2 组件间通过@Input @Output通讯示例
Aug 24 Javascript
详解JS模块导入导出
Dec 20 Javascript
vue-devtools的安装步骤
Apr 23 Javascript
深入理解JS的事件绑定、事件流模型
May 13 Javascript
layui实现鼠标移动到单元格上显示数据的方法
Sep 11 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
Oct 16 Javascript
vue3.0中友好使用antdv示例详解
Jan 05 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
PHP 处理图片的类实现代码
2009/10/23 PHP
js和php邮箱地址验证的实现方法
2014/01/09 PHP
PHP内置过滤器FILTER使用实例
2014/06/25 PHP
PHP Ajax跨域问题解决方案代码实例
2020/08/01 PHP
模拟用户操作Input元素,不会触发相应事件
2007/05/11 Javascript
JavaScript经典效果集锦
2010/07/06 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
2013/11/21 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
2013/11/28 Javascript
JavaScript实现16进制颜色值转RGB的方法
2015/02/09 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
2015/03/28 Javascript
JavaScript 中 avalon绑定属性总结
2016/10/19 Javascript
Javascript 链式作用域详细介绍
2017/02/23 Javascript
Vue Cli与BootStrap结合实现表格分页功能
2017/08/18 Javascript
React+TypeScript+webpack4多入口配置详解
2019/08/08 Javascript
Node配合WebSocket做多文件下载以及进度回传
2019/11/07 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
2020/07/28 Javascript
解决vue watch数据的方法被调用了两次的问题
2020/11/07 Javascript
three.js显示中文字体与tween应用详析
2021/01/04 Javascript
JS实现点击掉落特效
2021/01/29 Javascript
[57:55]EG vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python爬取NUS-WIDE数据库图片
2016/10/05 Python
python reverse反转部分数组的实例
2018/12/13 Python
Python实现监控Nginx配置文件的不同并发送邮件报警功能示例
2019/02/26 Python
Python之lambda匿名函数及map和filter的用法
2019/03/05 Python
python实现滑雪者小游戏
2020/02/22 Python
在ipython notebook中使用argparse方式
2020/04/20 Python
Python requests.post方法中data与json参数区别详解
2020/04/30 Python
Python Switch Case三种实现方法代码实例
2020/06/18 Python
用python写一个带有gui界面的密码生成器
2020/11/06 Python
京东港澳售:京东直邮港澳台
2018/01/31 全球购物
Craghoppers德国官网:户外和旅行服装
2020/02/14 全球购物
设备技术员岗位职责
2015/04/11 职场文书
中标通知书范本
2015/04/17 职场文书
使用canvas仿Echarts实现金字塔图的实例代码
2021/11/11 HTML / CSS
Java8利用Stream对列表进行去除重复的方法详解
2022/04/14 Java/Android
pytorch实现加载保存查看checkpoint文件
2022/07/15 Python