6.11js学习笔记

最新推荐文章于 2021-06-12 00:17:21 发布

Shelysure

最新推荐文章于 2021-06-12 00:17:21 发布

阅读量158

点赞数

文章标签： js

本文链接：https://blog.csdn.net/Shelysure/article/details/106695354

版权

数组对象

有两种向数组赋值的方法（你可以添加任意多的值，就像你可以定义你需要的任意多的变量一样）。
1.

var mycars=new Array()
mycars[0]="Saab"
mycars[1]="Volvo"
mycars[2]="BMW"

也可以使用一个整数自变量来控制数组的容量：

var mycars=new Array(3)
mycars[0]="Saab"
mycars[1]="Volvo"
mycars[2]="BMW"

var mycars=new Array("Saab","Volvo","BMW")

for in循环输出数组

<html>
<body>
<script type="text/javascript">
var x
var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"
mycars[2] = "BMW"

for (x in mycars)
{
document.write(mycars[x] + "<br />")
}
</script>
</body>
</html>

结果：
在这里插入图片描述

在这里插入图片描述
方法详情：
https://www.w3school.com.cn/jsref/jsref_obj_array.asp

js事件

事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。

在这里插入图片描述

事件流：

例子：

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 事件</h1>

<button onclick="document.getElementById('demo').innerHTML=Date()">时间是？</button>

<p id="demo"></p>

</body>
</html>

在这里插入图片描述
点击后：

事件冒泡

当事件发生后，这个事件就要开始传播(从里到外或者从外向里)。为什么要传播呢？因为事件源本身（可能）并没有处理事件的能力，即处理事件的函数（方法）并未绑定在该事件源上。例如我们点击一个按钮时，就会产生一个click事件，但这个按钮本身可能不能处理这个事件，事件必须从这个按钮传播出去，从而到达能够处理这个事件的代码中（例如我们给按钮的onclick属性赋一个函数的名字，就是让这个函数去处理该按钮的click事件），或者按钮的父级绑定有事件函数，当该点击事件发生在按钮上，按钮本身并无处理事件函数，则传播到父级去处理。

在这里插入图片描述

样例代码：

<!DOCTYPE html>
<html lang="en" onclick="alert('html')">
<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">
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <title>Document</title>
</head>
<body onclick="alert('body')">
    <!--html-->
    <div style="width:400px; height:400px; background:red" onclick="alert(this.style.background)">
            <div id="div2" style="width:300px; height:300px; background:palevioletred">
                    <div style="width:200px; height:200px; background:yellow" onclick="alert(this.style.background)">
                            <div id="div1" style="width:100px; height:100px; background:palegreen">
                                <a id="aaa" href="http://www.baidu.com">aaa</a> 
                            </div>
                    </div>
            </div>
    </div>

    <script>
        //此jquery既阻止默认行为又停止冒泡
        // $("#div1").on('click',function(){
        //     return false;
        // });

        window.onload = function () {
            var oDiv1 = document.getElementById('div1');
            var oDiv2 = document.getElementById('div2');

            oDiv1.onclick = function (ev){
                var oEvent = ev || event;
                alert("this is div1");
                
                //js阻止事件冒泡
                //oEvent.cancelBubble = true;
                //oEvent.stopPropagation();

                //js阻止链接默认行为，没有停止冒泡
                //oEvent.preventDefault(); 
                //return false;
            }

            oDiv2.onclick = function (ev){
                var oEvent = ev || event;
                alert("this is div2");
                oEvent.cancelBubble = true; 
            }
        }
    </script>
</body>
</html>

addEventListener()用于给元素添加事件
removeEventListener()用于撤销元素事件。

当addEventListerner()第三个参数为true时，执行事件捕获，默认为false,执行事件冒泡


<div id=“p1”>

这是div

<p id="p1">这是段落</p>

</div>



<script>

document.getElementById("p1").addEventListener("click",myfunc1);

document.getElementById("div1").addEventListener("click",myfunc2);

</script>

这样默认执行事件冒泡（ie只支持冒泡），

如果点击p,会先执行p的myfunc1,然后再执行div的myfunc2;

如果都把第第三个参数改成true，那么函数的执行顺序会相反。

两位addEventListener()还可以给一个元素添加多个事件。


document.getElementById("p1").addEventListener("click",myfunc1);

document.getElementById("p1").addEventListener("click",myfunc3);

当点击p时，myfunc1,myfunc3都会发生。

取消事件

实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
#myDIV 
{
    background-color: coral;
    border: 1px solid;
    padding: 50px;
    color: white;
}
</style>
</head>
<body>

<div id="myDIV"> div 元素添加了  onmousemove 事件句柄，在你移动鼠标时会显示随机数。
	<p>点击按钮移除 DIV 的事件句柄。</p>
	<button onclick="removeHandler()" id="myBtn">点我</button>
</div>
<p id="demo"></p>
<script>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);
function myFunction() 
{
    document.getElementById("demo").innerHTML = Math.random();
}
function removeHandler() 
{
    document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
}
</script>

</body>
</html>

在这里插入图片描述

点击后下方的随机数将不会再改变，即事件已被取消
实例2：

<button id="btn1">按钮1</button>
    <button id="btn2">按钮</button>
    <script>
    var btn1 = document.getElementById("btn1");
    var btn2 = document.getElementById("btn2");
    //传统方式
    btn1.onclick = function(){
        console.log("第一个人");
    }
    btn1.onclick = function(){
        console.log("第二个人");
    }
    // btn1.οnclick=null;
    //添加事件监听器
    //如果添加的事件处理函数将来想要移除就不能使用匿名函数的方式
    btn2.addEventListener("click",fn1,false);
    function fn1(){
        console.log("第二个人");
    }
    //移除事件监听器   
    btn2.removeEventListener("click",fn1,false);
    </script>

今日欠缺：AddHandler 与 RemoveHandler

Shelysure

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
6.11js学习笔记

数组对象有两种向数组赋值的方法（你可以添加任意多的值，就像你可以定义你需要的任意多的变量一样）。1.var mycars=new Array()mycars[0]="Saab"mycars[1]="Volvo"mycars[2]="BMW"也可以使用一个整数自变量来控制数组的容量：var mycars=new Array(3)mycars[0]="Saab"mycars[1]="Volvo"mycars[2]="BMW"var mycars=new Array("Saab"
复制链接

扫一扫