HTML高阶实例之自定义元素

我就是我 2022-05-28 02:39 148阅读 0赞

###### *最新更新时间：2018年3月27日18:07:55* ######

#### [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] ####

> 本文内容：自定义元素

> 创建自定义元素的意义：可以在元素定义中加入属性和方法，给元素绑定特定的功能。可以对该元素创建公开 API 。

###### 自定义元素的生命周期方法 ######

<table> 
 <thead> 
  <tr> 
   <th>事件名称</th> 
   <th>简要描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>createdCallback</td> 
   <td>创建元素实例</td> 
  </tr> 
  <tr> 
   <td>attachedCallback</td> 
   <td>向文档插入实例</td> 
  </tr> 
  <tr> 
   <td>detachedCallback</td> 
   <td>从文档中移除实例</td> 
  </tr> 
  <tr> 
   <td>attributeChangedCallback(attrName, oldVal, newVal)</td> 
   <td>添加，移除，或修改一个属性</td> 
  </tr> 
 </tbody> 
</table>

###### 实例代码入下 ######

document.registerElement('custom-video', { prototype: CVideoProto});//registerElement创建的元素名称必须包含-短横线，否则报错，创建失败
    let CVideoProto = Object.create(HTMLVideoElement.prototype,{ 
    	name:{ //添加方法
    		value:function(){ 
    			alert('this tag is custom video');
    		}
    	},
    	do:{ //添加属性
    		get:function(){ return 1;}
    	}
    });
    //生命周期方法
    CVideoProto.createdCallback = function() { 
    	this.addEventListener('click', function(e) { 
    		console.log('Thanks!');
    	});
    	//this.innerHTML = '这是一个自定义的video元素';
    };
    //使用
    let cvideo = document.createElement('custom-video');//实例化另一种方法let Qvideo = new Qvideo();
    document.body.appendChild(cvideo);
    cvideo.setAttribute("style","display:block;");//默认是inline-block
    cvideo.name();
    console.log(cvideo.do);

> 感谢阅读，欢迎评论^-^

## [`打赏我吧^-^`][-] ##

[-_-]: https://blog.csdn.net/wanshaobo888/article/details/79179440
[-]: https://blog.csdn.net/wanshaobo888/article/details/86249460

发表评论取消回复

表情：

评论列表（有 0 条评论，148人围观）

还没有评论，来说两句吧...

相关阅读

相关 MyBatis进阶之自定义MyBatis框架

1. 自定义MyBatis框架流程分析 ![e91db037b06b45d187a04130509a961a.png][] 2. 自定义框架原理介绍 ![5a24

妖狐艹你老母/ 2024年04月01日 10:13/ 0 赞/ 3 阅读

相关 MyBatis进阶之自定义MyBatis框架

1. 自定义MyBatis框架流程分析 ![f168255bcead371a2517bacbd666a3f7.jpeg][] 　　2. 自定义框架原理介绍 ![507bd

水深无声/ 2023年10月10日 15:12/ 0 赞/ 6 阅读

相关【Netty】高阶使用：自定义编解码器

当你通过 Netty 发送或者接受一个消息的时候，就将会发生一次数据转换入站时 – 消息被解码（Decode）：从字节（二进制）转换为我们能读懂并操作的格式（int、

谁践踏了优雅/ 2023年01月01日 03:41/ 0 赞/ 232 阅读

相关 html 元素自定义属性的创建和使用

方法1 1. IE 创建：`<div myAtt=123></div>`，`element.myAtt = 123;` 使用：`element.

快来打我*/ 2022年11月22日 12:49/ 0 赞/ 94 阅读

相关 vue项目中自定义自定义指令监听元素宽高变化，监听元素距离窗口距离变化

使用局部注册指令的方式 directives: { // 使用局部注册指令的方式 resize: { // 指令

﹏ヽ暗。殇╰゛Y/ 2022年11月12日 02:44/ 0 赞/ 267 阅读

相关 HTML5高阶实例之Drag&Drop

最新更新时间：2018年3月27日21:53:27 [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] 1、原生拖放-概述 > 对于拖放事件而

Myth丶恋晨/ 2022年05月29日 05:17/ 0 赞/ 162 阅读

相关 HTML5高阶实例之Canvas实现一个画板(手写板)

最新更新时间：2018年3月17日14:24:36 [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] 1、用canvas元素实现一个画板 >

妖狐艹你老母/ 2022年05月29日 04:57/ 0 赞/ 234 阅读

相关 HTML高阶实例之自定义元素

最新更新时间：2018年3月27日18:07:55 [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] > 本文内容：自定义元素 > 创建自定义元

我就是我/ 2022年05月28日 02:39/ 0 赞/ 149 阅读

相关 HTML5高阶实例之video

最新更新时间：2018年3月27日18:07:55 [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] > 本文内容：VIDEO标签动态创建常

「爱情、让人受尽委屈。」/ 2022年05月28日 01:54/ 0 赞/ 193 阅读

相关 HTML5高阶实例之canvas绘制圆弧

最新更新时间：2019年07月14日14:18:12 [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] > 本文内容：canvas 绘制圆弧

亦凉/ 2021年12月09日 17:39/ 0 赞/ 415 阅读