史上最详细的DOM事件之剪贴板事件

简介: 史上最详细的DOM事件之剪贴板事件上篇博客讲了DOM的表单事件,这篇博客我们来讲一讲DOM的剪贴板(ClipboardEvent)事件。HTML代码: <div id="box">hello world</div> <p>这是一个段落标签</p> <input type="text" id="text"> 1 2 31.oncopy(赋值)事件 var oBox = document.getElementById("box"); var oText=document.getElementById("text");

史上最详细的DOM事件之剪贴板事件




上篇博客讲了DOM的表单事件,这篇博客我们来讲一讲DOM的剪贴板(ClipboardEvent)事件。


HTML代码:


 

<divid="box">hello world</div><p>这是一个段落标签</p><inputtype="text"id="text">


1.oncopy(赋值)事件


var oBox = document.getElementById("box");
    var oText=document.getElementById("text");
    // ClipboardEvent   剪贴板事件
    // oncopy 该事件在用户拷贝元素内容时触发  
    oBox.oncopy = function (ev) {
        alert("copy成功");
        console.log(ev)
    }


2.oncut(剪切)事件



// oncut  该事件在用户剪切元素内容时触发 
    oText.oncut=function(ev){
        alert("剪切成功");
        console.log(ev)
    }

3.onpaste(粘贴)事件


// onpaste  该事件在用户粘贴元素内容时触发
    oText.onpaste=function(ev){
        alert("粘贴成功");
        console.log(ev);
    }

视频讲解链接:
https://www.bilibili.com/video/BV1yi4y147gD/

相关文章
|
6月前
|
XML 消息中间件 JavaScript
从0开始学习JavaScript--JavaScript DOM操作与事件处理
在前端开发中,DOM(文档对象模型)是一个至关重要的概念,它为JavaScript提供了一种与HTML和XML文档交互的方法。本文将深入探讨DOM的概念与作用,以及JavaScript与DOM之间的密切关系。
|
2月前
|
JavaScript 前端开发
JavaScript HTML DOM 事件
JavaScript HTML DOM 事件
23 5
|
1月前
|
JavaScript 前端开发 API
深入理解jQuery:高效DOM操作与事件处理
【10月更文挑战第11天】深入理解jQuery:高效DOM操作与事件处理
18 0
|
2月前
|
前端开发 JavaScript
CSS中禁用DOM事件
CSS中禁用DOM事件
|
4月前
|
移动开发 JavaScript 前端开发
VUE实现一个列表清单【props 父子组件通信、slot插槽的使用、全局自定义指令的封装、$nextTick解决异步DOM更新、巧用v-model简化父子组件之间的通信、触发事件的事件源event】
VUE实现一个列表清单【props 父子组件通信、slot插槽的使用、全局自定义指令的封装、$nextTick解决异步DOM更新、巧用v-model简化父子组件之间的通信、触发事件的事件源event】
44 0
|
6月前
|
JavaScript
js_操作dom(委托和冒泡事件)
js_操作dom(委托和冒泡事件)
40 0
|
XML JavaScript 前端开发
|
JavaScript
JS(Dom事件操作)第十九
JS(Dom事件操作)第十九
187 0
|
6月前
|
存储 JavaScript 前端开发
JavaScript:DOM事件
JavaScript:DOM事件
54 0
|
11月前
|
JavaScript 前端开发
原生JavaScript之dom表单改变和鼠标常用事件
那么好,本次我们聊聊表单改变时如何利用onchange方法来触发input改变事件以及鼠标常用的滑入滑出,点击down和点击up事件.
52 2