bom弹出框、事件委托、滚轮事件

最新推荐文章于 2022-04-20 21:37:48 发布

菲允龙歌

最新推荐文章于 2022-04-20 21:37:48 发布

阅读量147

点赞数

分类专栏：应用案例文章标签： js

本文链接：https://blog.csdn.net/Steve_Richard/article/details/100678159

版权

应用案例专栏收录该内容

23 篇文章 1 订阅

订阅专栏

bom弹出框

<body>
    <p>我是中国人，我爱中国！</p>
    <button>删除</button><button>修改</button>
    <script>
        var op = document.querySelector('p')
        var btn = document.querySelectorAll('button')
        btn[0].onclick = function(){
            var pd = window.confirm('确认删除')//带确认的对话框 有返回值 true false
            if(pd){
                this.remove()
            }
        }
        btn[1].onclick = function(){
            var con = window.prompt('修改的内容',op.innerText)//带输入的对话框（提示信息，默认值） 确定---输入框内的值  取消---null
            if(con){
                op.innerText = con
            }
        }
    </script>
</body>

事件委托

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
        var ul = document.querySelector('ul')
        var lis = document.querySelectorAll('li')
        ul.onclick = function(ev){
            var tag = ev.target
            tag.style.background = 'blue'
        }
        var li = document.createElement('li')
        li.innerHTML = '5'
        ul.appendChild(li)
    </script>
</body>

滚轮事件

<body>
    <div id="demo" style="height: 100px;">

    </div>
    <script>
        var demo = document.getElementById('demo');
        /*demo.onmousewheel = function(ev){
            //  console.log( ev.wheelDelta ); // 下  -120  上  120
             var scrol = ev.wheelDelta 
             scrol<0?scrol = '下':scrol = '上'
             console.log(scrol)
        }
        demo.addEventListener('DOMMouseScroll',function(ev){
            // console.log(ev.detail)  //  下  3   上  -3
            var scrol = ev.detail 
             scrol<0?scrol = '上':scrol = '下'
             console.log(scrol)
            // console.log(1)
        })  //  火狐  滚轮事件   绑定事件的方法  DOMMouseScroll
        */
        demo.onmousewheel = function(ev){
             var scrol = ev.wheelDelta 
             scrol<0?scrol = 20:scrol = -20
             var h = parseInt(demo.style.height)
             demo.style.height = h+scrol+'px'
            //  console.log(scrol)
        }
        demo.addEventListener('DOMMouseScroll',function(ev){
            // console.log(ev.detail)  //  下  3   上  -3
            var scrol = ev.detail 
            var h = parseInt(demo.style.height)
             scrol<0?scrol = -20:scrol = 20
             demo.style.height = h+scrol+'px'
        })
    </script>
</body>

<body>
    <input type="text">
    <script>
        var inp = document.querySelector('input')

        inp.onfocus = function(){
            inp.onmousewheel = function mw(ev){
                var ev = window.event || ev
                var num = ev.wheelDelta
                var shu = Number(inp.value) 
                ev.wheelDelta>0?num=1:num=-1
                inp.value = num + shu
            }
        }
        inp.addEventListener('DOMMouseScroll',function mw(ev){
            var ev = window.event || ev
            var num = ev.wheelDelta
            var num = ev.wheelDelta
            var shu = Number(inp.value) 
            ev.wheelDelta>0?num=1:num=-1
            inp.value = num + shu
            console.log(num)
        },false)
    </script>
</body>

菲允龙歌

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bom弹出框、事件委托、滚轮事件

bom弹出框<body> <p>我是中国人，我爱中国！</p> <button>删除</button><button>修改</button> <script> var op = document.querySelector('p') var bt...
复制链接

扫一扫