dom绑定事件操作

其他 2019-05-13 23:34:45 阅读次数: 0

s7.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #test{
        background-color: red;
        width:300px;
        height:400px;
    }
</style>
<body>
<div id="test">
    sdsd
</div>
<script>
    var mydiv=document.getElementById('test');
    mydiv.onclick=function () {
        console.log('wwwwwwwwwwwwww')
    }
</script>
</body>
</html>
行为 样式相分离

S8.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" onclick="AddEle1();" value="+">
    <input type="button" onclick="AddEle2();" value="+">
    <div id="i1">
        <p><input type="text"></p>
        <!--<hr/> 分隔线标签-->
    </div>
    <script>
        function AddEle1() {
            //创建一个标签
            //将标签添加到i1里面
            var tag="<p><input type='text'/></p>";
            //注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
            document.getElementById('i1').insertAdjacentHTML("afterEnd",tag);
        }
        function AddEle2() {
            //创建一个标签
            //将标签添加到i1里面
            var tag=document.createElement('input'); //创建一个input标签
            tag.setAttribute('type','text')
            tag.style.fontSize="16px";
            tag.style.color='red';

            var p=document.createElement('p'); //创建p标签
            p.appendChild(tag)
            document.getElementById('i1').appendChild(p) //添加p标签
        }
    </script>
</body>
</html>
</body>
</html>

S9.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form id='f1' action="http://www.baidu.com">
        <input type="text">
        <input type="submit" value="提交">
        <a onclick="submitForm();">提交1</a>

    </form>
    <script>
        function submitForm() {
            document.getElementById('f1').submit();
            alert(123);
            var v=confirm('确定?');
            console.log(v)
        }
        var obj=setInterval(function(){
            console.log(1);
        },1000)
        clearInterval(obj);


    </script>
</body>
</html>


提交表单
任何标签通过DOM都可以提交表单
document.getElementById('f1').submit();
alert();  弹窗
confirm('确定?') 确认框  确认为true 取消为false
console.log(v)  console口打印

location.href  获取当前url
location.href="http://www.baidu.com"  设置当前url 用于做重定向 跳转
location.href=location.href  刷新
location.reload();  刷新

var obj=setInterval(function(){},5000)  定时器 5000毫秒执行一次函数
clearInterval(obj);清除定时器

setTimeout 定时器只执行一次
obj= setTimeout(function (){},5000)
清除定时器
claerTimeout(obj);

S10.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="status"></div>
    <input type="button" value="删除" onclick="deleteEle(); "/>
    <script>
        function deleteEle() {
            document.getElementById('status').innerText="已经删除";
            obj= setTimeout(function () {
                document.getElementById('status').innerText='';
            },5000)
            clearTimeout(obj)
        }
    </script>
</body>
</html>
document.getElementById('status').innerText="已经删除";  重新添加标签内容

S11.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1" width="300px">
    <tr onmouseover="t1(0);" onmouseout="t2(0);"><td>1</td><td>2</td><td>2</td></tr>
    <tr onmouseover="t1(1);" onmouseout="t2(1);"><td>1</td><td>2</td><td>2</td></tr>
    <tr onmouseover="t1(2);" onmouseout="t2(2);"><td>1</td><td>2</td><td>2</td></tr>
</table>
<script>
    function t1(n) {
        var mytrs=document.getElementsByTagName('tr')[n];
        mytrs.style.backgroundColor='red';
    }
      function t2(n) {
        var mytrs=document.getElementsByTagName('tr')[n];
        mytrs.style.backgroundColor='';
    }
</script>
</body>
</html>
dom0的方式

绑定事件的两种方式:
a.直接标签绑定 onclick='' onfocus=''
b.先获取dom对象，然后进行绑定
    document.getElementById('xx').onclick
    document.getElementById('xx').onfocus

this 当前触发事件的标签
    a.第一种绑定方式
    <input id="i1" type="button" onclick="clickon(this)">
    function clickon(self){
    //self 代指当前点击的标签
    }

    b.第二种绑定方式
    <input id="i1" type="button" >
    document.getElementById('xxx').onclick=function(){
      //this 代指当前点击的标签
    }

    c.第三种绑定方式
    var mycontent=document.getElementById('i1');
        mymain.addEventListener('click',function(){console.log('aaaaa')},false);
        mymain.addEventListener('click',function(){console.log('bbbbb')},false);


作用域示例
    var mytrs=document.getElementsByTagName('tr');
    var len=mytrs.length;
    for(var i=0;i<len;i++){
        mytrs[i].onmouseover=function () {
           this.style.backgroundColor="red";
        }
        mytrs[i].onmouseout=function () {
           this.style.backgroundColor="";
        }

S12.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1" width="300px">
    <tr><td>1</td><td>2</td><td>2</td></tr>
    <tr><td>1</td><td>2</td><td>2</td></tr>
    <tr><td>1</td><td>2</td><td>2</td></tr>
</table>
<script>
    var mytrs=document.getElementsByTagName('tr');
    var len=mytrs.length;
    for(var i=0;i<len;i++){
        mytrs[i].onmouseover=function () {
           this.style.backgroundColor="red";
        }
        mytrs[i].onmouseout=function () {
           this.style.backgroundColor="";
        }
    }
</script>
</body>
</html>
dom1的方式
this 光标指向那个tr就指向那个tr

S12-1.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .hide{

            display: none;

        }

        .item .header{

            height: 35px;

            background-color: #2459a2;

            color: white;

            line-height: 35px;

        }

    </style>

</head>

<body>

    <div style="height: 48px;"></div>



    <div style="width: 300px;">



        <div class="item">

            <div class="header" onclick="ChangeMenu(this);">菜单1</div>

            <div class="content">

                <div>内容1</div>

                <div>内容1</div>

                <div>内容1</div>

            </div>

        </div>



        <div class="item">

            <div  class="header" onclick="ChangeMenu(this);">菜单2</div>

            <div class="content hide">

                <div>内容2</div>

                <div>内容2</div>

                <div>内容2</div>

            </div>

        </div>



        <div class="item">

            <div  class="header" onclick="ChangeMenu(this);" >菜单3</div>

            <div class="content hide">

                <div>内容3</div>

                <div>内容3</div>

                <div>内容3</div>

            </div>

        </div>



        <div class="item">

            <div class="header" onclick="ChangeMenu(this);" >菜单4</div>

            <div class="content hide">

                <div>内容4</div>

                <div>内容4</div>

                <div>内容4</div>

            </div>

        </div>



    </div>



    <script>

        function ChangeMenu(ths) {

            var current_header=ths;

            var item_list=current_header.parentElement.parentElement.children;

            for (var i=0;i<item_list.length;i++){

                var current_item=item_list[i];

                current_item.children[1].classList.add('hide');

            }

            current_header.nextElementSibling.classList.remove('hide');

        }

    </script>

</body>

</html></title>
</head>
<body>

</body>
</html>

S12-2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #test{
        background-color: red;
        width:300px;
        height:400px;
    }
</style>
<body>
<div id="test">
    sdsd
</div>
<script>
    var mydiv=document.getElementById('test');
    mydiv.addEventListener('click', function(){console.log('aaaaa')},false);
    mydiv.addEventListener('click', function(){console.log('bbbbb')},false);
</script>
</body>
</html>
dom2绑定方法

S13.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <style>
        #main{
            background-color: red;
            width: 300px;
            height:400px;
        }
        #content{
            background-color: pink;
            width: 150px;
            height:200px;
        }
    </style>
<body>
    <div id="main">
        <div id="content"></div>
    </div>
    <script>
        var mymain=document.getElementById('main');
        var mycontent=document.getElementById('content');
        mymain.addEventListener('click',function(){console.log('main')},false);
        mycontent.addEventListener('click',function(){console.log('content')},false); //冒泡  底下的先出来 true的模式刚好相反
    </script>
</body>
</html>

S14.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    function t1(age) {  //age 先找到函数声明表达式 function age()
        console.log(age);  //function age()
        var age=27;
        console.log(age);  //27
        function age() {}; //没有调用，通过
        console.log(age);  // 27 没有改变
    }
    t1(3);
</script>
</body>
</html>
active object ====>> AO 活动对象
1.形式参数
2.局部变量
3.函数声明表达式

1.形式参数
AO.age=undefined
AO.age=3
2.局部变量
AO.age=undefined
3.函数声明表达式 优先级最高
AO.age=function()

猜你喜欢

转载自www.cnblogs.com/leiwenbin627/p/10859666.html
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
循环神经网络（rnn）讲解
Tigao教程四：单独的关节运动
金蝶K3WISE15.0-注册套打教程
如何在Mac上配置Kubernetes
Android应用结束自身进程的方法
SpringMVC学习 十三 拦截器栈
中国驻洛杉矶总领馆举行新春招待会
HttpClient get post 发送
11 - three.js 笔记 - 绘制三维字体模型
Mysql递归获取某个父节点下面的所有子节点和子节点上的所有父节点
每日归档
更多
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022