问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

button对象的onclick属性是怎么来的

头像
秋风秋雨
    433279123
    button.html文件

    <!DOCTYPE html>
<html>
    <head>
        <title>DOM</title>
    </head>
    <body>
        <button id="button">this is a button</button>
    </body>
</html>
    然后在开发者工具的控制台(console)中加入button对象的点击事件:

    button.onclick = function(){
    alert("Hello World");
}
    点击按钮时的效果:

    图片描述

    为什么会有一个button对象呢?
  因为浏览器解析上面的HTML时，会把标记解析为对象,如将<button>元素解析为button对象,
  因此我们会有一个button对象

那button对象的onclick属性是怎么来的呢?
  在此网站(https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLButtonElement)中的
  的HTMLButtonElement，HTMLElement，
  Element和Node接口中均没有找到onclick属性
    html前端javascript
    阅读 4.9k
    3 个回答
    得票最新
    头像
    言月
      1.8k21027
      ✓ 已被采纳

      HTML中的 <button> 标签实现自DOM的 HTMLButtonElement接口类 ，
      HTMLButtonElement又继承了一系列类，继承的基类是这个 EventTarget 。

      clipboard.png

      最后的这个EventTarget是拥有 “通过属性注册事件” 的能力的

      clipboard.png

      头像
      asseek
        9.4k53047
        头像
        秋风秋雨
          433279123
          “button.onclick = ...应该是为button对象创建一个onclick属性，
并将function(){alert("Hello World")}赋值给onclick属性”感觉这句描述有些问题

只在控制台中输入:
console.dir(button); 看截图:
说明已经存在onclick属性了,只不过此时onclick属性的值还是null,
所以button.onclick = ...不是在为button对象创建一个onclick属性,
只是一个赋值操作，那这个onclick属性是在哪儿定义的呢?
在HTMLButtonElement，HTMLElement，Element，Node和EventTarget中都没有onclick这个属性，
感觉又回到了老问题

          图片描述

          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题
          宣传栏