js修改onclick动作的四种方法(推荐)

第一种：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动作的四种方法(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js给onclick事件赋值，动态传参数实例解说

    我们先看看错误的例子 Html代码 复制代码 代码如下: <body> <input id="certid" type="text" value="123456" > <input id="btn" type="button" value="button" onclick=""> </body> Javascript代码

  • javascript中onclick(this)用法介绍

    this指触发事件的对象 复制代码 代码如下: <input id="myinput" type="text" value="javascript中onclick中的this" onclick="javascript:test(this);"/> 复制代码 代码如下: function test(obj){ alert(obj); //[object HTMLInputElement] alert(obj.id);

  • js动态添加的DIV中的onclick事件简单实例

    最简单的是这样: <input type="button" onclick="alert(this.value)" value="我是 button" /> 动态添加onclick事件: <input type="button" value="我是 button" id="bu"> <script type="text/javascript&quo

  • javascript 动态改变onclick事件触发函数代码

    javascript 动态改变onclick事件触发函数代码 function oc() { alert("原本的方法"); } function od() { alert("我改变方法了."); } function of() { document.getElementById('name').onclick = function(){ od(); }; } 原来的方法 通过点击,改变原来的方法的执行 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • js修改onclick动作的四种方法(推荐)

    第一种:button.onclick = Function("alert('hello');"); 第二种:button.onclick = function(){alert("hello"); }; 第三种:button.onclick = myAlert; function myAlert(){                      alert("hello");               } 第四种: 这种情况更加动态,更为实用,而且

  • 修改MySQL密码的四种方法总结(适合初学者!)

    修改MySQL密码的四种方法总结(适合初学者!)

    目录 前言 方法1:用set password命令 方法2:用mysqladmin 方法3:用update直接编辑user表 方法4:忘记密码处理方式 结束语 前言 作为初学者,对于MySQL密码的修改,目前我已知的有四种方法:前三种是在知道密码的情况下修改,因为需要我们先登录:最后一种适合忘记密码的情况下进行修改! 方法1:用set password命令 (1)首先要先登录MySQL: (2)修改密码格式为: set password for 用户名@localhost = password(

  • js改变css样式的三种方法推荐

    共用代码: <div id="div"> this is a div </div> var div=document.getElementById('div'); 第一种:用cssText div.style.cssText='width:250px;height:250px;border:1px red solid;'; 第二种:用setProperty() div.style.setProperty('width','250px'); div.style.s

  • 汇编语言有关在屏幕区显示字符的四种方法(推荐)

    李忠老师的<x86汇编语言:从实模式到保护模式>中第五章到第七章的部分,每一章在讲述知识点的同时,分别使用了三种不同的显示字符的方法,加上调用BIOS的10h中 断的方法,这里做出一次简单梳理: 一:第五章,最基础的直接用mov 的方法 代码如下: ;代码清单5-1 ;文件名:c05_mbr.asm ;文件说明:硬盘主引导扇区代码 ;创建日期:2011-3-31 21:15 mov ax,0xb800 ;指向文本模式的显示缓冲区 mov es,ax ;以下显示字符串"Label of

  • js动态引入的四种方法

    本文表述了关于js动态引入四种方式的实例代码.分享给大家供大家参考,具体如下: index.html <html> <head> <meta content="text/html;charset=utf-8" http-equiv="content-type"> <title> </title> <script src='' id="s1"></script> &

  • JS去除字符串最后的逗号实例分析【四种方法】

    JS去除字符串最后的逗号实例分析【四种方法】

    本文实例讲述了JS去除字符串最后的逗号.分享给大家供大家参考,具体如下: <script> window.onload=function() { var obj = {name: "xxx", age: 30, sex: "female"};//定义一个object对象 var str = ''//定义一个空字符用来接收对象里的key或者value for(var item in obj) {//遍历item变量里的对象的属性和元素, str += ob

  • Python中修改字符串的四种方法

    在Python中,字符串是不可变类型,即无法直接修改字符串的某一位字符. 因此改变一个字符串的元素需要新建一个新的字符串. 常见的修改方法有以下4种. 方法1:将字符串转换成列表后修改值,然后用join组成新字符串 >>> s='abcdef' #原字符串 >>> s1=list(s) #将字符串转换为列表 >>> s1 ['a', 'b', 'c', 'd', 'e', 'f'] #列表的每一个元素为一个字符 >>> s1[4]='

  • Gradle的缓存路径修改的四种方法(小结)

    方法一,修改gradle.properties文件,增加一句 gradle.user.home=D\:\\Android\\.gradle 但这种方法,需要每个项目文件都要改一遍,如果只是临时修改,可以采用这种方法,如果是针对所有项目的,不建议这种方法. 方法二,在Android Studio中修改gradle用户目录,打开设置(快捷键Ctrl+alt+S),定位到Gradle菜单,作如下设置 但是这个方法现在好像没用,不过可以试试,万一就可以了呢(手动滑稽). 方法三,修改gradle启动脚本

  • 使用Webpack提高Vue.js应用的方式汇总(四种)

    使用Webpack提高Vue.js应用的方式汇总(四种)

    Webpack是开发Vue.js单页应用程序的重要工具. 通过管理复杂的构建步骤,你可以更轻松地开发工作流程,并优化应用程序的大小和性能. 其中介绍下面四种方式: 单个文件组件 优化Vue构建 浏览器缓存管理 代码分割 1.单个文件组件 Vue的特殊功能之一是使用HTML作为组件模板. 尽管如此,它们还有一个内在的问题:你的HTML标记需要是一个尴尬的JavaScript字符串, 否则你的模板和组件定义将需要在单独的文件中,使其难以使用. Vue有一个优雅的解决方案,称为单文件组件(SFC),其

  • 利用JS提交表单的几种方法和验证(必看篇)

    工作中发现表单提交方便的问题,很多时候IE下提交好好的,打了火狐下就出现了问题,利用提交按钮就不成功了,于是利用JS的方式就成功了,也不知道为什么.在导师的催促下就总结出以下的几种常用表单提交的方法. 第一种方式:表单提交,在form标签中增加onsubmit事件来判断表单提交是否成功 <script type="text/javascript"> function validate(obj) { if (confirm("提交表单?")) { aler

随机推荐