DOM04

最新推荐文章于 2024-07-13 20:30:24 发布

rcj15651130122

最新推荐文章于 2024-07-13 20:30:24 发布

阅读量26

点赞数

文章标签：数学建模

本文链接：https://blog.csdn.net/rcj15651130122/article/details/131057310

版权

一、事件对象

<body>
    <div>事件对象
        <span>1111111</span>
    </div>
    <!-- 
      事件对象：谁绑定，绑定后得到的一些相关的信息，
     -->
    <script>
        var div = document.querySelector('div')
        // event  事件对象 是关于整个事件的所有内容，相关信息  e   evt
        //  事件对象可以理解为是一个形参 是自带的
        //    使用事件对象可以处理事件相关的程序问题
        // e.target 触发的元素对象

        // ie9以下event无法使用  window.event

        // this是指事件绑定的元素（谁绑定的这个事件就打印谁）
        // e.target 事件触发的元素（点击了谁打印就谁）
        div.onclick = function (e) {
            // console.log(e)
            console.log(e.target) //元素对象
            // console.log(this)
            // console.log(e || window.event)  //兼容ie9以下
            // console.log(window.event)
            // e.target.style.color = 'red'
            // alert('我被点击了')
        }
    </script>
</body>

二、e.preventDefault() 阻止默认行为

<body>
    <a href="http://www.baidu.com">百度</a>

    <script>
        // 阻止默认行为：在html中有一些标签有默认行为，例如a点击后会出现跳转页面

        // e.preventDefault 阻止事件默认行为
        var a = document.querySelector('a')
        a.addEventListener('click', function (e) {
            console.log(e);
            e.preventDefault()  //阻止默认行为 标准语法
        })
        a.onclick = function (e) {
            // e.preventDefault()  //在ie9以下不支持
            e.returnValue
            // return false  //也可以阻止默认行为   没有兼容性  下面的代码不再执行
        }
    </script>
</body>

三、e.stopPropagation停止传播() 阻止事件冒泡

<body>
    <div class="box">
        爸爸
        <div class="son">儿子</div>
    </div>

    <script>
        // 阻止事件冒泡：子元素执行事件时，阻止父元素执行

        var box = document.querySelector('.box')
        var son = document.querySelector('.son')
        son.addEventListener('click', function (e) {
            alert('我是儿子')
            e.stopPropagation() //阻止事件冒泡  标准

            // window.event.cancelBubble = true  //非标准  Bubble 泡泡
        })
        box.onclick = function () {
            alert('我是爸爸')
        }
    </script>
</body>

四、事件委托

<body>
    <ul>
        <li>第一个li</li>
        <li>第二个li</li>
        <li>第三个li</li>
        <li>第四个li</li>
        <li>第五个li</li>
    </ul>
    <div>盒子</div>
    <script>
        //事件冒泡：事件委托  给父元素添加事件，来去处理子元素相应的操作


        // var ul = document.querySelector('ul')
        // // ul的点击事件
        // ul.addEventListener('click', function (e) {
        //     //    e.target
        //     console.log(e.target)
        //     e.target.style.color = 'red'
        // })

        var ul = document.querySelector('ul')
        var li = document.querySelectorAll('li')
        // ul的点击事件

        ul.addEventListener('click', function (e) {
            //    e.target
            console.log(e.target)
            for(var i=0;i<li.length;i++){
                li[i].style.color=''
            }
            e.target.style.color = 'red'
            ul.style.color = ''
        })
    


        // var div = document.querySelector('div')
        // div.onmousedown = function (e) {
        //     // console.log(e.clientX, e.clientY)
        //     this.style.top = e.clientY + 'px'
        //     this.style.left = e.clientX + 'px'
        //     console.log(this.style.top)
        //     console.log(this.style.left)
        // }
    </script>
</body>

五、鼠标事件对象

<body>
    <div>盒子</div>
    
    <script>
        document.addEventListener('click', function (e) {
            //  clientX clientY相对于可视区域的x y轴
            console.log('client', e.clientX, e.clientY)

            // pageX pageY 是相对于页面进行的X Y轴  如果页面没有滑块时，client和page拿到的x y轴的坐标值是一样的
            console.log('page', e.pageX, e.pageY)

            // screen 鼠标相对于电脑屏幕的X Y轴  了解
            console.log('screen', e.screenX, e.screenY)
        })
    </script>
</body>

六、鼠标拖拽案例

<body>
    <div class="div">
        <img src="4.jpg" alt="">
    </div>
    <div class="box">
    </div>
    <script>
        //  有个盒子  获取元素 给元素添加事件
        //  鼠标按下(在盒子区域按下)拖拽盒子才会移动
        // 鼠标松开后盒子停止移动
        var div = document.querySelector('.div')
        var box = document.querySelector('.box')
        div.onmousedown = function (e) {
            console.log('按下')
            document.onmousemove = function (e) {
                console.log(e.clientX, e.clientY)
                div.style.top = e.clientY + 'px'
                div.style.left = e.clientX + 'px'

            }
        }

        div.onmouseup = function (e) {
            console.log('鼠标弹起触发')
            var imgSrc = e.target.src
            if (e.clientX > 500 && e.clientX < 800 && e.clientY > 300 && e.clientY < 600) {
                var boxImg = document.querySelector('.box').querySelector('img')
                if (boxImg) {
                    boxImg.remove()
                }
                var img = document.createElement('img')
                img.src = imgSrc
                box.appendChild(img)
                div.style.top = 0 + 'px' //div回到刚开始的地方
                div.style.left = 0 + 'px' //div回到刚开始的地方
            }
            document.onmousemove = null

        }
    </script>
</body>

七、键盘事件对象

<body>
    <script>
        // 键盘事件： onkeyup onkeydown  onkeypress
        // onkeyup 键盘上的任意按键弹起的时候触发  码值不区分字母大小写
        // keyCode是每个键盘按键对应的ASCII码值
        // 回车键是13
        // document.onkeyup = function (e) {
        //     console.log(e.keyCode)   
        //     console.log('onkeyup')
        // }
        // onkeydown键盘上的任意按键按下的时候触发（键盘只要不松开就会一直触发） 能识别功能键  shift  ctrl
        //   onkeydown也不区分字母大小写
        document.onkeydown = function (e) {

            console.log('onkeydown')
        }
        // onkeypress 键盘上按键按下的时候触发，但是先触发onkeydown 再触发onkeypress （不能识别功能键  shift  ctrl）
        //   onkeypress区分字母大小写
        document.onkeypress = function (e) {
            console.log(e.keyCode)
            console.log('onkeypress')
        }
        // ASCII码
    </script>
</body>

八、键盘案例

<body>
    <div>
        <!-- <form action=""> -->
        <label>姓名：<input type="text" id="username" placeholder="请输入姓名" autofocus></label>
        <br>
        <label>密码：<input type="password" id="pwd" placeholder="请输入密码"></label>
        <br>
        <button>提交</button>
        <!-- </form> -->
    </div>
    <script>
        var un = document.querySelector('#username')
        var psd = document.querySelector('#pwd')
        var btn = document.querySelector('button')
        // 姓名输入框的鼠标弹起事件
        un.onkeyup = function (e) {
            // 姓名有值并且按的是回车键才能让密码框获取焦点
            if (un.value && e.keyCode == 13) {
                // 密码框获取焦点
                psd.focus()
            }
        }
        // 密码框按键弹起事件
        psd.onkeyup = function (e) {
            // 密码框和姓名有值并且按了回车键才能调用提交按钮函数
            if (psd.value && un.value && e.keyCode == 13) {
                fn()

            }
        }
        btn.addEventListener('click', fn)
        function fn() {
            if (psd.value && un.value) {
                alert('提交')
            }
        }
    </script>
</body>