原生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. 51nod-1640--天气晴朗的魔法（简单最小生成树）

    1640 天气晴朗的魔法 题目来源: 原创 基准时间限制:1 秒 空间限制:131072 KB 分值: 20 难度:3级算法题 这样阴沉的天气持续下去,我们不免担心起他的健康. 51nod魔法学校近日 ...

  2. JavaWeb_通过xml配置文件配置servlet访问路径

    Servlet两种访问路径 一.在Servlet类中通过设置@WebServlet标注访问 二.在web.xml中编写配置文件 第一种能比较直观看到Servlet路径,但当项目发布后不好再对Servl ...

  3. JS框架_(coolShow.js)图片旋转动画特效

    百度云盘 传送门 密码:ble6 coolShow.js插件图片旋转动画效果 <!DOCTYPE HTML> <head> <meta http-equiv=" ...

  4. HTML和CSS 入门系列（一）：超链接、选择器、颜色、盒模式、DIV布局、图片

    一.超链接 二.CSS选择器 CSS的全称叫做: Cascading Style Sheets 级联样式表的缩写. 2.1 类型选择器 2.2 派生选择器 2.3 伪类选择器 <style &g ...

  5. Zookeeper(六)服务器

    Zookeeper(六)服务器 zkServer.cmd中声明 首先启动QuorumPeerMain set ZOOMAIN=org.apache.zookeeper.server.quorum.Qu ...

  6. SpringMVC——-Controller返回格式化数据如JSON、XML的配置方式和机制

    1.本文内容 我们在Web项目开发过程中,一般来说访问一个处理器,然后会返回一个视图,或者跳转到另外的处理器.但是随着项目越来越复杂,需求越来越复杂,对于处理器返回数据的类型要求也越来越多.比如要求能 ...

  7. docker top 和 docker exec ps 命令查看的PID区别

    区别在于 docker top 查看到的 PID 属于宿主机的 PID.我们可以通过  宿主机执行 ps -ef 查看结果 也可以进去容器执行 top 和 ps查看结果

  8. 【转】C++ const成员变量和成员函数（常成员函数）

    转:http://c.biancheng.net/view/2230.html 在类中,如果你不希望某些数据被修改,可以使用const关键字加以限定.const 可以用来修饰成员变量和成员函数. co ...

  9. viewpager标签栏之PagerTab

    import android.content.Context; import android.graphics.Canvas; import android.graphics.Paint; impor ...

  10. 写10个简单的 linux 命令?

    mkdir 创建文件夹rmdir 删除文件夹rm 删除文件 mv 移动文件cp 拷贝文件cat 查看文件 tail 查看文件尾部more 分页查看文件cd 切换当前目录 ls 列出文件清单reboot ...