扩展DOM事件侦听包括属性和样式
English - Español - Polski - Pусский - 中文
此库允许您以标准事件的方式使用事件侦听器来侦听DOM上发生的任何更改,从侦听html更改到设置样式时,甚至输入上的值更改时
该脚本既可以加载到html的顶部,也可以加载到内容中。 加载文件后,将自动加载所有功能。 注意:在任何其他脚本之前包含此脚本以正确实现
<script src="/(node_modules|bower_modules)/pikantny/init.min.js"></script>
开始使用它就像使用标准监听器方法一样简单
var node = document.querySelector('selector')
node.addEventListener('innerHTML', console.log);
$('selector').on('innerHTML', console.log);
在监听propery事件时,有两种不同类型的侦听器,即前DOM更新侦听器和后DOM更新侦听器。 通过简单地将“update”添加到任何侦听器的末尾,您的事件将触发DOM更新
node.addEventListener('innerHTMLupdate', console.log);
可以添加属性事件侦听器以检测任何属性中的任何更改
node.addEventListener('id', console.log);
node.setAttribute('id','your-id');
// or
node.id = 'your-id';
node.addEventListener('textContent', console.log);
node.textContent = 'new-text';
任何元素方法都允许侦听它们的执行
node.addEventListener('appendChild', console.log);
node.appendChild(input);
与样式对象或样式属性关联的样式也允许侦听任何更改,如果在样式属性中设置了多个,则将触发每个相应的侦听器
node.addEventListener('color', console.log);
node.style.color = '#000';
// or
node.setAttribute('style','color:#000;');
输入值更改还允许侦听任何更改并且与IME兼容
input.addEventListener('value', console.log);
传递给每个触发事件的事件对象允许与标准DOM事件侦听器类似的功能
从pre DOM更新事件调用时,此方法可用于防止DOM更新
// innerHTML, textContent, appendChild, etc
node.addEventListener('html', function(e){ e.preventDefault(); });
// input
input.addEventListener('value', function(e){ e.preventDefault(); });
从前DOM更新事件调用时,此方法可用于停止发布后DOM更新事件
node.addEventListener('innerHTML', function(e){ e.stop(); });
// this will not fire
node.addEventListener('innerHTMLupdate', console.log);
当被调用时没有冒泡的侦听器将会触发,包括发布DOM更新
当被调用时,当前的一个侦听器将不会被激活,包括发布DOM更新
此属性显示在后DOM更新事件中查看时执行函数的返回值
显示正在设置的值
显示正在设置的项目的上一个值
所有其他事件属性遵循与标准Event对象相同的准则
不允许元素进行任何html更改
var node = document.querySelector('selector');
node.addEventListener('html',function(e){e.preventDefault();});
验证输入以查看是否允许给定值。
您可以使用return false;
或event.preventDefault();
来停止输入更新
var input = document.querySelector('selector');
input.addEventListener('value',function(e){ return /^[0-9A-Za-z]+$/.test(e.value); });
此库支持开发控制台事件面板,添加的所有事件将显示在此面板中。
如果你想在这里贡献的是步骤
- 克隆存储库: Pikantny Github Repo
- 安装任何必要的开发依赖项
- 编译项目
npm run build
- 测试你的更改不要破坏任何东西
npm test
- 请求您的更改 :)
您可以在此处查看许可证: License