原生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. 51 Nod 1073 约瑟夫环

    1073 约瑟夫环  基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题  收藏  关注 N个人坐成一个圆环(编号为1 - N),从第1个人开始报数,数到K的人出列,后面的人 ...

  2. ZooKeePer总汇

    一.什么Zookeeper Zookeeper是一个分布式开源框架,提供了协调分布式应用的基本服务,它向外部应用暴露一组通用服务——分布式同步(Distributed Synchronization) ...

  3. C++入门经典-例2.12-求逻辑表达式的值

    1:代码如下: // 2.12.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include<iostream> using ...

  4. ajax 调用 webService

    前台脚本<script type="text/javascript"> $(function () { $.ajax({ type: "POST", ...

  5. 【Spark机器学习速成宝典】模型篇03线性回归【LR】（Python版）

    目录 线性回归原理 线性回归代码(Spark Python) 线性回归原理 详见博文:http://www.cnblogs.com/itmorn/p/7873083.html 返回目录 线性回归代码( ...

  6. C# 截取屏幕局部

    //截取全屏图象 private void btnFullScreen_Click(object sender, EventArgs e) { //创建图象,保存将来截取的图象 Bitmap imag ...

  7. MethodChannel 实现flutter 与 原生通信

    Flutter 步骤 目的:在flutter页面中主动调用原生页面中的方法. 1 在widget中,定义MethodChannel变量 static const MethodChannel metho ...

  8. TODO: Java虚拟机 初始化过程

    Java虚拟机 初始化过程: 参考: https://www.cnblogs.com/bhlsheji/p/4017816.html 参考:https://blog.csdn.net/boling_c ...

  9. HTML+CSS实现导航栏二级下拉菜单完整代码

    工具是vs code 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  10. 216组合总和III

    题目:找出所有相加之和为 n 的 k 个数的组合.组合中只允许含有 1 - 9 的正整数,并且每种组合中不存在重复的数字.说明:所有数字都是正整数.解集不能包含重复的组合. 示例 1:输入: k = ...