JavaScript学习

最新推荐文章于 2024-05-03 23:30:14 发布

钟记小前端--全栈

最新推荐文章于 2024-05-03 23:30:14 发布

阅读量216

点赞数

分类专栏：学习

本文链接：https://blog.csdn.net/qq_40997551/article/details/104222218

版权

学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

第二十一课

HTML

<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
    <!-- <div id="div1" onclick="add()">div1</div> -->
    <div id="div1" >div1</div>

    <script src="21.js"></script>
</body>
</html>

js

// 什么是事件：
// js  -》 交互   人可以去操作页面
// js -》事件驱动的方式

// 用户  -》  操作html元素  -》 产生一个事件  -》事件  主动的 调用  设定  方法  函数

// 事件源： 产生事件的地方
// 时间的类型：点击  键盘
// 事件对象：记录好  信息
// 事件的处理程序：函数


// 注册 ：把以后会发生的事情，先提前报备一下
// 没钱了就给家里打电话  你  肯定打电话

// 没钱了  +  打电话  -》 你
// 事件的类型  +  函数   -》  元素

// 两种方式
// 1.html的属性：
// 属性名：on +事件的名字  onclick
// 属性值：  方法

//     直接在html设定
//     通过js的元素对象来设定



var num = 0;
function add(){
    // console.log("点击："+ ++num);
    console.log("addEventListener 点击："+ ++num);
}

var num2 = 0;
function add2(){
    // console.log("点击："+ ++num);
    console.log("addEventListener 点击："+ num2--);
}

var div1  = document.getElementById("div1");
// div1.onclick  = add;

// div1.onclick = null;

// // 2.通过调用  系统提供的方法

// div1.addEventListener(事件类型click,函数add,事件的处理方式 布尔值  false  true);


div1.addEventListener("click",add);
div1.addEventListener("click",add2);


// 删除
div1.removeEventListener("click",add);

// ie8  attachEvent()   detachEvent()
// ie10

第二十二课

HTML

<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>

    <div id="div1" >div1</div>
    <input type="text" name="a" id="input1">
    <a href="http://www.baidu.com" target="_blank" id="a1">百度</a>

    <script src="22.js"></script>
</body>
</html>

js

// 事件函数 ：  发生的时候  -》  操作 function

var div1 = document.getElementById("div1");
div1.addEventListener("click",add);

// 事件对象  event： 提供了事件的详细信息：
// 具体发生事件的元素，鼠标的位置，点击的状态  键盘的按键

var input1 = document.getElementById("input1");
input1.addEventListener("keydown",add);

function add(event){
    // var e = event || window.event;  //ie8
    console.log(event);

    


    // 默认操作
    // 取消默认操作

    // event.preventDefault();

    ie8  -> event.returnValue = false;
    return false;



}


var a1 = document.getElementById("a1");
// a1.addEventListener("click",add);

a1.onclick = add;
// 取消默认操作
return false;

// screenX y: 屏幕的左上角

// clientX y: 浏览器的左上角

// screenX: 11
// screenY: 119
// clientX: 11
// clientY: 16

第二十三课

HTML

<!DOCTYPE html>
<html lang="en">
<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>
        #div1{
            width: 200px;
            height: 200px;
            background: green;

        }
        #div2{
            margin-left: 200px;
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <div id="div1">div1
        <div id="div2">div2</div>
    </div>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
        <li>li4</li>
        <li>li5</li>
    </ul>

    <script src="23.js"></script>
</body>
</html>

js

// 事件的传播：
// 多个标签，互相嵌套  点击页面时候 点击事件
// 是不是 被点中的标签  才会发生点击事件？


// var div1 = document.getElementById("div1");
// var div2 = document.getElementById("div2");


// div1.addEventListener("click",div1Click);
// div2.addEventListener("click",div2Click);



// function div1Click(){
//     console.log("div1 click")
// }


// function div2Click(){
//     console.log("div2 click")
// }


// 事件的传播：
// 在默认的情况下，点页面的一个标签，处在传播路径上的标签都会监听到对应的事件


// 传播路径呢


// var head1 = document.getElementsByTagName("head")[0];
// head1.addEventListener("click",head1Click);
// var body1 = document.getElementsByTagName("body")[0];
// body1.addEventListener("click",body1Click);





// function head1Click(){
//     console.log("head click")
// }


// function body1Click(){
//     console.log("body click")
// }




// 事件流：对应标签接收到事件的顺序
// 回声：  人  -》  大山  -》  人

// 两大阶段：

// 捕获阶段：从起始点  -》 目标位置
// 冒泡阶段：目标位置 -》起始点


// head1.addEventListener("click",head1Click,事件的传播  false true );


// false  -> head1Click   冒泡阶段执行
// true  -> head1Click   捕获阶段执行



var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
// 捕获阶段
div1.addEventListener("click",div1ClickTrue,true);
div2.addEventListener("click",div2ClickTrue,true);



function div1ClickTrue(){
    console.log("捕获阶段 div1 click")
}


function div2ClickTrue(){
    console.log("捕获阶段 div2 click")
}







// 冒泡阶段
div1.addEventListener("click",div1Click,false);
div2.addEventListener("click",div2Click,false);



function div1Click(){
    console.log("冒泡阶段 div1 click")
}


function div2Click(event){
    event.stopPropagation();  //阻止冒泡
    console.log("冒泡阶段 div2 click")
}




// 事件代理：


var ul1 = document.getElementsByTagName("ul")[0];
ul1.addEventListener("click",ulClick);

function ulClick(event){
    // console.log("ul click");
    console.log(event.target);
}