JS8-8.2

最新推荐文章于 2024-08-21 14:09:37 发布

my威化饼干

最新推荐文章于 2024-08-21 14:09:37 发布

阅读量129

点赞数

文章标签： js javascript

本文链接：https://blog.csdn.net/wafer_biscuit/article/details/114649093

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
        width: 200px;
        height: 200px;
        background-color: pink;
    }
</style>
<body>
    <!-- 传统事件绑定只支持给一个元素添加一个相同事件（下覆盖上） -->
    <button>监听注册事件</button>
    <script>
        var btn1= document.querySelector('button');
        btn1.addEventListener('click',function(){
            console.log('点击1');
            btn1.onclick=null;  //传统删除事件
        }
        )

        btn1.addEventListener('click',function(){
            console.log('点击2');

            function fu(){
                alert('im');
                btn1.removeEventListener('click',fu)    //里面不用加小括hao
            }
        }
        )   //都会触发(有兼容性问题)

    </script>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        var son=document.querySelector('.son');
        son.addEventListener('click',function(){
            alert('son');
        },true) //是true，就是捕获阶段dou->html->body->div->div
        var fa=document.querySelector('.father');
        fa.addEventListener('click',function(){
            alert('fa');    //明明点击了son，但是先弹出了fa
        },true)
        var son=document.querySelector('.son');
        son.addEventListener('click',function(e){
            alert('son');
            e.stopPropagation ();   //阻止事件冒泡
            e.cancelBubble=true;    //另一种写法
        },false) //是false，就是冒泡阶段上面的反转下
        var fa=document.querySelector('.father');
        fa.addEventListener('click',function(){
            alert('fa');    //明明点击了fa，但是先弹出了son
        },false)    //完整是fssf
        document.addEventListener('click',function(){
            alert('docu');      //默认是false
        },false)
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    li{
        margin-top: 20px;
        background-color: pink;
    }
    img{
        position: absolute;
    }
</style>
<body>
    <button class="b1">123</button>
    <script>
        var b1=document.querySelector('.b1')
        b1.onclick=function(event){ //事件对象，相当于形参,可以自己命名的(ie不支持)
            console.log(event); //不用传实参，系统自动创建并且传给监听器
            console.log(window.event);//ie兼容写法
            console.log(event.target);  //返回触发事件的对象(点那个返回那个)
            console.log(event.type);    //返回事件类型
        }
    </script>
    <a href="www.baidu.com">百度</a>
    <script>
        var baidu=document.querySelector('a');
        baidu.addEventListener('click',function(e){
            e.preventDefault();     //阻止事件行为
            return false;       //兼容性问题,不错的写法
        })
    </script>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
        //事件委托:给ul注册点击事件，点li会给到ul，冒泡到ul，触发事件监听器
        var ul=document.querySelector('ul');
        ul.addEventListener('click',function(e){
            alert('hi~');   //利用了冒泡，简化了代码
            console.log(e.target);
            e.target.style.backgroundColor = 'red';
        })
        ul.addEventListener('selectstart',function(e){
            e.preventDefault();     //禁用ul变量的鼠标选中
        })
        document.addEventListener('click',function(e){
            console.log(e.clientX);
            console.log(e.clientY); //显示鼠标于可视窗口的相对坐标!可视！
            console.log(e.pageX);   
            console.log(e.pageY);       //显示对于页面的绝对坐标距离!!!常用！！！

        })
    </script>
    <img src="pic/a7.gif" alt="">
    <script>
        var pic=document.querySelector('img');
        document.addEventListener('mousemove',function(e){
            //console.log(e);        //事件mousemove，只要鼠标移动1px，就会触发事件
            var x=e.pageX;
            var y=e.pageY;
            pic.style.left=x-100+'px';  //居中对齐(伪做法)
            pic.style.top=y-100+'px';   //不要忘记添加单位！!!
        });
        document.onkeyup = function(){
            console.log('键盘弹起来');
        }
        var x=0;
        document.addEventListener('keydown',function(e){
               //函数中声明的变量会消亡
            x+=8;
            pic.style.left=x+'px';
            console.log(x);
            console.log(e.key);     //获取按了那个键
        });     //有意思
        //keypress区分大小写，down和up不区分
    </script>
    <input type="text" name="" id="">
    <script>
        var in1=document.querySelector('input');
        document.addEventListener('keyup',function(e){
            if(e.key=='s'){     //检测keydown会使得用户体验不好（s会被输入），注意细节
                in1.focus();
            }
        });
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .big {
        height: 100px;
        /* background-color: pink; */
        visibility: hidden;
        font-size: 40px;
    }

    .show {
        width: 300px;
        height: 300px;
        background-color: plum;
    }

    .alltime {
        width: 400px;
        height: 100px;
        background-color: plum;
    }

    .alltime li {
        float: left;
        border: 1px solid red;
        background-color: yellowgreen;
        margin-right: 1%;
        width: 30%;
        height: 100%;
        list-style: none;
        text-align: center;
        line-height: 100px;
        font-size: 40px;
    }
</style>

<body>
    <div class="sea">
        <div class="big">123</div>
        <input type="text" name="" id="" value="123">
    </div>
    <script>
        var big = document.querySelector('.big');
        var in1 = document.querySelector('input');
        in1.addEventListener('keyup', function (e) {
            console.log('ok');
            big.innerHTML = this.value;
            big.style.visibility = 'visible';
        });
        in1.addEventListener('blur', function () {
            big.style.visibility = 'hidden';
        });
    </script>


    <script>
        window.onload = function () {   //传统方式创建，下覆盖上
            var btn2 = document.querySelector('.b2');
            btn2.addEventListener('click', function () {
                alert('windowonload');
            });
        }
        window.addEventListener('load', function () {
            var btn2 = document.querySelector('.b2');
            btn2.addEventListener('click', function () {
                alert('方法创建windowonload');
            }); //依然是从上向下的，，只不过是延迟到了加载完
        });
        document.addEventListener('DOMContentLoaded', function () {
            var btn2 = document.querySelector('.b2');
            btn2.addEventListener('click', function () {
                alert('最好的方法');//在最前，因为在dom加载完后马上执行,最常用
            });
        });
    </script>
    <button class="b2">点击使用windowonload</button>
    <!-- windowonload使得在页面加载后才执行代码块 -->
    <div class="show"></div>
    <script>
        window.addEventListener('resize', function () {
            console.log('变化了');      //观测浏览器窗口大小发生变化(响应式布局js完成)
            console.log(window.innerWidth); //默认是数字
            var show = document.querySelector('.show');
            if (window.innerWidth < 1300) {
                show.style.display = 'none';
            } else {
                show.style.display = 'block';//感觉比css+框架简单方便~~
            }
        });
    </script>
    <!-- 接下来是大货，定时器 -->
    <button class="btn3">拆除炸弹</button>
    <script>        //延迟时间单位是毫秒ms，（可以省略）
        setTimeout(function () {      //settimeout可以调用外置函数,写上函数名就可以
            console.log('time is out!')
        }, 2000);    //回调函数，时间到了才回头调用这个函数
        function a1() {
            console.log('外置函数调用');
        }
        var timer1 = setTimeout(a1, 3000); //给他上名字，容易区分
        setTimeout('a1()', 4000);//这么写也是可以的,不提倡，太罗嗦了
        var btn3 = document.querySelector('.btn3');
        btn3.addEventListener('click', function () {
            clearTimeout(timer1);   //停止定时器，only通过变量id(名字)来停止，函数名字没有办法
        });
        setInterval(function () {
            console.log('间隔时间');
        }, 1000);        //1000ms
    </script>

    <ul class="alltime">
        <li class="hour">1</li>
        <li class="min">2</li>
        <li class="sec">3</li>
    </ul>
    <script>
        // var d = new Date();
        // var h=d.getHours();
        // var m=d.getMinutes();
        // var s=d.getSeconds();
        // var hour=document.querySelector('.hour');
        // var min=document.querySelector('.min');
        // var sec=document.querySelector('.sec');
        // console.log(h);
        var aa = setInterval(function () {
            var d = new Date();     //这个也要放进来，不然永远用的是第一个new的date
            var h = d.getHours();
            var m = d.getMinutes();
            var s = d.getSeconds();
            var hour = document.querySelector('.hour');
            var min = document.querySelector('.min');
            var sec = document.querySelector('.sec');
            hour.innerHTML = h;
            min.innerHTML = m;
            sec.innerHTML = s;
            console.log('sss');
        }, 1000);   //优化：另外封装函数，在计时器开始前先调用一次，便可以省去刷新时的加载时间
    </script>
    <button class="btn5">点一下使用“THE WORLD”</button>
    <script>
        var btn5=document.querySelector('.btn5');
        btn5.addEventListener('click',function(){
            clearInterval(aa);
        });
    </script>
    <button class="b6">点一下让你煎熬2s</button>
    <script>
        var b6=document.querySelector('.b6');
        var time=2;
        b6.addEventListener('click',function(){
            b6.disabled='true';
            // b6.innerHTML=time+'s';
            // time--;
            setTimeout(function(){
                b6.disabled=false;      //为啥这俩种都可以呢？
            },2000);
            // setInterval(function(){
            //     b6.innerHTML=time+'s';
            //     time--;
            // },1000);
        });
    </script>
    <!-- this指向的是调用者 -->
    <!-- 全局变量or普通函数this指向的是全局对象window -->
    <!-- 定时器中的this指向window -->
</body>

</html>

my威化饼干

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS8-8.2

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
复制链接

扫一扫