3707人加入学习
(6人评价)
Web前端第三季(JavaScript)

制作完成于2018年6月14日

价格 免费

每一个函数都是由对象来调用的

[展开全文]

在JS里,变量是很随意的,可以不用“var”说明,也可以随意改变变量类型。

[展开全文]
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>省市联动</title>
    <script type="text/javascript">
        var provinceArr = new Array(5);
        provinceArr[0] = new Array("北京市");
        provinceArr[1] = new Array("郑州市","洛阳市","濮阳市","驻马店市");
        provinceArr[2] = new Array("石家庄市","唐山","秦皇岛","邯郸");
        provinceArr[3] = new Array("西安市","宝鸡市","延安");
        provinceArr[4] = new Array("菏泽市","济南市","青岛");

        function provinceChange(province){
            var city = document.getElementById("city");
            if(province.value == "-1"){
                city.innerHTML = "<option value='-1'>-请选择-</option>";
                return;
            }
            // console.log(provinceArr[province.value]);
            var cityArr = provinceArr[province.value];
            city.options.length = 0;
            for(var i=0;i<cityArr.length;i++){
                var cityOption = document.createElement("option");
                cityOption.innerText = cityArr[i];
                city.appendChild(cityOption);
            }
        }
    </script>
</head>
<body>
    <select onchange="provinceChange(this)">
        <option value="-1">-请选择-</option>
        <option value="0">北京市</option>
        <option value="1">河南省</option>
        <option value="2">河北省</option>
        <option value="3">陕西省</option>
        <option value="4">山东省</option>
    </select>
    <select id="city">
        <option value="-1">-请选择-</option>
    </select>
</body>
</html>

-----------省市二级联动下拉列表效果
1,创建二维数组
var arr = new Array(n); 省份的个数
arr[0]=new Array(m)  省份下城市的个数
2,清空下拉列表
ele.options.length = 0;

其他常用对象和常用方法
http://www.w3school.com.cn/jsref/index.asp

[展开全文]
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>全选</title>
    <script type="text/javascript">
        function selectAll(choiceBtn){
            // document.getElementsByTagName();
            var arr = document.getElementsByName("choice");
            for(var i=0;i<arr.length;i++){
                arr[i].checked = choiceBtn.checked;
            }
        }
    </script>
</head>
<body>
    <table border="1" width="800px" height="800px">
        <tr>
            <td><input type="checkbox" onclick="selectAll(this)" />全选</td><td>用户名</td><td>邮箱</td><td>电话号码</td><td>性别</td><td>操作</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="choice" /></td><td>siki</td><td>804632564@qq.com</td><td>804632564</td><td>男</td><td>发邮件 封号 编辑</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="choice" /></td><td>siki</td><td>804632564@qq.com</td><td>804632564</td><td>男</td><td>发邮件 封号 编辑</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="choice" /></td><td>siki</td><td>804632564@qq.com</td><td>804632564</td><td>男</td><td>发邮件 封号 编辑</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="choice" /></td><td>siki</td><td>804632564@qq.com</td><td>804632564</td><td>男</td><td>发邮件 封号 编辑</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="choice" /></td><td>siki</td><td>804632564@qq.com</td><td>804632564</td><td>男</td><td>发邮件 封号 编辑</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="choice" /></td><td>siki</td><td>804632564@qq.com</td><td>804632564</td><td>男</td><td>发邮件 封号 编辑</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="choice" /></td><td>siki</td><td>804632564@qq.com</td><td>804632564</td><td>男</td><td>发邮件 封号 编辑</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="choice" /></td><td>siki</td><td>804632564@qq.com</td><td>804632564</td><td>男</td><td>发邮件 封号 编辑</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="choice" /></td><td>siki</td><td>804632564@qq.com</td><td>804632564</td><td>男</td><td>发邮件 封号 编辑</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="choice" /></td><td>siki</td><td>804632564@qq.com</td><td>804632564</td><td>男</td><td>发邮件 封号 编辑</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="choice" /></td><td>siki</td><td>804632564@qq.com</td><td>804632564</td><td>男</td><td>发邮件 封号 编辑</td>
        </tr>
    </table>
</body>
</html>

--------------------全选和全不选操作
1,如果获得所有的复选框
document.getElementsByName("name")
2,获得设置复选框的状态
ele.checked
ele.checked=true/false;

[展开全文]
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>window对象a</title>
    <script type="text/javascript">
        //window浏览器窗口
        // var name = "siki";
        // console.log(window.name);
        // window.document.getElementById();

        // window.alert();
        // window.setInterval();
        // window.setTimeout();

        // var res = window.confirm("你确定要杀我吗?");
        // console.log(res);

        // var res = window.prompt("请输入你的性别:");
        // console.log(res);//输入结果,确定才会显示输入的内容,点击取消,显示null。

        // function myopen(){
        //     var w = window.open("http://www.sikiedu.com","new_window","width=500,height=500");
        //     w.resizeTo(400,400);
        //     w.moveTo(200,500);
        //     // w.close();
        //     w.focus();
        // }

        //window.screen
        // console.log(screen.availWidth);
        // console.log(screen.availHeight);

        // window.location
        // console.log(location.protocal);
        // console.log(location.hostname);
        // console.log(location.port);
        // console.log(location.pathname);
        // console.log(location);

        // location.assign("603-广告弹框.html");

        // window.history
        // history.go(-2);
    </script>
</head>
<body>
    <p>window对象-A</p>
    <a href="701-window对象b.html">下一个页面</a>
    <button onclick="history.back()">后退</button>
    <button onclick="history.forward()">前进</button>
    <button onclick="myopen()">打开</button>
</body>
</html>
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>window对象-B</title>
</head>
<body>
    <p>window对象-B</p>
    <a href="701-window对象c.html">下一个页面</a>
    <button onclick="history.back()">后退</button>
    <button onclick="history.forward()">前进</button>
</body>
</html>
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>window对象-C</title>
</head>
<body>
    <p>window对象-C</p>
    <a href="">下一个页面</a>
    <button onclick="history.back()">后退</button>
    <button onclick="history.forward()">前进</button>
</body>
</html>

history( window.history )
window.history 对象包含浏览器的历史。
history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击按钮向前相同

history.go(-2)    后退两步

[展开全文]
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>window对象</title>
    <script type="text/javascript">
        //window浏览器窗口
        // var name = "siki";
        // console.log(window.name);
        // window.document.getElementById();

        // window.alert();
        // window.setInterval();
        // window.setTimeout();

        // var res = window.confirm("你确定要杀我吗?");
        // console.log(res);

        // var res = window.prompt("请输入你的性别:");
        // console.log(res);//输入结果,确定才会显示输入的内容,点击取消,显示null。

        // function myopen(){
        //     var w = window.open("http://www.sikiedu.com","new_window","width=500,height=500");
        //     w.resizeTo(400,400);
        //     w.moveTo(200,500);
        //     // w.close();
        //     w.focus();
        // }

        //window.screen
        // console.log(screen.availWidth);
        // console.log(screen.availHeight);

        // window.location
        console.log(location.protocal);
        console.log(location.hostname);
        console.log(location.port);
        console.log(location.pathname);
        console.log(location);

        // location.assign("603-广告弹框.html");
    </script>
</head>
<body>
    <button onclick="myopen()">打开</button>
</body>
</html>

screen( window.screen ) 获取屏幕分辨率
screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度

location( window.location )
window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。

location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 (80 或 443)
location.protocol 返回所使用的 web 协议(http:// 或 https://)

window.location.assign("http://www.sikiedu.com")  相当于一个超链接的功能

[展开全文]
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>window对象</title>
    <script type="text/javascript">
        //window浏览器窗口
        // var name = "siki";
        // console.log(window.name);
        // window.document.getElementById();

        // window.alert();
        // window.setInterval();
        // window.setTimeout();

        // var res = window.confirm("你确定要杀我吗?");
        // console.log(res);

        // var res = window.prompt("请输入你的性别:");
        // console.log(res);//输入结果,确定才会显示输入的内容,点击取消,显示null。

        function myopen(){
            var w = window.open("http://www.sikiedu.com","new_window","width=500,height=500");
            w.resizeTo(400,400);
            w.moveTo(200,500);
            // w.close();
            w.focus();
        }
    </script>
</head>
<body>
    <button onclick="myopen()">打开</button>
</body>
</html>

window对象的函数(跟窗口有关系)
var w = window.open("http://www.sikiedu.com","name","width=500,height=500");
w.resizeTo(300,300);
w.moveTo(100,100);
w.close();
w.focus()获取焦点

[展开全文]

window对象
window对象是一个浏览器对象,代表浏览器窗口。
我们定义的变量、函数会自动放在window对象里面。
document也是window里面的。window.document
window中的变量或者对象一般可以直接写,不加 window.前缀

为什么要把document放在window里面
window代表整个浏览器窗口,网页是位于浏览器窗口里面的,document主要是跟网页有关,跟元素相关的操作都是通过document完成的,所以可以认为document是整个网页,网页位于窗口里面。
所以document也就放在了window里面

window对象的函数(弹出框)
alert
confirm 确认框
prompt    输入框
setInterval    clearInterval
setTimeout    clearTimeout

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>window对象</title>
    <script type="text/javascript">
        //window浏览器窗口
        // var name = "siki";
        // console.log(window.name);
        // window.document.getElementById();

        // window.alert();
        // window.setInterval();
        // window.setTimeout();

        // var res = window.confirm("你确定要杀我吗?");
        // console.log(res);

        var res = window.prompt("请输入你的性别:");
        console.log(res);//输入结果,确定才会显示输入的内容,点击取消,显示null。
    </script>
</head>
<body>
    
</body>
</html>

 

[展开全文]
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>广告弹框</title>
    <style type="text/css">
        #ad{
            width:300px;
            height:300px;
            background-color:antiquewhite;
            position:fixed;
            bottom:0px;
            right:0px;
            display:none;
        }
    </style>
    <script type="text/javascript">
        function init(){
            // setTimeout(showAd,2000);
            setInterval(showAd,5000);
        }
        function showAd(){
            var ad = document.getElementById("ad");
            ad.style.display = "block";
        }
        function closeAd(){
            var ad = document.getElementById("ad");
            ad.style.display = "none";
        }
    </script>
</head>
<body onload="init()">
    <br />1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br />23<br />24<br />25<br />26<br />27<br />28<br />29<br />30<br />31<br />32<br />33<br />34<br />35<br />36<br />37<br />38<br />39<br />40<br />41<br />42<br />43<br />44<br />45<br />46<br />47<br />48<br />49<br />50<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />123
    <div id="ad">
        <button onclick="closeAd()">关闭</button>
    </div>
</body>
</html>

----------广告弹框
1,广告的位置
网页的正上方
网页正中间
网页右下角
2,弹出的时间
网页加载的时候    onload
定时弹出
只显示一次(定时隐藏)
每隔一段时间弹出

[展开全文]
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>图片轮播</title>
    <style type="text/css">
        div{
            width:900px;
            height:400px;
            margin:0 auto;
        }
        div img{
            width:900px;
            height:400px;
        }
    </style>
    <script type="text/javascript">

        function init(){
            // window.setTimeout(changeImg,2000);//延迟2秒调用一次changeImg方法。
            window.setInterval(changeImg,2000);//循环,每隔2秒调用一次changeImg方法。
        }
        var pathArr = new Array(
            "img/1.jpg",
            "img/1.png",
            "img/2.jpg",
            "img/2.png"
        );
        var index = 0;
        function changeImg(){
            nextImg();
        }
        function preImg(){
            myimg = document.getElementById("myimg");
            index--;
            if(index < 0){
                index = pathArr.length-1;
            }
            myimg.src = pathArr[index];
        }
        function nextImg(){
            myimg = document.getElementById("myimg");
            index++;
            if(index >= pathArr.length){
                index = 0;
            }
            myimg.src = pathArr[index];
        }
    </script>
</head>
<body onload="init()">
    <p align="center">
        <button onclick="preImg()">上一张</button>
        <button onclick="nextImg()">下一张</button>
    </p>
    <div>
        <img src="img/1.png" id="myimg" />
    </div>
</body>
</html>

 

[展开全文]
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>数组</title>
    <script type="text/javascript">
        // var score1 = 100;
        // var score2 = 30;
        // var score3 = 20;
        //数组可以存储一组数据
        // var arr1 = new Array();
        // arr1[0] = 100;
        // arr1[1] = 30;
        // arr1[2] = 60;
        // arr1[3] = "sikiedu.com";// arr1[3] = 70;
        // arr1[4] = 80;
        // arr1[5] = 90;
        // console.log(arr1[3]);//70 //注释掉arr1[3] = 70; 打印结果是undefined //字符串arr1[3]="sikiedu.com";居然也能打印出来。
        // console.log(arr1.length);//6 //注释掉arr1[3] = 70; 打印结果仍然是6

        // for(var i=0;i<arr1.length;i++){
        //     console.log(arr1[i]);
        // }

        // var arr2 = new Array(10);
        // for(var i = 0;i < arr2.length;i++){
        //     console.log(arr2[i]);//undefined
        // }

        // var arr3 = new Array(90,80,50,40);
        // var arr3 = new Array("李白","孙尚香","夏侯惇");
        // for(var i = 0;i<arr3.length;i++){
        //     console.log(arr3[i]);
        // }

        function user(name,age,sex){
            this.name = name;
            this.age = age;
            this.sex = sex;
        }
        user1 = new user("李白",90,"男");
        user2 = new user("孙尚香",30,"女");
        user3 = new user("夏侯惇",20,"男");

        var arr = new Array(user1,user2,user3);
        for(var i = 0;i<arr.length;i++){
            // console.log(arr[i].name);
            console.log(arr[i].age);
        }
    </script>
</head>
<body>
    
</body>
</html>

 

[展开全文]
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>数组</title>
    <script type="text/javascript">
        // var score1 = 100;
        // var score2 = 30;
        // var score3 = 20;
        //数组可以存储一组数据
        var arr1 = new Array();
        arr1[0] = 100;
        arr1[1] = 30;
        arr1[2] = 60;
        arr1[3] = "sikiedu.com";// arr1[3] = 70;
        arr1[4] = 80;
        arr1[5] = 90;
        console.log(arr1[3]);//70 //注释掉arr1[3] = 70; 打印结果是undefined //字符串arr1[3]="sikiedu.com";居然也能打印出来。
        console.log(arr1.length);//6 //注释掉arr1[3] = 70; 打印结果仍然是6

        for(var i=0;i<arr1.length;i++){
            console.log(arr1[i]);
        }
    </script>
</head>
<body>
    
</body>
</html>

数组
1、创建数组
var myArray=new Array()
var mycars=new Array(3)    数组的长度是不固定的
var mycars=new Array("Saab","Volvo","BMW")
2、访问数组元素和设置数组元素
mycars[0]
mycars[0]="Opel"
3、取得数组长度
arr.length

[展开全文]
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>图片轮播</title>
    <style type="text/css">
        div{
            width:900px;
            height:400px;
            margin:0 auto;
        }
        div img{
            width:900px;
            height:400px;
        }
    </style>
    <script type="text/javascript">

        function init(){
            // window.setTimeout(changeImg,2000);//延迟2秒调用一次changeImg方法。
            window.setInterval(changeImg,2000);//循环,每隔2秒调用一次changeImg方法。
        }
        var index = 1;
        function changeImg(){
            nextImg();
        }
        function preImg(){
            myimg = document.getElementById("myimg");
            index--;
            if(index < 1){
                index = 2;
            }
            myimg.src = "img/" + index + ".png";
        }
        function nextImg(){
            myimg = document.getElementById("myimg");
            index++;
            if(index > 2){
                index = 1;
            }
            myimg.src = "img/" + index + ".png";
        }
    </script>
</head>
<body onload="init()">
    <p align="center">
        <button onclick="preImg()">上一张</button>
        <button onclick="nextImg()">下一张</button>
    </p>
    <div>
        <img src="img/1.png" id="myimg" />
    </div>
</body>
</html>

1,怎么自动调用某个函数(自动轮播)
setInterval(functionName,millisec);
2,当网页加载完成的时候,设置计时调用
onload
为什么要等网页加载完成?
只有网页加载完成了,才可以访问网页上的任何元素!
3,两种控制图片路径的方式
数组
设置固定规范的图片名称

[展开全文]
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>图片轮播</title>
    <style type="text/css">
        div{
            width:900px;
            height:400px;
            margin:0 auto;
        }
        div img{
            width:900px;
            height:400px;
        }
    </style>
    <script type="text/javascript">

        function init(){
            // window.setTimeout(changeImg,2000);//延迟2秒调用一次changeImg方法。
            window.setInterval(changeImg,2000);//循环,每隔2秒调用一次changeImg方法。
        }
        var index = 1;
        function changeImg(){
            myimg = document.getElementById("myimg");
            index++;
            if(index > 2){
                index = 1;
            }
            myimg.src = "img/" + index + ".png";
        }
    </script>
</head>
<body onload="init()">
    <div>
        <img src="img/1.png" id="myimg" />
    </div>
</body>
</html>

1,怎么自动调用某个函数(自动轮播)
setInterval(functionName,millisec);

[展开全文]
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>图片轮播</title>
    <style type="text/css">
        div{
            width:900px;
            height:400px;
            margin:0 auto;
        }
        div img{
            width:900px;
            height:400px;
        }
    </style>
    <script type="text/javascript">
        window.setTimeout(changeImg,2000);
        
        function changeImg(){
            myimg = document.getElementById("myimg");
            myimg.src = "img/2.png";
        }
    </script>
</head>
<body>
    <div>
        <img src="img/1.png" id="myimg" />
    </div>
</body>
</html>

 

[展开全文]

DOM节点----------

创建新元素(DOM树中的新节点)
var p = document.createElement("p");
p.innerHTML="xxx";
ele.appendChild(p);//把新创建的节点添加到DOM树中

创建文本节点
var node=document.createTextNode("xxxxx");
ele.appendChild(node);

删除元素(删除节点)
ele.removeChild(node);
 

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>添加新节点</title>
</head>
<body>
    <div id="mydiv">
        <span>第一个span</span>
        <span>第二个span</span>
        <span>第三个span</span>
        <span>第四个span</span>
        <p id="myp">我是p标签</p>
    </div>
</body>
</html>
<script type="text/javascript">
    myp = document.getElementById("myp");
    // myp.innerHTML = "<span>第五个span</span>";
    mydiv = document.getElementById("mydiv");
    mydiv.removeChild(myp);
    // mydiv.innerHTML = "<span>第六个span</span>";

    var newSpan = document.createElement("span"); //<span></span>
    // newSpan.innerText = "我是第五个span";
    var textNode = document.createTextNode("我是第五个 span");
    newSpan.appendChild(textNode);
    mydiv.appendChild(newSpan);
</script>

 

[展开全文]

其他事件(每个事件对应的事件名,就是把on去掉)
onclick
onload
onunload
onchange    (文本输入控件)
onmouseover    onmouseout
onmousedown onmouseup

 

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>DOM事件</title>
</head>
<body onload="init()">
 <!-- <body onload="init()" onbeforeunload="return beforeunload()"> -->
    <!-- 通过onclick属性添加事件 -->
    <div onclick="console.log('我被点击了');">DOM事件div</div>
    <div onclick="divClick()">DOM事件div</div>
    <span id="myspan">DOM事件span</span>
    <p onmouseover="console.log('onmouseover');" onmouseout="console.log('鼠标划出');" onmousedown="console.log('鼠标按下');" onmouseup="console.log('鼠标抬起');">DOM事件p</p>
    <font>DOM事件font</font>
    <a href="http://www.sikiedu.com">DOM事件a</a>

    <input type="text" onchange="inputChange(this)" />
</body>
</html>
<script type="text/javascript">
    function init(){
        console.log("网页加载完成");
    }
    function inputChange(input){
        console.log("用户输入的内容发生了改变" + input.value);
    }
    // function beforeunload(){
    //     return "你确定离开了吗?"
    // }
    function divClick(){
        console.log("div被点击了");
    }

    var myspan = document.getElementById("myspan");
    // myspan.onclick = function(){
    //     console.log("span被点击了");
    // };
    // myspan.addEventListener("click",spanClick);
    // function spanClick(){
    //     console.log("span被点击了");
    // }
    myspan.addEventListener("click",function(){
        console.log("span被点击了");
    });

</script>

 

[展开全文]

给元素添加点击事件
1,通过onclick属性
onclick="this.innerHTML='谢谢!'"
onclick="function(arg1,arg2)"
2,通过JavaScript代码添加点击事件(第一种方式)
ele.onclick=function(){};
3,通过JavaScript代码添加点击事件(第二种方式)
ele.addEventListener("click",function(){});

其他事件(每个事件对应的事件名,就是把on去掉)
onclick
onload
onunload
onchange    (文本输入控件)
onmouseover    onmouseout
onmousedown onmouseup

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>DOM事件</title>
</head>
<body>
    <!-- 通过onclick属性添加事件 -->
    <div onclick="console.log('我被点击了');">DOM事件div</div>
    <div onclick="divClick()">DOM事件div</div>
    <span id="myspan">DOM事件span</span>
    <p>DOM事件p</p>
    <font>DOM事件font</font>
    <a>DOM事件a</a>
</body>
</html>
<script type="text/javascript">
    function divClick(){
        console.log("div被点击了");
    }

    var myspan = document.getElementById("myspan");
    // myspan.onclick = function(){
    //     console.log("span被点击了");
    // };
    // myspan.addEventListener("click",spanClick);
    // function spanClick(){
    //     console.log("span被点击了");
    // }
    myspan.addEventListener("click",function(){
        console.log("span被点击了");
    });

</script>

 

[展开全文]