原生javascript的click在w3c里边的阐述是DOM button对象，也是html DOM click() 方法，可模拟在按钮上的一次鼠标单击。

button 对象代表 HTML 文档中的一个按钮。button元素没有默认的行为，但是必须有一个 onclick 事件句柄以便使用。

语法：buttonObject.click()

<html>

<head>

<script type="text/javascript">

function clickButton()

  {

  document.getElementById('button1').click()

  }

function alertMsg()

  {

  alert("Button 1 was clicked!")

  }

</script>

</head>

<body onload="clickButton()">

<form>

<input type="button" id="button1" onclick="alertMsg()" value="Button 1" />

</form>

</body>

</html>

onclick是一个事件，Event对象 。支持该事件的 JavaScript 对象：button, document, checkbox, link, radio, reset, submit

HTML DOM Event 对象，代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会在事件发生前被执行！

<html>

<body>

    Field1: <input type="text" id="field1" value="Hello World!"><br />

    Field2: <input type="text" id="field2"> <br />

    点击下面的按钮，把 Field1 的内容拷贝到 Field2 中： <br />

    <button onclick="document.getElementById('field2').value=document.getElementById('field1').value">Copy Text</button>

</body>

</html>

区别

前面说了click是一个方法，onclick是一个事件。

而最根本的问题是，方法和事件的区别是什么呢？

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

可以扩展学习和参考的文章：

2.$(“”).click与onclick的区别示例介绍 
地址：http://www.jb51.net/article/55650.htm

3.从零开始学习jQuery (五) jquery事件与事件对象 
地址：http://www.jb51.net/article/26331.htm

4.jquery动态移除/增加onclick属性详解 
地址：http://www.php100.com/html/program/jquery/2013/0905/5964.html

    <script type="text/javascript">

        $(function(){

            $("#btn4").click(function(){

                $("#btn3").click();

            });

        });

        function change(){

            alert("onclick");

        }

    </script>

    <button id="btn3" onclick="change()">dd</button>

    <button id="btn4">ee</button>
区别： 
1.onclick是绑定事件，告诉浏览器在鼠标点击时候要做什么。
 click本身是方法作用是触发onclick事件，只要执行了元素的click()方法，就会触发onclick事件。
如上诉代码所示，当点击'ee'按钮时,会触发'dd'的onclick事件(正常来说得按'dd'按钮才触发'dd'的onclick事件)，原因就是因为

$("#btn4").click(function(){$("#btn3").click();

点击'ee'按钮时,代码内部调用了'dd'的click()方法，从而触发了'dd'的onclick事件。

2.click()方法的主要作用是触发调用click方法元素onclick事件。
此外，如果在click方法定义了如下代码 
$("#btn3").click(function(){alert("*****");
click方法中的function代码会在onclick事件执行完后执行，此时click方法起到追加事件的作用。实例如下：
<script type="text/javascript">

        $(function(){

            $("#btn3").click(function(){

                alert("aa");

            });

        });

        function change(){

            alert("bb");

        }

</script>

    <button id="btn3" onclick="change()">dd</button>

原生js：click和onclick本质的区别（转https://www.cnblogs.com/web1/p/6555662.html）的更多相关文章

  1. 原生js：click和onclick本质的区别

    原生javascript的click在w3c里边的阐述是DOM button对象,也是html DOM click() 方法,可模拟在按钮上的一次鼠标单击. button 对象代表 HTML 文档中的 ...

  2. click和onclick本质的区别

    原生javascript的click在w3c里边的阐述是DOM button对象,也是html DOM click() 方法,可模拟在按钮上的一次鼠标单击. button 对象代表 HTML 文档中的 ...

  3. 原生JS forEach()和map()遍历的区别以及兼容写法

    一.原生JS forEach()和map()遍历 共同点: 1.都是循环遍历数组中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前 ...

  4. 原生JS和jQuery操作DOM的区别小结

    一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq ...

  5. js click 与 onclick 事件绑定,触发与解绑

    click 与 onclick 1.onclick 事件会在对象被点击时发生. <input id="btn1" type="button" onclic ...

  6. 原生JS与JQ获取元素的区别

    刚学JQ不久,有时候可能会把JS和JQ获取元素的方式搞错,接下来获取属性方法什么的就一发不可收拾了,现在把两者获取获取元素的代码整理下. 一.原生JS获取元素. 1.常用的三种方式获取元素对象(将指定 ...

  7. 原生js中slice()方法和splice()区别

    slice()方法和splice()方法都是原生js中对数组操作的方法. slice(),返回一个新的数组,该方法可从已有的数组中返回选定的元素.例如:arrObject(start,end),sta ...

  8. 原生js ajax与jquery ajax的区别

    原生js ajax的调用: ajax({ type : "get", url : "02_ajax_get.txt", data : { "userN ...

  9. javascript 中 click 和onclick有什么区别呢

    <script type="text/javascript"> $(function(){ $("#btn4").click(function(){ ...

随机推荐

  1. 在网页中嵌套网页的方法（frame）

    在网页中嵌套网页目前通用的方法是通过 frame 框架来完成,该方法有实际的应用意义.也能很好的解决一些问题. 但是 JS 在操作的时候需要同源(不能跨域), 否则一切 js 相关的操作无法完成. 切 ...

  2. 浏览器使用小tip

    谷歌浏览器截取长图 很多网页长图单个页面截不下来,那么需要如何解决? 首先,在谷歌浏览器chrome中打开需要截图的网页,等待需要截图的网页打开完毕,然后按F12 打开开发者工具,然后按组合键 Ctr ...

  3. java从ldap中导出数据到ldif文件中

    原创:http://www.cnblogs.com/dqcer/p/7814034.html 导入ldap.jar包,笔者已对下面两个文件测试并通过.若有疑问欢迎留言 LDAPExport.java ...

  4. vue跳转到指定位置

    document.querySelector(id).scrollIntoView(true)//跳转到顶部 window.scrollTo(0, 0)

  5. 将Bean转换为Json形式的一个工具类

    这边遇到一个问题:  1.做一个bean类,实现一个函数,能够把bean生成json字符串.按字段作为key,字段值作为value的方式生成,并且按key的ascii码的升序生成.     2.提示: ...

  6. go.js-拖拽流程图插件

    1.去除水印 在文件中搜索7eba17a4ca3b1a8346,找到类似a.Jv=d[w.Jg("7eba17a4ca3b1a8346")][w.Jg("78a118b7 ...

  7. SSH上传文件出现error

    如上图,因为我在SSH上的用户没有对Linux服务器的文件夹的修改权限,我在linux上把文件夹的权限改为可读可改,就可以了

  8. 一、Smarty安装与调试

    一.安装注:这里所使用的Smarty是3.x版本,要求PHP版本为5.2或者更高.解压下载下来的Smarty压缩文件,将文件夹libs拷到项目中,在项目中引入libs文件夹中的"Smarty ...

  9. 有关C#写一个WindowsService的两篇文章

    1.http://blog.csdn.net/yysyangyangyangshan/article/details/10515035 上面的这篇文章一共两段,第二段讲的是使用代码来安装发布这个Win ...

  10. 如何下载安装informatica PowerCenter

    1.进入oracle官网注册新用户   https://edelivery.oracle.com/osdc/faces/Home.jspx 2.在搜索中输入:  informatica 参考博客:   ...