为button对象添加点击事件的两种方法中,为什么一个使用onclick,而另一个却使用click呢? 10C
 <button id="btn">按钮</button>


 可以使用下面的两种方法为button对象添加点击事件:


 方法1:
  var btn = document.getElementById("btn");
  btn.onclick = function(){
      alert("HelloWorld");
  }



方法2:
  function hello() {
      alert('addEventListener()方法');
  }

  var btn = document.getElementById('btn');
  btn.addEventListener('click', hello, false);



这两种方法为button对象添加点击事件时,为什么一个用的是onclick,而另一个用的却是click呢?

5个回答

click是一个方法,onclick是一个事件。
1.事件名前一般都以on开头;
2.方法是程序员写语句直接调用,即显示调用;【可以触发onclick事件】  3.事件不需程序员调用,但是,必须由程序员写一个函数且将该函数赋值给相应的事件,其调用是在相应的事件触发时。【告诉浏览器在鼠标点击时候要做什么】所以调用顺序是:首先方法其次事件。

li_13579_li
li_13579_li 是不是说反了呢?click是一个事件,而onclick是GlobalEventHandlers接口的属性
11 个月之前 回复
SDNLAB
SDNLAB nice
11 个月之前 回复

针对你的问题我觉得。你是在纠结为什么一个是onclick,而另一一个是click。
onclick可以拆分为on+click,原生js基本都是on+事件。
btn.onclick 表示给btn添加点击事件触发函数,click是一个元素本身就具有的属性,这边给这个属性添加执行函数。同一个元素的 click函数赋值多次,以
做后一次赋值的为准。
btn.addEventListener这个是通过注册一个监听元素click事件的执行函数,可以有多个。
总结:click本来就是每一个元素原生的一个属性,onclick是给这个click赋值执行函数。addEventListener是通过注册监听莫个事件而触发莫个函数,
例如我注册一个监听函数当元素被click则触发函数。

li_13579_li
li_13579_li thanks
11 个月之前 回复
qq_20766085
huhuhuhr 你最后一个牛角尖级别的纠结就是,addEventListener('click',为什么click能检测到onclick这个我查源码也无从下手,等朋友找到答案,希望能在这个帖子下面贴一下。
11 个月之前 回复
qq_20766085
huhuhuhr 回复li_13579_li: 如果是新人不需要这么去钻牛角尖。这个问题这么学就够了,元素有onclick属性,我拆分onclick为on和click是辅助理解addEventListener。onclick是event级别事件,语法 element.addEventListener(event, function, useCapture); 第一个参数是事件的类型 (如 "click" 或 "mousedown"). 第二个参数是事件触发后调用的函数。 第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。 注意:不要使用 "on" 前缀。 例如,使用 "click" ,而不是使用 "onclick"。
11 个月之前 回复
qq_20766085
huhuhuhr 回复li_13579_li: 没研究那么深,onclick就是一个元素的事件属性。onclick 属性不适用以下元素:<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>。
11 个月之前 回复
li_13579_li
li_13579_li 在HTML中是找不到click这个属性的,而且console.dir(btn)时,也是找不到click这个属性的
11 个月之前 回复
li_13579_li
li_13579_li 嗯,的确纠结的是为什么一个是onclick,而另一一个是click,另外你说的“click本来就是每一个元素原生的一个属性”貌似有点问题啊,click是事件名称,而onclick是GlobalEventHandlers的属性,不知这样理解是否是正确的
11 个月之前 回复

onclick 是DOM V1的版本提供的元素绑定事件的方法,它有一些缺陷(如一个元素不能绑定两个事件)。
所以在第二版的时候增加了 addEventListener 这个方法来解决之前版本的问题,
addEventListener 与onclick一样 也是一个方法,click 只是它接受的一种参数。
具体可以看下 相关文档。

原生js里面一般都是用onclick,如果是jquery,就用click

简单一点就是 addEventListener = on 都属于监听代理事件,包括你用bind 也可以

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
为Button点击事件注册监听器的两种方法
为Button点击事件注册监听器的两种方法
使用js动态添加点击事件时,click与onclick的区别
使用js动态添加点击事件时,click与onclick的区别!!!!!
Button点击事件实现页面跳转的两种方法
方法一:         常用方式,在java文件中给Button设置点击监听事件button.setOnClickListener(),新建Intent类,从MainActivity跳转至ImageTest button.setOnClickListener(new View.OnClickListener() { @Override publ
重复使用 使用CLICK方法
我在菜单里有private void menuwuhanpt_Click(object sender, System.EventArgs e)事件 而且里面有代码 我现在在窗体上又增加了一个按钮 要执行的东西就是private void menuwuhanpt_Click(object sender, System.EventArgs e)里面的东西 我该怎么调用这个menuwuhanpt_Click?
ajax在button中使用onclick失效原因
        在做页面提交的时候,发现通过button中onclick绑定的方法时,怎么也无法提交ajax请求,但是使用click方法的时候确实可以成功。因缺思厅。这里做下分析。先看下代码1、使用onclick方法&amp;lt;input id=&quot;login&quot; name=&quot;&quot; onclick=&quot;login()&quot; type=&quot;button&quot; class=&quot;btn btn-success radius s...
给Button添加点击事件
1.课程介绍了普通的爬虫方式n2.如何攻破有道翻译的反爬虫机制n3.以及制作属于自己的GUI有道词典
QT5的Button添加点击事件
参考http://blog.csdn.net/hapure1/article/details/51881392 1、在.h文件的private slots:中定义方法 2、在对应的.cpp文件中实现该方法 3、在UI上拖空间,编辑信号槽,配置连接,点编辑,绿色加号添加刚定义的方法。
使用jquery.nestable.js添加点击事件
html:&amp;lt;ol class=&quot;dd-list&quot;&amp;gt;&amp;lt;li class=&quot;dd-item&quot; data-id=&quot;{{$vvv-&amp;gt;ID}}&quot;&amp;gt; &amp;lt;div class=&quot;dd-handle&quot;&amp;gt; &amp;lt;span class=&quot;label label-info&quot;&amp;gt;&amp;lt
使用闭包为相似元素添加点击事件
闭包为相似元素添加点击事件
为对象添加方法
理解了对象,其实很简单下面通过一个示例来简单描述 需求 为数组对象添加一个方法console(),arr.console()打印出数组 Array.prototype.console = function(){ console.log(this); } var a = [1,2,3,4,5]; a.console(); #结果: (5) [1, 2, 3, 4, 5] ...
appium使用ID进行定位click点击事件
1 使用uiautomatorviewer地获取ID 路径:sdk\tools\uiautomatorviewer.bat 点击上面的机器人 获取ID(选择一个按钮,右边可以查看到ID) 脚本中增加点击事件 driver.find_element_by_id('com.android.calculator2:id/digit9').click() driver.fin
在MainActivity中给另一个布局中的按钮添加onClick方法
我是一个新手小白,在做老师的课程设计时遇到了无法给另一个布局的按钮添加点击事件的问题,花费多时寻找终于找到了一个可以用的办法,分享一下希望可以帮助和我一样问题的人。由于在MainActivity中我引用了R.layout.activity_main布局,我只有在给该布局下的控件绑定事件才会执行。但我需要给我的另一个布局中的按钮添加一个onClick事件,在网上找了很久一直没什么头绪,今天看了下点击...
Button点击事件的四种方法
1、匿名内部类 Button btn_1 = (Button) findViewById(R.id.btn_1); //1.匿名内部类 btn_1.setOnClickListener(new OnClickListener() { @Override public void onCl
datalist不能添加点击事件onclick, select可以添加onclick
在datalist和select中不能直接添加button. html> lang="en"> charset="UTF-8"> Title href="http://cdn.bootcss.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet"> --> rel="styleshee
Button 点击事件onclick实现的四种方式
总结一下Button 点击事件onclick实现的四种方式; 方式一: 在xml中定义onclick属性 <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" andr
Onclick点击事件
Button button =(Button)findViewById(R.id.button);//得到按钮实例 button.setOnClickListener(new View.OnClickListener() {//设置一个监听器 @Override public void onClick(View v) {//调用onclick方法
button中click代码
我有三个控件:comboBox,button,listBox和一个spl2000建的表(通讯录)我想实现在comboBox显示(通讯录)的某列,而在单击button后,在listBox显示参照comboBox值(通讯录)中的某行,我该怎么实现。rn特别是我要在button里的click写什么代码才能按comboBox提供的名字找到该名字所在表(通讯录)中有关该名字的所有信息,并把信息显示在listbox上。数据库要与哪些控件绑定。
Button click 能不能 换方法
rn我有个 这个控件rn然后 我按一下 rn[code=Java]private function cAddClick():voidrncAddButton.removeEventListener(MouseEvent.CLICK,cAddClick);rncAddButton.addEventListener(MouseEvent.CLICK,saveItem);rn[/code]rn这样好像 不行 啊 有办法 改吗 ?rn
如何给Button赋一个onclick方法
比如这个Button的ID是button1,那我们通过getElementByID方法找到他以后,给这个Button的Onclick方法赋一个函数,这样占击它时,就运行这个函数的内容.rn不是直接在静态的给这个Button写上这个Onclick方法.rn谢谢.
很简单的一个传值问题,button的onclick()方法
[code=php]rnrnfunction delPro(id,name)rn if(window.confirm("您确认要删除嘛?"))rn window.location="doAdminAction.php?act=delPro&id="+id"&name="+name;rn rn rnrn[/code]rnrn我这样写有问题吗?写上去传值不成功
场景所有Button添加点击事件
算是一个扩展,游戏中很多按键都会有点击音效,因为按键太多,如果每个按键都手动绑定或者代码绑定监听事件,都比较繁琐,而且容易遗漏。 我的做法是获取场景中所有的Button,统一添加监听事件不需要单独添加音效事件。 待实现功能: 1. 如果不同的按键有不同的点击音效,可以在命名上做一下区分,添加一个后缀,在统一添加监听事件时,根据不同的后缀名,来绑定不同事件。 2. 如果场景中按键较多,可以利...
对象的创建、使用及向String对象添加方法(prototype的使用)
prototype 属性使您有能力向对象添加属性和方法。 语法 object.prototype.name=value //对象的定义,使用(名片示例) function Card(name, address, work, home){ this.name = name; this.address = address; this.work = work;
Android RecyclerView的使用与添加点击事件
RecyclerView使用 RecyclerView 是 Android Loillpop (5.0)版本中新添加的一个用来取代 ListView 的 SDK。 1. 简介RecyclerView 与 ListView 原理是类似的:都是仅仅维护少量的View展示大量的数据。 * 使用 LayoutManager 来确定每一个 item 的排列方式。 * 为增加和删除项目提供默认的动画效果
Recycleview使用详情及添加点击事件
前言记录一下自己自学Recycleview的过程吧,仅供新手入门学习。首先来说说我对Recycleview的看法吧,我对Recycleview和listview主要就是Recycleview显示类型,既可以是gridview,也可以使瀑布流式的显示,只需更改layoutmanager,非常方便,而具体的区别,网上也有很多人说了,有兴趣深入了解的也可以看一看文章最后的一篇文章, 他对Recyclevi
为什么使用button的OnClientClick后,还是会server端的click?
页面上有asp:button,我设置buttuon的OnClientClick属性OnClientClick="return putque()",在页面的脚本中加入函数putque,function putque()return false;rn但是不明白,为什么还是调用button的onclick事件?rn
在 viewpager 中如何创建 button onClick 方法
我想使用viewpager在按钮点击时Toast一个消息,也想了解更多关于如何访问viewpager中的视图的信息。用的以下的信息,没什么反应。rnrn public class MyPagerAdapter extends PagerAdapter rn rn @Overridern public int getCount() rn return 3;rn rn rn @Overridern public Object instantiateItem(final View collection, final int position) rn v = new View(collection.getContext());rn LayoutInflater inflater =rn (LayoutInflater) collection.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);rn rn int resId = 0;rn switch (position) rn case 0:rn resId = R.layout.cate1;rn v = inflater.inflate(R.layout.cate1, null, false);rn add1 = (Button) v.findViewById(R.id.btnAdd);rn add1.setOnClickListener( new OnClickListener() rn public void onClick(View m) rn Toast.makeText(collection.getContext(),"click",Toast.LENGTH_LONG).show();rn rn );rn rn rn break;rn case 1:rn resId = R.layout.cate2;rn break;rn case 2:rn resId = R.layout.cate3;rn break;rn rn rn View view = inflater.inflate(resId, null);rn ((ViewPager) collection).addView(view, 0);rn rn return view;rn rn rn @Overridern public void destroyItem(final View arg0, final int arg1, final Object arg2) rn ((ViewPager) arg0).removeView((View) arg2);rn rn rn rn @Overridern public boolean isViewFromObject(final View arg0, final Object arg1) rn return arg0 == ((View) arg1);rn rn rn rn @Overridern public void finishUpdate(View arg0) rn // TODO Auto-generated method stubrn rn rn rn @Overridern public void restoreState(Parcelable arg0, ClassLoader arg1) rn // TODO Auto-generated method stubrn rn rn rn @Overridern public Parcelable saveState() rn // TODO Auto-generated method stubrn return null;rn rn rn @Overridern public void startUpdate(View arg0) rn // TODO Auto-generated method stubrn rn rn rn rnrn然后用下面的代码实现button onclick方法,也不对。rn rnrn v = inflater.inflate(R.layout.cate1, null, false);rn add1 = (Button) v.findViewById(R.id.btnAdd);rn add1.setOnClickListener( new OnClickListener() rn public void onClick(View m) rn Toast.makeText(collection.getContext(),"click",Toast.LENGTH_LONG).show();rn rn );rnrnadd1.setOnClickListener 不能执行,也没有报错。总之,想要实现的button action 没有执行。是什么问题呢?
在 viewpager 中如何实现 Button 的 onClick 方法
我想在viewpaper中,点击按钮弹出Toast信息,并且想知道如何在viewpaper上访问views?rn我用的以下的代码,不好用。rnrn public class MyPagerAdapter extends PagerAdapter rn rn @Overridern public int getCount() rn return 3;rn rn rn @Overridern public Object instantiateItem(final View collection, final int position) rn v = new View(collection.getContext());rn LayoutInflater inflater =rn (LayoutInflater) collection.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);rn rn int resId = 0;rn switch (position) rn case 0:rn resId = R.layout.cate1;rn v = inflater.inflate(R.layout.cate1, null, false);rn add1 = (Button) v.findViewById(R.id.btnAdd);rn add1.setOnClickListener( new OnClickListener() rn public void onClick(View m) rn Toast.makeText(collection.getContext(),"click",Toast.LENGTH_LONG).show();rn rn );rn rn rn break;rn case 1:rn resId = R.layout.cate2;rn break;rn case 2:rn resId = R.layout.cate3;rn break;rn rn rn View view = inflater.inflate(resId, null);rn ((ViewPager) collection).addView(view, 0);rn rn return view;rn rn rn @Overridern public void destroyItem(final View arg0, final int arg1, final Object arg2) rn ((ViewPager) arg0).removeView((View) arg2);rn rn rn rn @Overridern public boolean isViewFromObject(final View arg0, final Object arg1) rn return arg0 == ((View) arg1);rn rn rn rn @Overridern public void finishUpdate(View arg0) rn // TODO Auto-generated method stubrn rn rn rn @Overridern public void restoreState(Parcelable arg0, ClassLoader arg1) rn // TODO Auto-generated method stubrn rn rn rn @Overridern public Parcelable saveState() rn // TODO Auto-generated method stubrn return null;rn rn rn @Overridern public void startUpdate(View arg0) rn // TODO Auto-generated method stubrn rn rn rn下面是 button onclick代码,也没有实现rnrn v = inflater.inflate(R.layout.cate1, null, false);rn add1 = (Button) v.findViewById(R.id.btnAdd);rn add1.setOnClickListener( new OnClickListener() rn public void onClick(View m) rn Toast.makeText(collection.getContext(),"click",Toast.LENGTH_LONG).show();rn rn );rn请求大家的帮忙,看看如何处理这个问题。
javascript中的点击事件click的写法
javascript中click方法: 1.通过id获取到元素 click 通过id获取到元素 var btn=document.getElementById(“btn1”); btn.function(){ … } 2. “fun();” click (1)写在初始化函数内: window.function(){ 方法名fun=function(){ … } } (2)写在初始化函数外部 fun...
vux 的x-button添加@click点击事件无效
转:https://segmentfault.com/q/1010000014166401
为UIView添加点击事件
为UIView和子类添加点击事件,当然也可以用于 UIView 的子类。 使用 UITapGestureRecognizer   ,创建一个 UITapGestureRecognizer  将它添加到view上即可。 示例代码: UITapGestureRecognizer *tapGesturRecognizer=[[UITapGestureRecognizer alloc]initWit
Android中Button的onClick实现方法。
Android中Button的onClick实现方法大概是这样的吧! 刚刚是看到有代码将一个接口传给了一个函数(是一个构造函数,没考证是不是也可以传给一个普通函数),之后我不懂为什么,就百度了一下。 发现了这样一个文章:http://blog.csdn.net/sunshine_mood/article/details/49874039 =======================
关于Button的两种方法
xml文件 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical">
onclick和click的区别及示例
1.$("").click与onclick的区别示例介绍 onclick是绑定事件,click本身是方法作用是触发onclick事件,只要执行了元素的click()方法,下面有个示例,大家可以看看 Html代码   $(function(){  $("#btn4").click(function(){  $("#btn3").click();  });  });  funct
onclick 事件 和click()的区别
onClick里面不需要写【javascript: 】只有a标签的href执行js才需要,onclick里面本身就是JavaScript代码了改为onClick="document.login_form.submit();"这句代码实际上是dom.onclick=function(){document.login_form.submit();}它自动给生成了一个function 标签也可以提交表
jquery中点击事件click的写法
jquery中点击事件click的写法: &lt;input type="button" "test1()" id="btn1" value="input1" /&gt;&lt;br/&gt; &lt;input type="button" id="btn3" value="input3"/&gt;&lt;br/&gt; &lt;input type="button" "test4()" id...
两种使用ListView的方法
ListView可以说是我们在进行Android开发时候最常见的控件之一了,那么我们该如何使用呢?这里主要介绍两种方法。 1、使用Activity(继承自AppCompactActivity)+ListView控件 2、使用Activity(继承自ListActivity)
使用AOP的两种方法
一、使用Spring来定义POJO切面(1)定义一个接口:public interface IMemberService { public boolean insert(Member vo); }(2)定义一个接口的实现类:@Service public class MemberServiceImpl implements IMemberService { @Override ...
vue.js click点击事件获取当前元素对象
Vue.js可以传递$event对象 &lt;body id="app"&gt; &lt;ul&gt; &lt;li v-on:click="say('hello!', $event)"&gt;点击当前行文本&lt;/li&gt; &lt;li&gt;li2&lt;/li&gt; &lt;li&gt;li3&lt;/li&gt; &lt;/ul&gt; &lt;...
使用Express的两种方法
使用Express的两种方法             最近过年,放假给自己冲了下电,学了一点点Node.js的知识,以后吹水可以用到嘛。             如果我写的不足以让你理解,你可以访问以下地址,查看官方文档,自己动手,丰衣足食             官网地址:http://www.expressjs.com.cn/             介绍一下Express,直接上
click和onclick的区别
click为方法,方法由程序员编写。 onclick为事件,事件为程序员调用。
相关热词 c# login 居中 c# 考试软件 c# 自然语言分析 c# 分段读取文件 c# 泛型反射 c#打断点 c# 时间转多少秒 c# 线程函数加参数 c# modbus 读取 c#查询集合表