c1认证事件部分

小白村第一深情

已于 2022-09-16 16:15:54 修改

阅读量288

点赞数

分类专栏： c认证文章标签： javascript 前端 ui

于 2022-09-16 16:09:53 首次发布

本文链接：https://blog.csdn.net/ceike/article/details/126891655

版权

c认证专栏收录该内容

7 篇文章 0 订阅

订阅专栏

事件

UI事件

load事件（onload）

加载完毕后执行

正常打印：

正确：

案例（由于案例最开始是从Typora上保存的，显然复制的时候，出了问题，ty默认将head部分代码和JavaScript代码分开了，并且复制在排版上因为数量多内部可能会忽略排版，因为后面依然有很多源码，这里博主给大家再手动截图为大家提供更直观的资源，如果一定要排版好的源码做参考，可查看博主的资源，里面有原文档，好像是5积分来着）

<script> let box1=document.getElementsByClassName("box"); console.log(box1); window.onload=function(){ let box3=document.getElementById("box"); console.log(box3); }  </script>

</head>

<div class="box">class</div>
<div id="box">id</div>
</body>

<script> let box2=document.getElementById("box"); console.log(box2);  let box4=document.getElementsByClassName("box");  console.log(box4); </script>

刚看了下上面的源码确实不完整，ty和其他编辑器之间的交互功能并不统一（不过这也是人家的特点，大家都觉得这软件不错），大体这样

打印

思考1？

resize

当浏览器大小变化时

scroll（滚动）

overflow：scroll

解答1！

鼠标事件

事件类型

onclick（单击）

ondblclick(双击)

oncontextmenu(右键菜单)

onmouseover（移入）

onmouseout（移出）

onmousedown（按下）

onmouseup（抬起）

onmousemove（移动）

事件对象

坐标位置

screenX

在屏幕中的x坐标

screenY

在屏幕中的y坐标

相对于body

clientX表示事件发生时鼠标指针在视口中的水平坐标（不包含滚动距离）

...我也不是很懂(到body的距离)

clientY 在视口中的垂直坐标

IE没有一下两个属性

pageX 在页面中的x坐标（包含滚动距离）

pageY 在页面中的y坐标

获取点击目标的坐标(有兼容性)

offsetX

offsetY

client和offset区别？

client和offset用法!

一般用于求绿色部分（以坐标体现）

此处附加c1事件代码

阻止冒泡

什么是冒泡？

同一个事件，由子级传递给父级称之为事件冒泡

fn stoppropagation（）非IE

pro cancelBubble = true IE

冒泡实例

<script>
    // 重名定义
    let a=document.querySelector(".a");
    let b=document.querySelector(".b");
    // 这里试一下不带.
    // 只定义暂时未出现报错
    let c=document.querySelector(".c")
    a.onclick=function(){
        console.log("a");
        //  console.log(a);
        // bug原因，未带""
    }
    b.onclick=function(){
        console.log("b");
    }
    c.onclick=function(){
        console.log("c");
    }
    document.onclick=function(){
        console.log(document);
    }
    window.onclick=function(){
        console.log("window");
    }
</script>

解决冒泡问题

<script>
    // 重名定义
    let a=document.querySelector(".a");
    let b=document.querySelector(".b");
    // 这里试一下不带.
    // 只定义暂时未出现报错
    let c=document.querySelector(".c")
    a.onclick=function(e){
        console.log("a");
        //  console.log(a);
        // bug原因，未带""
        // stopPropagation一般用， e.cancelBubble用于IE
        if( e.stopPropagation){
            e.stopPropagation();
        }else{
            e.cancelBubble=true;
        }
    }
    // 一般用e.stopPropagation()就可以阻止冒泡
    b.onclick=function(e){
        console.log("b")
        e.stopPropagation();
    }
    c.onclick=function(e){
        console.log("c");
        e.stopPropagation();
    }
    document.onclick=function(){
        console.log(document);
    }
    window.onclick=function(){
        console.log("window");
    }
    
</script>

记录

加上固定大小

这里是我在因为定义了每个盒子都是一样大，还设置了padding而导致的新排布，我打算把他用在自己的网站建设上

加margin-left后的布局

阻止默认

fn preventDefault() 非IE

pro returnValue=true IE

<body>

    <p>窗前明月光</p>

</body>

<script>


  // 窗口事件

  window.oncontextmenu=function(e){

    //阻止默认事件

    e.preventDefault();

  }

  let p=document.querySelector("p");

  // .p应该是不行，详情请见阻止冒泡部分

  p.onmousedown=function(e){

    e.preventDefault();

  }



</script>

效果就是无法实现复制粘贴

dom0和dom2区别

<body>

<script>
// dom0

// window.onclick=function(){

// alert("我是dom0级别的弹窗")

// }

// window.onclick=function(){

// alert("我是dom0级别的弹窗2")

// }

// 这个带2的事件就不会再dom0级别事件下触发



// dom0级不能冒泡似的连续依次触发事件



// dom2

// addEventListener（事件类型，函数，是否捕获）（这句话很迷，看实际应用）

function a(){

alert(1);

}

window.addEventListener("click",a,false)//这里的false代表了冒泡事件，反之true就是捕获（居然不是阻止）

// 刚开始看下面的柿子有些复杂

window.addEventListener("click",function(){

alert(2);



},false



)

// 删除a事件

// window.removeEventListener("click",a)





</script>

</body>

捕获与冒泡的区别

什么是捕获？

同一个事件，由父级传递给子级，也就是谁先响应

什么是冒泡？

同一个事件，由子级传递给父级称之为事件冒泡

<script>
    let a=document.querySelector(".a");
    let b=document.querySelector(".b");
    let c=document.querySelector(".c");
    a.addEventListener("click",function(){
        console.log("a");
    },true);//默认为冒泡false
    b.addEventListener("click",function(){
        console.log("b");
    },true);
    c.addEventListener("click",function(){
        console.log("c");
    },true);
    </script>