原生js中click与onclick的区别

2019-04-25 本文已影响0人 whypretender

一：原生javascript中的click（方法）

（参考w3c中的描述

http://www.w3school.com.cn/jsref/dom_obj_button.asp；

http://www.w3school.com.cn/jsref/met_button_click.asp）

1.首先要了解HTML DOM Button 对象：

Button 对象代表 HTML 文档中的一个按钮。该元素没有默认的行为，但是必须有一个

onclick 事件句柄以便使用。

注:由上图可见HTML DOM Button 对象包含click、blur和focus三种方法，这些方法对应HTML DOM click、blur和focus方法；

2. click 是 HTML DOM Button 对象的一个方法，也是HTML DOM click() 方法，描述的是 “在某个按钮上模拟一次鼠标单击”。

语法： buttonObject.click()

实例：下面的例子将在 body onload 上模拟在按钮上的一次鼠标单击：

(根据w3c中的描述 :

http://www.w3school.com.cn/jsref/dom_obj_event.asp；

http://www.w3school.com.cn/jsref/event_onclick.asp)

1. onclick 是 HTML DOM Event 对象 上的一个事件，onclick 事件会在对象被点击时发生。

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

实例：在本例中，当按钮被单击时，第一个输入框中的文本会被拷贝到第二个输入框中：

综上可知：

click是HTML DOM Button 对象的一个方法，也是HTML DOM click() 方法，它是一个方法；

onclick是 HTML DOM Event 对象的事件，即它是一个事件。

那么根本问题就是方法和事件有什么区别呢？

（参考：https://blog.csdn.net/zrgood123/article/details/80614106）

(一种解释)

对于BOM对象可有方法和事件，其区别在于：

1.事件名前一般都以on开头。

2.方法是程序员写语句直接调用，即显示调用；事件不需程序员调用，但是，必须由程序员写一个函数且将该函数赋值给相应的事件，其调用是在相应的事件触发时。

(另一种解释)

简单点说，事件是‘怎么了’，方法就是‘怎么办’

js中事件分为三大类：鼠标事件、键盘事件、html事件。如：鼠标事件click，当元素容器被点击时，响应

方法呢，就是对一段代码的封装、打包。打个比方，吃kfc，发现有不少的人喜欢点个原味鸡的时候再来个香辣鸡翅、饮料、奥尔良一起吃。所以kfc直接把这几个组一组，弄了一个全家桶，以后遇到类似喜好的人，就让他点这个套餐，方便还有优惠。js中封装函数一个道理，方便调用，减少代码重复度。

一般情况下，事件与方法是连贯使用的，比如登录按钮（button）触发了点击（click）事件，就调用封装好的登录方法（function login(){}）,最终完成操作。

JavaScript 事件：http://www.w3school.com.cn/js/js_events.asp

javascript事件与功能说明大全：http://tools.jb51.net/table/javascript_event

jQuery 参考手册 - 事件：http://www.w3school.com.cn/jquery/jquery_ref_events.asp

$("").click与onclick的区别示例介绍：https://www.jb51.net/article/55650.htm