js 自定义事件 document.createEvent

小demo 图片查看器

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>图片查看器</title>    <style>        ul{            list-style: none;            display: flex;            flex-wrap: wrap;        }        ul img{            width: 400px;        }        #mask{            position: absolute;            left: 0;            right: 0;            top: 0;            bottom: 0;            background-color:rgba(1,1,1,0.5);            text-align: center;        }        .preview{            display: inline-block;            color: white;            font-size: 300%;            float: left;            margin-top: 50vh;        }        .next{            display: inline-block;            color: white;            font-size: 300%;            float: right;            margin-top: 50vh;        }    </style></head><body><ul id="list">    <li><img src="1-1.jpg" ></li>    <li><img src="1-2.jpg" ></li>    <li><img src="1-3.jpg" ></li>    <li><img src="1-4.jpg" ></li>    <li><img src="1-5.jpg" ></li></ul><div id="mask">    <span class="preview">< </span>    <img src="" >    <span class="next">></span></div></body><script>const imgList = document.getElementById(‘list‘);let imgs = document.querySelectorAll(‘ul img‘);function setPreviewBehavior(subjects) {    let previewEvent = document.createEvent(‘Event‘);    previewEvent.initEvent(‘preview‘,true,true);    if(!Array.isArray(subjects)){        if(subjects.length) subjects = Array.from(subjects);        else subjects = [subjects];    }    previewEvent.previewTarget = subjects.map(evt => {        return evt.src;    });    subjects.forEach(subject => {       subject.preview = function () {           subject.dispatchEvent(previewEvent);       }    });}setPreviewBehavior(imgs);const previewMask = document.getElementById(‘mask‘);let previewImage = previewMask.querySelector(‘img‘);let previewPrevious = previewMask.querySelector(‘.preview‘);let previewNext = previewMask.querySelector(‘.next‘);previewMask.addEventListener(‘click‘,evt => {    if(evt.target === previewMask){        evt.target.style.display= ‘none‘;    }});imgList.addEventListener(‘click‘,evt => {    if (evt.target.preview) {        evt.target.preview();    }});imgList.addEventListener(‘preview‘, evt => {  const src = evt.target.src,  imgs = evt.previewTarget;  previewMask.style.display = ‘block‘;  previewImage.src = src;  let idx = imgs.indexOf(src);  function updateButton(idx) {      previewPrevious.style.display = idx ? ‘block‘: ‘none‘;      previewNext.style.display= idx < imgs.length-1 ? ‘block‘ : ‘none‘;  }  updateButton(idx);  previewPrevious.onclick = function (evt) {        previewImage.src = imgs[--idx];        updateButton(idx);  };  previewNext.onclick = function (evt) {      previewImage.src = imgs[++idx];      updateButton(idx);  }})</script></html>

时间： 2024-10-28 16:30:11

js 自定义事件 document.createEvent的相关文章

漫谈js自定义事件、DOM/伪DOM自定义事件

一.说明.引言我JS还是比较薄弱的,本文的内容属于边学边想边折腾的碎碎念,可能没什么条理,可能有表述不准确的地方,可能内容比较拗口生僻.如果您时间紧迫,或者JS造诣已深,至此您就可以点击右侧广告(木有?则RSS或盗版)然后撤了. 事件是个大课题,真要从断奶开始讲起的话,可以写个12期的连载.关于JS事件的文章(类似DOM/BOM事件模型,IE与其他浏览器事件差异,DOM1/DOM2事件定义等)落叶般随处可见.熟豆子反复炒一点意思都没有,因此,这里谈谈自己感兴趣的自定义事件以及周边. 所谓自定义

js自定义事件、DOM/伪DOM自定义事件

js自定义事件的实现探索

我们一般所熟悉的事件,都是这样的:onclick,onmouseover,ontouchstart,onfocus... 但这里要讨论自定义事件的实现,包含:事件注册/监听.事件分发. 有两种方式去实现: 自己实现事件管理器:CustomEventManager 使用document.createEvent 先说第一种方式 CustomEventManager的实现要实现一个完整的事件体系,必须包含2大功能:注册/监听.触发,用伪代码表示: function CustomEventManage

js自定义事件模式

---恢复内容开始--- js事件用的最多的就是默认事件.不过有时候需要自定义事件来使用. 参照默认事件的模式,例如click事件,鼠标点击dom,先触发click事件,然后执行dom上的事件处理程序. <p>点我</p> document.getElementByTagName('p')[0].addEventLisener('click',()=>{ alert('click'); }) 同理,自定义事件也需要三个部分,即事件注册.事件触发.处理程序. 这里使用原型方法做

转 js自定义事件——Event和CustomEvent

之前在学习自定义事件时,在MDN的Event.initEvent()页面顶端有写:该特性已从Web标准中删除,虽然一些浏览器目前仍然支持它,但也许会在未来的某个时间停止支持,请尽量不要使用该特性. 作为替代,我们可以通过创建Event对象和CustomEvent对象来创建自定义对象.先从Event()对象开始. Event()——Event对象的构造函数咱们可以看着下面这个例子去了解如何使用Event()创建一个自定义对象: 1 <script type="text/javascript

vue.js 自定义事件

<div id="app"> <h2>{{num}}</h2> <h1>全局组件</h1> <my-component @myclick="vueAdd"></my-component>  </div> </body> </html> <script>/* */ Vue.component('my

js自定义事件

js 自定义事件

<!DOCTYPE html> <html> <head lang="zh-CN"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"/> <title></title> <style> .button

js 自定义事件观察者模式(发布/订阅)

/* * 示例: * Event.create("namespace1").listen('click', function(a){ * console.log(a); * }); * Event.create("namespace1").trigger("click", 1); */ window.myEvent = (function() { var global = this, Event, _default = 'default'; Ev