js监听div标签上面的自定义属性
好久没写博客了，可能是近期遇到了瓶颈没有什么东西可以写了，而且最近在换工作也没什么时间。
现在工作换好了，于是更多的可能会慢慢的向原生js方向去。
直接上代码吧
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#app{
height: 100px;
width: 100px;
background: red
}
#root{
height: 100px;
width: 100px;
background: black
}
#show{
height: 100px;
width: 100px;
background: yellow
}
</style>
</head>
<body>
<div id="app" show="showFn" hide="hideFn"></div>
<div id="root"></div>
<div id="show"></div>
<script>
// 这是调用的
function hideFn() {
console.log('消失了');
}
function showFn() {
console.log('显示了');
}
document.getElementById('app').addEventListener('hide', function() {console.log('又监听到了')}, false);
</script>
<script>
//这是封装的
// eval('fn')获取到函数名的字符串然后转成函数
//hide和show对应div上的属性名
document.getElementById('root').addEventListener('click',function() {//消失
var arr = document.getElementById('app').attributes
Object.keys(arr).forEach((key,index) => {//拿到属性和对应的值
if (arr[key].name == 'hide') {
var hide = new Event('hide');//dispatchEvent需要传入一个type为event的参数
document.getElementById('app').style.display = "none"
document.getElementById('app').addEventListener('hide', eval(arr[key].nodeValue), false);//监听hide事件
document.getElementById('app').dispatchEvent(hide);//派发hide事件
}
});
})
document.getElementById('show').addEventListener('click',function() {//显示
var arr = document.getElementById('app').attributes
Object.keys(arr).forEach((key,index) => {
if (arr[key].name == 'show') {
var show = new Event('show');
document.getElementById('app').style.display = "block"
document.getElementById('app').addEventListener('show', eval(arr[key].nodeValue), false);
document.getElementById('app').dispatchEvent(show);
}
});
})
</script>
</body>
</html>
主要的api是addEventListener监听事件和dispatchEvent派发事件
通过这种方式来实现监听和执行div属性上绑定的事件
共同学习，写下你的评论
评论加载中...
作者其他优质文章
