javascript(四)

最新推荐文章于 2021-10-19 08:50:47 发布

defending

最新推荐文章于 2021-10-19 08:50:47 发布

阅读量224

点赞数 1

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/defending/article/details/77059908

版权

javascript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

事件介绍

1、onload：
onload 属性开发中只给 body元素加.这个属性的触发标志着页面内容被加载完成.应用场景: 当有些事情我们希望页面加载完立刻执行,那么可以使用该事件属性.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //加载完结构，再执行函数内容
        window.οnlοad=function () {

        }
    </script>
</head>
<body>

</body>
</html>

2、onsubmit：
当表单在提交时触发. 该属性也只能给form元素使用.应用场景: 在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" id="ss">
    <p>用户名<input type="text"></p>
    <p>密码<input type="password"></p>
    <p><input type="submit"></p>
</form>
<script>
    var ele=document.getElementById('ss')
//    ele.οnsubmit=function () {
//        alert(123)
//        //方式一
//        return false
//    }
    ele.οnsubmit=function (e) {
        alert(123);
        //方式二
        e.preventDefault()

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

3、事件传播：子区域事件发生引起父区域事件发送

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width: 300px;
            height: 300px;
            background-color: #396bb3;
        }
        .c2{
            width: 200px;
            height: 200px;
            background-color: #999999;
        }
    </style>
</head>
<body>
<div class="c1">
    <div class="c2"></div>
</div>
<script>
    var ele_c1=document.getElementsByClassName('c1')[0]
    var ele_c2=document.getElementsByClassName('c2')[0]
    ele_c1.οnmοuseοver=function () {
        alert(123)
    }
    ele_c2.οnmοuseοver=function (e) {
        alert(456)
        e.stopPropagation()//阻止事件传播
    }

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

4、onselect：选择

<input type="text">

<script>
    var ele=document.getElementsByTagName("input")[0];

    ele.οnselect=function(){
          alert(123);
    }

</script>

5、onchange:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
<select name="" id="province">
    <option value="">请输入省份</option>
    <option value="">河南</option>
    <option value="">河北</option>
</select>

</div>
<script>
    var ele=document.getElementById('province');
    var arr={'河南':['濮阳','洛阳'],'河北':['唐山','邯郸']};
    ele.οnchange=function () {
        var text_value=this.options[this.selectedIndex].innerText;
        if(ele.nextElementSibling){
                var ele_s=ele.nextElementSibling;
                var ele_f=ele.parentElement;
                ele_f.removeChild(ele_s);
                foo(text_value)
        }
        else {
            foo(text_value)
        }
        };


    function foo(text_value) {
        var new_select = document.createElement('select');
        var ele_father = ele.parentElement;
        ele_father.appendChild(new_select);
        var ele_select = ele.nextElementSibling;
        var arr_city = arr[text_value];
        console.log(arr_city);
        for (var i = 0; i < arr_city.length; i++) {
            var new_option = document.createElement('option');
            ele_select.appendChild(new_option);
            var ele_last = ele_select.lastElementChild;
            ele_last.innerText = arr_city[i]
        }
    }
</script>
</body>
</html>

6、onkeydown:
Event 对象：Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可.比如onkeydown,我们想知道哪个键被按下了，需要问下event对象的属性，这里就时KeyCode.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="ss">

<script>
    var ele=document.getElementById('ss')
    ele.οnkeydοwn=function (e) {
        e=e||window.event
        console.log(String.fromCharCode(e.keyCode))
    }
</script>
</body>
</html>

7、onmouseout与onmouseleave事件的区别：
1.不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。

2.只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .text{
            width: 200px;
            line-height: 44px;
            background-color: #999999;
        }
        .item{
            width: 200px;
            line-height: 40px;
            border: 1px greenyellow solid;
            display: none;
        }
    </style>
</head>
<body>
<div class="ss">
    <div class="text">text</div>
    <div class="item">text</div>
    <div class="item">text</div>
    <div class="item">text</div>
</div>

<script>
    var ele_text=document.getElementsByClassName('text')[0];
    var ele=document.getElementsByClassName('item');
    var ele_s=document.getElementsByClassName('ss')[0];

    ele_text.οnmοuseοver=function () {
        for (var i=0;i<ele.length;i++){
            ele[i].style.display='block'
        }
    };
    ele_s.οnmοuseleave=function () {

        for (var i = 0; i < ele.length; i++) {
            ele[i].style.display ='none'
        }
    };
</script>
</body>
</html>

===================================================================================================================================

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width: 20%;
            float: left;
        }
        .c3{
            background-color: #2459a2;
            text-align: center;
        }

        .c2{
            width: 80%;
            float: left;
        }
        .c4{
            width: 280px;
            height: 300px;
            position: fixed;
            top:50%;
            left: 50%;
            margin-top: -150px;
            margin-left: -115px;

            background-color: #8aab30;
            text-align: right;
            padding-right: 30px;

        }
        .hide{

            display: none;
        }
    </style>
</head>
<body>
<div class="c1">
    <div class="c3">操作</div>
    <div><button class="add">新增</button></div>
</div>
<div class="c2">
      <table border="1" class="tab">
          <tr>
              <td>编号</td>
              <td>书名</td>
              <td>作者</td>
              <td>价格</td>
              <td>分类</td>
              <td>上架时间</td>
              <td colspan="2">操作</td>
          </tr>
          <tr>
              <td>3122</td>
              <td>《端午节》</td>
              <td>egon</td>
              <td>2</td>
              <td>A</td>
              <td>2010</td>
              <td><button class="edit" >编辑</button></td>
              <td><button class="del">删除</button></td>
          </tr>
          <tr>
              <td>3142</td>
              <td>《若干规定》</td>
              <td>Alex</td>
              <td>3</td>
              <td>B</td>
              <td>2015</td>
              <td><button class="edit">编辑</button></td>
              <td><button class="del">删除</button></td>
          </tr>
          <tr>
              <td>3422</td>
              <td>《哭一哭》</td>
              <td>yuan</td>
              <td>2</td>
              <td>A</td>
              <td>2010</td>
              <td><button class="edit">编辑</button></td>
              <td><button class="del">删除</button></td>
          </tr>
      </table>
    <div class="c4 hide">
        <form action="#">
            <p>编号：<input type="text" class="text_data"></p>
            <p>书名：<input type="text" class="text_data"></p>
            <p>作者：<input type="text" class="text_data"></p>
            <p>价格：<input type="text" class="text_data"></p>
            <p>分类：<input type="text" class="text_data"></p>
            <p>上架时间：<input type="text" class="text_data"></p>
            <p><button class="old">保存</button> </p>
            <p><button class="new hide">保存2</button></p>
        </form>
    </div>
</div>
<script>
    var ele_btn=document.getElementsByTagName('button');

    for (var i=0;i<ele_btn.length;i++){
        ele_btn[i].οnclick=function () {

            if (this.className == 'add'){
                var ele_tab=document.getElementsByClassName('tab')[0];
                var ele_form=ele_tab.nextElementSibling;
                ele_form.classList.remove('hide');
                var New_tr=document.createElement('tr');

                ele_tab.appendChild(New_tr);


            }
            else if (this.className == 'del'){
                var ele_del=this.parentElement.parentElement.parentElement;
                var ele_f=this.parentElement.parentElement;
                ele_del.removeChild(ele_f)
            }
            else if(this.className == 'edit'){
                var ele_td_value=this.parentElement.parentElement.children;
                var list_text=[];
                for (var j=0;j<ele_td_value.length;j++){
                    var td_text=ele_td_value[j].innerText;
                    list_text.push(td_text)
                }
                var list_texts=list_text.slice(0,6);
                var ele_tab=document.getElementsByClassName('tab')[0];
                var ele_form=ele_tab.nextElementSibling;
                var ele_old_btn=ele_form.getElementsByClassName('old')[0];
                var ele_new_btn=ele_form.getElementsByClassName('new')[0];
                ele_old_btn.classList.add('hide');
                ele_new_btn.classList.remove('hide');
                ele_new_btn.egon=this.parentElement.parentElement;//将tr传过去
                ele_form.classList.remove('hide');


//                console.log(list_texts)
                var ele_input=document.getElementsByClassName('text_data');

                for (var k=0;k<ele_input.length;k++){
                    ele_input[k].value=list_texts.shift()
                }

            }
            else if (this.className == 'new'){
                var ele_on_tr=this.egon;
                var ele_on_tr_td=ele_on_tr.children
                console.log(ele_on_tr_td)
                var ele_input=document.getElementsByClassName('text_data');
                for (var c=0;c<ele_input.length;c++){
                    var ele_value=ele_input[c].value;
                    ele_on_tr_td[c].innerText=ele_value
                    ele_input[c].value='';
                }
                var ele_tab=document.getElementsByClassName('tab')[0];
                var ele_form=ele_tab.nextElementSibling;
                ele_form.classList.add('hide')
                 var ele_old_btn=ele_form.getElementsByClassName('old')[0];
                var ele_new_btn=ele_form.getElementsByClassName('new')[0];
                ele_new_btn.classList.add('hide');
                ele_old_btn.classList.remove('hide');
                ele_new_btn.egon=this.parentElement.parentElement;

            }
            else {
                var ele_tab=document.getElementsByClassName('tab')[0];
                var ele_last=ele_tab.lastElementChild;//最后一个tr标签


                var ele_input=document.getElementsByClassName('text_data');//全部input标签

                for (var i=0;i<ele_input.length;i++){
                    var ele_value=ele_input[i].value;//取得input的值
//                    alert(ele_value)
                    var new_td=document.createElement('td');
                    ele_last.appendChild(new_td);//在tr里 加td
                    var ele_1=ele_last.lastElementChild;//取td
                  ele_1.innerText=ele_value//加值
                    ele_input[i].value='';//清空
                }

                var new_td=document.createElement('td');
                ele_last.appendChild(new_td);
                var ele_1=ele_last.lastElementChild;
                ele_1.innerHTML='<button οnclick="ss(this)">删除</button>';
                var ele_e=ele_1.cloneNode(true);//完全复制
                ele_e.innerHTML='<button οnclick="update(this)">编辑</button>';

                ele_last.insertBefore(ele_e,ele_1);//插入ele_1前

                var ele_form=ele_tab.nextElementSibling;
                ele_form.classList.add('hide')
            }
        }
    }
function ss(self) {
    var ele_del=self.parentElement.parentElement.parentElement;
                var ele_f=self.parentElement.parentElement
                ele_del.removeChild(ele_f)
}
function update(self) {
    var ele_td_value=self.parentElement.parentElement.children;
                var list_text=[];
                for (var j=0;j<ele_td_value.length;j++){
                    var td_text=ele_td_value[j].innerText;
                    list_text.push(td_text)
                }
                var list_texts=list_text.slice(0,6);
                var ele_tab=document.getElementsByClassName('tab')[0];
                var ele_form=ele_tab.nextElementSibling;
                var ele_old_btn=ele_form.getElementsByClassName('old')[0];
                var ele_new_btn=ele_form.getElementsByClassName('new')[0];
                ele_old_btn.classList.add('hide');
                ele_new_btn.classList.remove('hide');
                ele_new_btn.egon=self.parentElement.parentElement;
                ele_form.classList.remove('hide');


//                console.log(list_texts)
                var ele_input=document.getElementsByClassName('text_data');

                for (var k=0;k<ele_input.length;k++){
                    ele_input[k].value=list_texts.shift()}
}


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

defending

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript(四)

事件介绍1、onload：onload 属性开发中只给 body元素加.这个属性的触发标志着页面内容被加载完成.应用场景: 当有些事情我们希望页面加载完立刻执行,那么可以使用该事件属性. Title //加载完结构，再执行函数内容 window.onload=function () { }
复制链接

扫一扫