javascript - 如何知道要绑定(bind)到的所有支持的 html 属性的列表

Question

据我所知，Angular 试图将每个 HTML DOM 元素视为一个组件，并允许绑定(bind)到它的属性。所以，如果我看一下 HTMLDivElement我可以看到它从 Node 继承了 textContent 属性，从 Element 继承了 innerHTML，所以我可以绑定(bind)到这些属性:

<div [textContent]="text"></div>
<div [innerHTML]="html"></div>

这很好用，但是 HTMLDivElement 有很多其他属性。我怎么知道我可以绑定(bind)到哪些其他属性？也许在源代码中声明了一个接口(interface)来定义要绑定(bind)到的属性？

元素支持的事件列表也是如此。我知道支持常用事件，例如 click 和 blur。但还有许多其他事件。例如，MDN 显示 DIV 上可用的 contextmenu 事件。我已经检查过，我可以订阅它。但是我可以为 HTMLDivElement 上可用的所有事件执行此操作吗？

Answer 1

有一些 Angular 支持的模式。

https://github.com/angular/angular/blob/2.4.6/modules/%40angular/compiler/src/schema/dom_element_schema_registry.ts#L78-L240

const SCHEMA:
    string[] =
        [
          '[Element]|textContent,%classList,className,id,innerHTML,*beforecopy,*beforecut,*beforepaste,*copy,*cut,*paste,*search,*selectstart,*webkitfullscreenchange,*webkitfullscreenerror,*wheel,outerHTML,#scrollLeft,#scrollTop',
          '[HTMLElement]^[Element]|accessKey,contentEditable,dir,!draggable,!hidden,innerText,lang,*abort,*beforecopy,*beforecut,*beforepaste,*blur,*cancel,*canplay,*canplaythrough,*change,*click,*close,*contextmenu,*copy,*cuechange,*cut,*dblclick,*drag,*dragend,*dragenter,*dragleave,*dragover,*dragstart,*drop,*durationchange,*emptied,*ended,*error,*focus,*input,*invalid,*keydown,*keypress,*keyup,*load,*loadeddata,*loadedmetadata,*loadstart,*message,*mousedown,*mouseenter,*mouseleave,*mousemove,*mouseout,*mouseover,*mouseup,*mousewheel,*mozfullscreenchange,*mozfullscreenerror,*mozpointerlockchange,*mozpointerlockerror,*paste,*pause,*play,*playing,*progress,*ratechange,*reset,*resize,*scroll,*search,*seeked,*seeking,*select,*selectstart,*show,*stalled,*submit,*suspend,*timeupdate,*toggle,*volumechange,*waiting,*webglcontextcreationerror,*webglcontextlost,*webglcontextrestored,*webkitfullscreenchange,*webkitfullscreenerror,*wheel,outerText,!spellcheck,%style,#tabIndex,title,!translate',
          'abbr,address,article,aside,b,bdi,bdo,cite,code,dd,dfn,dt,em,figcaption,figure,footer,header,i,kbd,main,mark,nav,noscript,rb,rp,rt,rtc,ruby,s,samp,section,small,strong,sub,sup,u,var,wbr^[HTMLElement]|accessKey,contentEditable,dir,!draggable,!hidden,innerText,lang,*abort,*beforecopy,*beforecut,*beforepaste,*blur,*cancel,*canplay,*canplaythrough,*change,*click,*close,*contextmenu,*copy,*cuechange,*cut,*dblclick,*drag,*dragend,*dragenter,*dragleave,*dragover,*dragstart,*drop,*durationchange,*emptied,*ended,*error,*focus,*input,*invalid,*keydown,*keypress,*keyup,*load,*loadeddata,*loadedmetadata,*loadstart,*message,*mousedown,*mouseenter,*mouseleave,*mousemove,*mouseout,*mouseover,*mouseup,*mousewheel,*mozfullscreenchange,*mozfullscreenerror,*mozpointerlockchange,*mozpointerlockerror,*paste,*pause,*play,*playing,*progress,*ratechange,*reset,*resize,*scroll,*search,*seeked,*seeking,*select,*selectstart,*show,*stalled,*submit,*suspend,*timeupdate,*toggle,*volumechange,*waiting,*webglcontextcreationerror,*webglcontextlost,*webglcontextrestored,*webkitfullscreenchange,*webkitfullscreenerror,*wheel,outerText,!spellcheck,%style,#tabIndex,title,!translate',
          'media^[HTMLElement]|!autoplay,!controls,%crossOrigin,#currentTime,!defaultMuted,#defaultPlaybackRate,!disableRemotePlayback,!loop,!muted,*encrypted,#playbackRate,preload,src,%srcObject,#volume',
          ':svg:^[HTMLElement]|*abort,*blur,*cancel,*canplay,*canplaythrough,*change,*click,*close,*contextmenu,*cuechange,*dblclick,*drag,*dragend,*dragenter,*dragleave,*dragover,*dragstart,*drop,*durationchange,*emptied,*ended,*error,*focus,*input,*invalid,*keydown,*keypress,*keyup,*load,*loadeddata,*loadedmetadata,*loadstart,*mousedown,*mouseenter,*mouseleave,*mousemove,*mouseout,*mouseover,*mouseup,*mousewheel,*pause,*play,*playing,*progress,*ratechange,*reset,*resize,*scroll,*seeked,*seeking,*select,*show,*stalled,*submit,*suspend,*timeupdate,*toggle,*volumechange,*waiting,%style,#tabIndex',
          ':svg:graphics^:svg:|',
          ':svg:animation^:svg:|*begin,*end,*repeat',
          ':svg:geometry^:svg:|',
          ':svg:componentTransferFunction^:svg:|',
          ':svg:gradient^:svg:|',
          ':svg:textContent^:svg:graphics|',
          ':svg:textPositioning^:svg:textContent|',
          'a^[HTMLElement]|charset,coords,download,hash,host,hostname,href,hreflang,name,password,pathname,ping,port,protocol,referrerPolicy,rel,rev,search,shape,target,text,type,username',
          'area^[HTMLElement]|alt,coords,hash,host,hostname,href,!noHref,password,pathname,ping,port,protocol,referrerPolicy,search,shape,target,username',
          'audio^media|',
          'br^[HTMLElement]|clear',
          'base^[HTMLElement]|href,target',
          'body^[HTMLElement]|aLink,background,bgColor,link,*beforeunload,*blur,*error,*focus,*hashchange,*languagechange,*load,*message,*offline,*online,*pagehide,*pageshow,*popstate,*rejectionhandled,*resize,*scroll,*storage,*unhandledrejection,*unload,text,vLink',
          'button^[HTMLElement]|!autofocus,!disabled,formAction,formEnctype,formMethod,!formNoValidate,formTarget,name,type,value',
          'canvas^[HTMLElement]|#height,#width',
          'content^[HTMLElement]|select',
          'dl^[HTMLElement]|!compact',
          'datalist^[HTMLElement]|',
          'details^[HTMLElement]|!open',
          'dialog^[HTMLElement]|!open,returnValue',
          'dir^[HTMLElement]|!compact',
          'div^[HTMLElement]|align',
          'embed^[HTMLElement]|align,height,name,src,type,width',
          'fieldset^[HTMLElement]|!disabled,name',
          'font^[HTMLElement]|color,face,size',
          'form^[HTMLElement]|acceptCharset,action,autocomplete,encoding,enctype,method,name,!noValidate,target',
          'frame^[HTMLElement]|frameBorder,longDesc,marginHeight,marginWidth,name,!noResize,scrolling,src',
          'frameset^[HTMLElement]|cols,*beforeunload,*blur,*error,*focus,*hashchange,*languagechange,*load,*message,*offline,*online,*pagehide,*pageshow,*popstate,*rejectionhandled,*resize,*scroll,*storage,*unhandledrejection,*unload,rows',
          'hr^[HTMLElement]|align,color,!noShade,size,width',
          'head^[HTMLElement]|',
          'h1,h2,h3,h4,h5,h6^[HTMLElement]|align',
          'html^[HTMLElement]|version',
          'iframe^[HTMLElement]|align,!allowFullscreen,frameBorder,height,longDesc,marginHeight,marginWidth,name,referrerPolicy,%sandbox,scrolling,src,srcdoc,width',
          'img^[HTMLElement]|align,alt,border,%crossOrigin,#height,#hspace,!isMap,longDesc,lowsrc,name,referrerPolicy,sizes,src,srcset,useMap,#vspace,#width',
          'input^[HTMLElement]|accept,align,alt,autocapitalize,autocomplete,!autofocus,!checked,!defaultChecked,defaultValue,dirName,!disabled,%files,formAction,formEnctype,formMethod,!formNoValidate,formTarget,#height,!incremental,!indeterminate,max,#maxLength,min,#minLength,!multiple,name,pattern,placeholder,!readOnly,!required,selectionDirection,#selectionEnd,#selectionStart,#size,src,step,type,useMap,value,%valueAsDate,#valueAsNumber,#width',
          'keygen^[HTMLElement]|!autofocus,challenge,!disabled,keytype,name',
          'li^[HTMLElement]|type,#value',
          'label^[HTMLElement]|htmlFor',
          'legend^[HTMLElement]|align',
          'link^[HTMLElement]|as,charset,%crossOrigin,!disabled,href,hreflang,integrity,media,rel,%relList,rev,%sizes,target,type',
          'map^[HTMLElement]|name',
          'marquee^[HTMLElement]|behavior,bgColor,direction,height,#hspace,#loop,#scrollAmount,#scrollDelay,!trueSpeed,#vspace,width',
          'menu^[HTMLElement]|!compact',
          'meta^[HTMLElement]|content,httpEquiv,name,scheme',
          'meter^[HTMLElement]|#high,#low,#max,#min,#optimum,#value',
          'ins,del^[HTMLElement]|cite,dateTime',
          'ol^[HTMLElement]|!compact,!reversed,#start,type',
          'object^[HTMLElement]|align,archive,border,code,codeBase,codeType,data,!declare,height,#hspace,name,standby,type,useMap,#vspace,width',
          'optgroup^[HTMLElement]|!disabled,label',
          'option^[HTMLElement]|!defaultSelected,!disabled,label,!selected,text,value',
          'output^[HTMLElement]|defaultValue,%htmlFor,name,value',
          'p^[HTMLElement]|align',
          'param^[HTMLElement]|name,type,value,valueType',
          'picture^[HTMLElement]|',
          'pre^[HTMLElement]|#width',
          'progress^[HTMLElement]|#max,#value',
          'q,blockquote,cite^[HTMLElement]|',
          'script^[HTMLElement]|!async,charset,%crossOrigin,!defer,event,htmlFor,integrity,src,text,type',
          'select^[HTMLElement]|!autofocus,!disabled,#length,!multiple,name,!required,#selectedIndex,#size,value',
          'shadow^[HTMLElement]|',
          'source^[HTMLElement]|media,sizes,src,srcset,type',
          'span^[HTMLElement]|',
          'style^[HTMLElement]|!disabled,media,type',
          'caption^[HTMLElement]|align',
          'th,td^[HTMLElement]|abbr,align,axis,bgColor,ch,chOff,#colSpan,headers,height,!noWrap,#rowSpan,scope,vAlign,width',
          'col,colgroup^[HTMLElement]|align,ch,chOff,#span,vAlign,width',
          'table^[HTMLElement]|align,bgColor,border,%caption,cellPadding,cellSpacing,frame,rules,summary,%tFoot,%tHead,width',
          'tr^[HTMLElement]|align,bgColor,ch,chOff,vAlign',
          'tfoot,thead,tbody^[HTMLElement]|align,ch,chOff,vAlign',
          'template^[HTMLElement]|',
          'textarea^[HTMLElement]|autocapitalize,!autofocus,#cols,defaultValue,dirName,!disabled,#maxLength,#minLength,name,placeholder,!readOnly,!required,#rows,selectionDirection,#selectionEnd,#selectionStart,value,wrap',
          'title^[HTMLElement]|text',
          'track^[HTMLElement]|!default,kind,label,src,srclang',
          'ul^[HTMLElement]|!compact,type',
          'unknown^[HTMLElement]|',
          'video^media|#height,poster,#width',
          ':svg:a^:svg:graphics|',
          ':svg:animate^:svg:animation|',
          ':svg:animateMotion^:svg:animation|',
          ':svg:animateTransform^:svg:animation|',
          ':svg:circle^:svg:geometry|',
          ':svg:clipPath^:svg:graphics|',
          ':svg:cursor^:svg:|',
          ':svg:defs^:svg:graphics|',
          ':svg:desc^:svg:|',
          ':svg:discard^:svg:|',
          ':svg:ellipse^:svg:geometry|',
          ':svg:feBlend^:svg:|',
          ':svg:feColorMatrix^:svg:|',
          ':svg:feComponentTransfer^:svg:|',
          ':svg:feComposite^:svg:|',
          ':svg:feConvolveMatrix^:svg:|',
          ':svg:feDiffuseLighting^:svg:|',
          ':svg:feDisplacementMap^:svg:|',
          ':svg:feDistantLight^:svg:|',
          ':svg:feDropShadow^:svg:|',
          ':svg:feFlood^:svg:|',
          ':svg:feFuncA^:svg:componentTransferFunction|',
          ':svg:feFuncB^:svg:componentTransferFunction|',
          ':svg:feFuncG^:svg:componentTransferFunction|',
          ':svg:feFuncR^:svg:componentTransferFunction|',
          ':svg:feGaussianBlur^:svg:|',
          ':svg:feImage^:svg:|',
          ':svg:feMerge^:svg:|',
          ':svg:feMergeNode^:svg:|',
          ':svg:feMorphology^:svg:|',
          ':svg:feOffset^:svg:|',
          ':svg:fePointLight^:svg:|',
          ':svg:feSpecularLighting^:svg:|',
          ':svg:feSpotLight^:svg:|',
          ':svg:feTile^:svg:|',
          ':svg:feTurbulence^:svg:|',
          ':svg:filter^:svg:|',
          ':svg:foreignObject^:svg:graphics|',
          ':svg:g^:svg:graphics|',
          ':svg:image^:svg:graphics|',
          ':svg:line^:svg:geometry|',
          ':svg:linearGradient^:svg:gradient|',
          ':svg:mpath^:svg:|',
          ':svg:marker^:svg:|',
          ':svg:mask^:svg:|',
          ':svg:metadata^:svg:|',
          ':svg:path^:svg:geometry|',
          ':svg:pattern^:svg:|',
          ':svg:polygon^:svg:geometry|',
          ':svg:polyline^:svg:geometry|',
          ':svg:radialGradient^:svg:gradient|',
          ':svg:rect^:svg:geometry|',
          ':svg:svg^:svg:graphics|#currentScale,#zoomAndPan',
          ':svg:script^:svg:|type',
          ':svg:set^:svg:animation|',
          ':svg:stop^:svg:|',
          ':svg:style^:svg:|!disabled,media,title,type',
          ':svg:switch^:svg:graphics|',
          ':svg:symbol^:svg:|',
          ':svg:tspan^:svg:textPositioning|',
          ':svg:text^:svg:textPositioning|',
          ':svg:textPath^:svg:textContent|',
          ':svg:title^:svg:|',
          ':svg:use^:svg:graphics|',
          ':svg:view^:svg:|#zoomAndPan',
          'data^[HTMLElement]|value',
          'menuitem^[HTMLElement]|type,label,icon,!disabled,!checked,radiogroup,!default',
          'summary^[HTMLElement]|',
          'time^[HTMLElement]|dateTime',
        ];

const _ATTR_TO_PROP: {[name: string]: string} = {
  'class': 'className',
  'for': 'htmlFor',
  'formaction': 'formAction',
  'innerHtml': 'innerHTML',
  'readonly': 'readOnly',
  'tabindex': 'tabIndex',
};

在哪里

Each element has a set of properties separated by , (commas). Each property can be prefixed by a special character designating its type:

 * - (no prefix): property is a string.
 * - `*`: property represents an event.
 * - `!`: property is a boolean.
 * - `#`: property is a number.
 * - `%`: property is an object.