DOM 操作

一. DOM查找元素

　　1.直接查找

document.getElementById             根据ID获取一个标签
document.getElementsByName          根据name属性获取标签集合
document.getElementsByClassName     根据class属性获取标签集合
document.getElementsByTagName       根据标签名获取标签集合

　　2.间接查找　　

parentNode          // 父节点
childNodes          // 所有子节点
firstChild          // 第一个子节点
lastChild           // 最后一个子节点
nextSibling         // 下一个兄弟节点
previousSibling     // 上一个兄弟节点
 
parentElement           // 父节点标签元素
children                // 所有子标签
firstElementChild       // 第一个子标签元素
lastElementChild        // 最后一个子标签元素
nextElementtSibling     // 下一个兄弟标签元素

练习：

    <script>
        var ele =document.getElementById('i1');
        var ele_node_father = ele.parentNode;       // 父节点
        var ele_node_child = ele_node_father.childNodes;        //子节点
        var ele_father = ele.parentElement;        //父标签
        var ele_child = ele_father.children;        //子标签
        // 循环子标签
        for(var i=0;i<ele_child.length;i++){
            console.log(ele_child[i]);
        }
        //循环子节点
        for(var i=0; i<ele_node_child.length;i++){
            if(ele_node_child[i].nodeType==1){
                console.log(ele_node_child[i])
            }

        }
    </script>

 二.dom操作

　　1.值操作

　　innerText  文本内容

　　innerHTML  文本内容+html

　　value  值

　　2.样式操作

　　obj.className

　　obj.classList

　　obj.classList.add('c1')

　　obj.classList.remove('c1')

阴影+模态对话框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            /*阴影部分*/
            position: fixed;
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;
            background: rgba(0,0,0,.6);
            z-index: 2;
        }
        .c2{
            /*模态对话框*/
            position: fixed;
            width: 200px;
            height: 200px;
            top: 50%;
            left: 50%;
            background: white;
            z-index: 3;
        }
        /*隐藏*/
        .hide{
            display: none;
        }

    </style>
</head>
<body>
    <table border="1px">
        <thead>
        <tr>
            <td>第一列</td>
            <td>第二列</td>
            <td>第三列</td>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
        </tr>
        <tr>
            <td>d</td>
            <td>e</td>
            <td><input type="button" value="click" onclick="show();"></td>
        </tr>
        <div id="i_d1" class="c1 hide"></div>
        <div id="i_d2" class="c2 hide">
            <input type="button" value="确定">
            <input type="button" value="取消" onclick="hide();">
        </div>
        </tbody>
    </table>
    <script>
        function show() {
            document.getElementById("i_d1").classList.remove("hide")
            document.getElementById("i_d2").classList.remove("hide")
        }
        function hide() {
            document.getElementById("i_d1").classList.add("hide")
            document.getElementById("i_d2").classList.add("hide")
        }
    </script>
</body>
</html>
View Code

 菜单折叠

　　function 可以传递参数，当参数是this时，传递的是当前标签。classList.add('hide') 多次添加，只显示一个hide

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .menu{
            width: 200px;
            height: 500px;
            background-color: orange;
            border: 1px solid blue;
            color: white;
        }
        .menu .title{
            background-color: darkred;
        }
        .menu ul{
            margin: 0px;
            background-color: cornflowerblue;
            list-style: none;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div class="menu">
        <div class="item">
            <div class="title" onclick="show(this);">菜单一</div>
            <div class="content">
                <ul>
                    <li>内容一</li>
                    <li>内容一</li>
                    <li>内容一</li>
                </ul>
            </div>
        </div>
         <div class="item">
            <div class="title" onclick="show(this);">菜单二</div>
            <div class="content hide">
                <ul>
                    <li>内容二</li>
                    <li>内容二</li>
                    <li>内容二</li>
                </ul>
            </div>
        </div>
        <div class="item">
            <div class="title" onclick="show(this);">菜单三</div>
            <div class="content hide">
                <ul>
                    <li>内容三</li>
                    <li>内容三</li>
                    <li>内容三</li>
                </ul>
            </div>
        </div>
        <div class="item">
            <div class="title" onclick="show(this);">菜单四</div>
            <div class="content hide">
                <ul>
                    <li>内容四</li>
                    <li>内容四</li>
                    <li>内容四</li>
                </ul>
            </div>
        </div>
    </div>
<script>
    function show(args) {
        //console.log(args)
        args.nextElementSibling.classList.remove('hide');//移除隐藏当前菜单下的内容
        var father_ele = args.parentElement;
        var grandpa_ele = father_ele.parentElement;
        var uncle_ele = grandpa_ele.children;
        for(var i =0;i<uncle_ele.length;i++){
            var current_ele = uncle_ele[i];
            if(current_ele!=father_ele){
                current_ele.lastElementChild.classList.add('hide')  //所有增加隐藏
            }
        }
    }
</script>
</body>
</html>
View Code

 搜索框 onfocus

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .before_focus{
            color: lightgrey;
        }
        .after_focus{
            color: black;
        }
    </style>
</head>
<body>
    <!--系统提供的方法，有些就版本不支持-->
    <input type="text" placeholder="请输入内容"><br>
    <!--click简单实现-->
    <input type="text" value="请输入内容" onclick="cls(this);"><br>
    <!--获得焦点，失去焦点实现-->
    <input type="text" class="before_focus" value="请输入内容" onfocus="foc(this);" onblur="blu(this)">
    <script>
        function cls(args) {
            var current_value = args.value;
            if(current_value=='请输入内容'){
                args.value="";
            }
        }
        function foc(args) {
            args.className="after_focus";
            var current_value = args.value;
            if(current_value=='请输入内容'){
                args.value="";
            }
        }
        function blu(args) {
            var current_value = args.value;
            if(current_value=='请输入内容'||current_value.trim().length==0){
                args.value="请输入内容";
                args.className="before_focus";
            }
        }
    </script>
</body>
</html>
View Code

 checkbox 全选，反选 ->value checked

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <input type="button" value="全选" onclick="selectAll();">
        <input type="button" value="反选" onclick="reverseAll();">
        <input type="button" value="取消" onclick="cancelAll();">
    </div>
    <table>
        <thead>
            <tr>
                <th>选择</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody class="tb">
        <tr>
            <td><input type="checkbox"></td>
            <td>张三</td>
            <td>18</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>李四</td>
            <td>20</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>王五</td>
            <td>23</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>赵六</td>
            <td>29</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>SB</td>
            <td>11</td>
        </tr>
        </tbody>
    </table>
    <script>
        function selectAll() {
            var tb = document.getElementsByClassName('tb'); //tbody
            var tb_child = tb[0].children;  //tbody ->所有的tr
            for(var i=0; i<tb_child.length;i++ ){
                tb_child[i].firstElementChild.firstElementChild.checked = true; //tr -> td -> input
            }
        }
        function reverseAll() {
            var tb = document.getElementsByClassName('tb');
            var tb_child = tb[0].children;
            for(var i=0; i<tb_child.length;i++ ){
                if(tb_child[i].firstElementChild.firstElementChild.checked){
                    tb_child[i].firstElementChild.firstElementChild.checked = false;
                }else {
                    tb_child[i].firstElementChild.firstElementChild.checked = true;
                }

            }
        }
        function cancelAll() {
            var tb = document.getElementsByClassName('tb');
            var tb_child = tb[0].children;
            for(var i=0; i<tb_child.length;i++ ){
                tb_child[i].firstElementChild.firstElementChild.checked = false;
            }
        }
    </script>
</body>
</html>
View Code

 radio   ->value checked

    <div>
        <input type="radio" name="sex" value="1">男
        <input type="radio" name="sex" value="2">女
    </div>
    <script>
        var sex = document.getElementsByTagName('input');
        console.log(sex[0].value); //获取value 的值
        sex[1].checked=true  //第二个默认被选中
    </script>
View Code

 select  ->value selectedindex

    <div>
        <select id="sel">
            <option value="1" selected="selected">北京</option>
            <option value="2">上海</option>
            <option value="3">广州</option>
            <option value="4">深圳</option>
        </select>
    </div>
    <script>
        var sel = document.getElementById('sel')
        sel.selectedIndex = 2   //设置默认选中的索引值
        console.log(sel.value)  //获取当前选择的value值
    </script>
View Code

 text password textarea ->value

    <input id ="i_text" type="text" value="123">
    <input id="i_pass" type="password" value="456">
    <textarea id="i_area">789</textarea>
    <script>
        var i_text = document.getElementById("i_text")
        console.log(i_text.value)
        var i_pass = document.getElementById("i_pass")
        console.log(i_pass.value)
        var i_area = document.getElementById("i_area")
        console.log(i_area.value)
    </script>
View Code

内嵌样式

    <div id="i1" style="background-color: red;color: blue">123</div>
    <script>
        var i1=document.getElementById('i1');
        i1.style.color="yellow";
        i1.style.backgroundColor="#ddd";
    </script>

 

　　3.属性操作

　　attributes                // 获取标签所有属性

　　setAttribute(key,value)            // 设置标签属性
　　getAttribute(key)                // 获取指定标签属性
    <div id="i1">
        <div class="c1">1</div>
        <div class="c1" sb="SB">2</div>
        <div class="c1" sb="SB">3</div>
        <div class="c1">4</div>
        <div class="c1" sb="SB">5</div>
        <div class="c1">6</div>
    </div>
    <script>
        var i1 = document.getElementById('i1');
        var i1_children = i1.children;
        for(var i = 0;i<i1_children.length;i++){
            var current_div = i1_children[i];
            if(current_div.getAttribute('sb')=='SB'){
                current_div.innerText='SB'
            }
        }
    </script>
View Code

 Tab 实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .clearfix:after{
            display: block;
            height: 0;
            content: '11';
            visibility: hidden;
            clear: both;
        }
        .tab{
            border: 1px solid gainsboro;
            width: 500px;
            min-height: 400px;
        }
        .tab .menu{
            background-color: green;
        }
        .tab ul{
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .tab li{
            float: left;
            color: white;
            background-color: #2459a2;
            padding: 8px 10px;
        }
        .hide{
            display: none;
        }
        .tab .sel{
            background-color: white;
            color: #2459a2;
        }
    </style>
</head>
<body>
    <div class="tab">
        <div class="menu clearfix">
            <ul>
                <li target="con1" class="sel" onclick="show(this);">菜单1</li>
                <li target="con2" onclick="show(this);">菜单2</li>
                <li target="con3" onclick="show(this);">菜单3</li>
            </ul>
        </div>
        <div class="content">
            <div con="con1">内容1</div>
            <div con="con2" class="hide">内容2</div>
            <div con="con3" class="hide">内容3</div>
        </div>
    </div>
    <script>
        function show(args) {
            //给自己添加被点击的样式
            args.className ='sel';
            var target= args.getAttribute('target');
            var borthers = args.parentElement.children;
            for(var i = 0; i<borthers.length;i++){
                var current_tag = borthers[i];
                if(current_tag!==args){
                    //兄弟节点中不等于自己的，移除选中样式
                    current_tag.removeAttribute('class');
                }
            }
            // 对应的切换内容
            var con_divs = document.getElementsByClassName('content')[0].children;
            for(var i = 0;i<con_divs.length;i++){
                var current_div = con_divs[i];
                var current_con = current_div.getAttribute('con');
                if(current_con===target){
                    current_div.removeAttribute('class');
                }else {
                    current_div.className='hide';
                }
            }

        }
    </script>
</body>
</html>
View Code

 

　　4.标签操作

   <div>
        <input type="text">
        <input type="button" value="添加" onclick="add(this);">
    </div>
    <div>
        <ul id="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
    <script>
//        字符串方式添加
//        function add(args) {
//            var tmp_value= args.previousElementSibling.value;
//            args.previousElementSibling.value="";
//            var insert_value= "<li>"+tmp_value+"</li>";
//            var list = document.getElementById('list');
//            //第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
//            list.insertAdjacentHTML('beforeEnd',insert_value);
//        }

//        元素方式添加
        function add(args) {
            var tmp_value= args.previousElementSibling.value;
            args.previousElementSibling.value="";
            var tem_tag = document.createElement('li');
            tem_tag.innerText=tmp_value;
            var list = document.getElementById('list');
            list.appendChild(tem_tag);  //在尾部添加
            list.insertBefore(tem_tag,list.children[1])  //在某个位置之前添加

        }
    </script>
View Code

 创建标签两种方式：

　　　　方式一：

　　　　var str_tag = "<a href='www.baidu.com'>baidu</a>"

　　　　方式二：

　　　　var obj_tag = document.createElement('a')

　　　　obj_tag.innerText="baidu"

　　　　obj_tag.href='www.baidu.com'

　　　　obj_tag.className='cccc'

对应插入标签也有两种方式：

　　　　方式一：

　　　　//第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'

　　　　xxx.insertAdjacentHTML('beforeEnd',str_tag)

　　　　xxx.insertAdjacentElement('afterBegin',document.createElement('a'))

           方式二：

　　　　xxx.appendChild(obj_tag)

　　　　xxx.insertBefore(obj_tag,list.children[1])

　　　　　　　

　移动与拷贝标签

<body id="b1">
    <div id="i1" style="background-color: red">123456</div>
    <div id="i2" style="background-color: green">
        <a>987654321</a>
    </div>
    <script>
        //移动标签
        var i1 = document.getElementById('i1');
        var i2 = document.getElementById('i2');
        var b1 = document.getElementById('b1');
        //将i1移动到i2里面
        i2.appendChild(i1)
        //将i1与 i2交换位置
        b1.insertBefore(i2,i1);


        //拷贝标签
        var i1 = document.getElementById('i1');
        var i2 = document.getElementById('i2');
        //无参数只是拷贝标签，有true参数 拷贝标签与内容
        var new_i1 = i1.cloneNode(true)
        i2.appendChild(new_i1)
    </script>
</body>
View Code

 

　　5.位置操作

返回顶部实例

document.body.scrollTop 当前滚动条位置

<body onscroll="show();">  滚动条滑动执行的函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0px;
        }
        .d1{
            height: 1500px;
            background-color: #204982;
        }
        .d2{
            position: fixed;
            right: 20px;
            bottom: 20px;
            width: 50px;
            height: 50px;
            background-color: red;
            cursor: pointer;
            line-height: 50px;
            text-align: center;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body onscroll="show();">
    <div  id="i1" class="d1">
        <div id="i2" class="d2 hide" onclick="backTop();">
            Top
        </div>
    </div>
    //通过锚 返回顶部
    <a href="#i1" style="cursor: pointer">Top</a>
    <script>
        function backTop() {
            document.body.scrollTop=0;
        }
        function show() {
            var i2 = document.getElementById('i2');
            if(document.body.scrollTop>500){
                i2.classList.remove('hide')
            }else {
                i2.classList.add('hide')
            }
        }
    </script>
</body>
</html>
View Code


其他位置比较
console.log(i1.scrollTop)  //滚动条的高度 -> 0
console.log(i1.scrollHeight) //全文的高度 height + padding ->504 + 10*2
console.log(i1.clientTop)   //边框的高度  border -> 5
console.log(i1.clientHeight) //可视的高度 height + padding ->300 + 10*2
console.log(i1.offsetTop)   //距离顶部的高度-> 50  如果父标签有position ，则相对于父标签，否则相对于body
console.log(i1.offsetHeight) //可视高度 height +padding +boder ->300 + 10*2 +5*2
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="margin: 0px">
    <div style="height: 50px;background-color: red;"></div>
    <div id="i1" style="overflow: auto;width: 300px;height: 300px;border: 5px solid palevioletred;margin: 0 auto;padding: 10px">
        <div>123</div><div>123</div><div>123</div><div>123</div>
        <div>123</div><div>123</div><div>123</div><div>123</div><div>123</div>
        <div>123</div><div>123</div>
        <div>123</div><div>123</div><div>123</div><div>123</div><div>123</div>
        <div>123</div><div>123</div><div>123</div><div>123</div><div>123</div>
        <div>123</div><div>123</div><div>123</div>
    </div>
    <script>
        var i1 = document.getElementById('i1');
        console.log(i1.scrollTop)  //滚动条的高度 -> 0
        console.log(i1.scrollHeight) //全文的高度 height + padding ->504 + 10*2
        console.log(i1.clientTop)   //边框的高度  border -> 5
        console.log(i1.clientHeight) //可视的高度 height + padding ->300 + 10*2
        console.log(i1.offsetTop)   //距离顶部的高度-> 50  如果父标签有position ，则相对于父标签，否则相对于body
        console.log(i1.offsetHeight) //可视高度 height +padding +boder ->300 + 10*2 +5*2 
    </script>
</body>
</html>
View Code

菜单固定+滚动条 （滚动菜单）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0px;
            background-color: #ddd;
        }
        .pg-head{
            height: 50px;
            background-color: black;
        }
        .pg-body .menu{
            position: absolute;
            left: 200px;
            top: 50px;
            width: 180px;
            background-color: white;
        }
        .pg-body ul{
            margin: 0px;
            list-style: none;
            padding-left: 0px;
            text-align: center;
        }
        .pg-body .content{
            position: absolute;
            right: 200px;
            top: 50px;
            width: 750px;
            background-color: gold;

        }
        .pg-body .content .item{
            height: 500px;
        }
        .pg-body .fixed{
            position: fixed;
            top: 0px;
        }
        .pg-body .active{
            background-color: #204982;
        }
    </style>
</head>
<body onscroll="scroll();">
    <div class="pg-head"></div>
    <div class="pg-body">
        <div id="menu" class="menu">
            <ul>
                <li>第一章</li>
                <li>第二章</li>
                <li>第三章</li>
            </ul>
        </div>
        <div id="content" class="content">
            <div class="item">第一章内容</div>
            <div class="item">第二章内容</div>
            <div class="item">第三章内容</div>
        </div>
    </div>
    <script>
        function scroll() {
            //获取menu标签
            var menu = document.getElementById('menu');
            //滚动条的高度
            var scrollNum = document.body.scrollTop
            //可视窗口的高度
            var windowHeight = document.documentElement.clientHeight
            //body 的高度
            var bodyHeight = document.body.offsetHeight
            // content 的高度
            var contentHeight= document.getElementById('content').offsetHeight
            //滚动条的高度大于50 将menu 固定
            if(scrollNum>50){
                 menu.classList.add('fixed');
            }else {
                 menu.classList.remove('fixed');
            }
            //获取content的孩子标签
            var content_children = document.getElementById('content').children;
            //获取menu的所有li标签
            var menu_lis = document.getElementById('menu').children[0].children;
            //当滚动条的高度+可视窗口高度==body的高度+content的高度  ： 滚动条滚动到最低端时情形
            if((scrollNum+windowHeight)==(bodyHeight+contentHeight)){
                //获取最后一个li标签
                var last_li = document.getElementById('menu').children[0].lastElementChild;
                //移除其他li标签添加的样式
                for(var i=0;i<menu_lis.length;i++){
                    var current = menu_lis[i];
                    current.classList.remove('active');
                }
                //为最后一个li标签添加样式
                last_li.classList.add('active');
                return
            }
            for(var i=0;i<content_children.length;i++){
                // 获取第i章内容的距离顶部的高度
                var toParentHeight = content_children[i].offsetTop;
                var parentToTopHeight = content_children[i].offsetParent.offsetTop;
                var toTopHeight = toParentHeight + parentToTopHeight;
                //相对高度
                var relativHeight = toTopHeight-scrollNum;
                //当前文本高度
                var text_height = content_children[i].offsetHeight;
                //所有的li标签
                var current_li = menu_lis[i];
                //如果相对高度小于0 则进入了第i章，如果绝对值的先对高度 小于文本高度，则保证依然处于第i章
                if(relativHeight<0&&-relativHeight<text_height){
                    //当前li标签增加样式
                    current_li.classList.add('active');
                    //其他的li标签移除样式
                    for(var i=0 ;i<menu_lis.length;i++){
                        if(current_li==menu_lis[i]){

                        }else {
                            menu_lis[i].classList.remove('active');
                        }
                    }
                    //匹配成功，退出
                    break;
                }
            }
        }
    </script>
</body>
</html>
View Code

　　6.其他

console.log 输出框
alert 弹出框
confirm 确认框

// URL和刷新
location.href 获取URL
location.href = "url" 重定向
location.reload() 重新加载

// 定时器
setInterval 多次定时器
clearInterval 清除多次定时器
setTimeout 单次定时器
clearTimeout 清除单次定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <input type="button" value="confim" onclick="conf();">
        <input type="button" value="geturl" onclick="geturl();">
        <input type="button" value="seturl" onclick="seturl();">
        <input type="button" value="reloadurl" onclick="reloadurl();">
        <hr>
        <input type="button" value="start" onclick="startimer();">
        <input type="button" value="stop" onclick="stoptimer();">
        <hr>
        <input type="button" value="删除" onclick="del();">
         <input type="button" value="反悔" onclick="back();">
        <div id="i1">点击删除后，我5秒消失</div>
    </div>
    <script>
        //确认提示框
        function conf() {
            var res = confirm('是否退出！');
            if(res){
                window.close();
            }
        }
        //获取当前网址
        function geturl() {
            alert(location.href);
        }
        //跳转新网址
        function seturl() {
            location.href='http://www.baidu.com';
        }
        //重新刷新网页
        function reloadurl() {
            location.reload();
        }
        //定时器开始
        function startimer() {
            //t1 设置为全局变量 ,方便其他函数访问
            t1=setInterval(function () {
                console.log('123')
            },5000);
            t2=setInterval(function () {
                console.log('456')
            },5000);
        }
        //定时器终止
        function stoptimer() {
            clearInterval(t1);
            clearInterval(t2);
        }
        //单次定时器
        function del() {
           s1= setTimeout(function () {
                document.getElementById('i1').innerText="";
            },5000)
        }
        //单次定时器终止
        function back() {
            clearTimeout(s1);
        }
    </script>
</body>
</html>
View Code

 　　7.事件

属性此事件发生在何时...
onabort 图像的加载被中断。
onblur 元素失去焦点。
onchange 域的内容被改变。
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onerror 在加载文档或图像时发生错误。
onfocus 元素获得焦点。
onkeydown 某个键盘按键被按下。
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseup 鼠标按键被松开。
onreset 重置按钮被点击。
onresize 窗口或框架被重新调整大小。
onselect 文本被选中。
onsubmit 确认按钮被点击。
onunload 用户退出页面。

　　1.注册事件

　　　　<div id="i1" onclick=""> </div>

　　　　document.getElementById('i1').onclick = function()

　　2.参数传递this， 触发当前事件的标签

　　3.参数传递event,触发当前事件的内容，KeyCode,key

　　4.先响应自定义事件，然后响应默认事件

　　　　onclick=" return func();"

　　　　function func(){

　　　　　　return false;  //默认事件不发生， 返回true  默认事件发生

　　　　}

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <form action="#">
             <input id="i1" type="text" onkeypress="keylog(event);">
             <input type="submit" value="提交" onclick="return check_submit();">
        </form>

    </div>
    <script>
        function keylog(event) {
            alert(event.keyCode);
        }
        function check_submit() {
            var i1_value = document.getElementById("i1").value;
            if(i1_value.trim().length==0){
                return false;
            }
            return true;
        }
    </script>
</body>
</html>
View Code

 

posted @ 2017-05-19 19:44  1916  阅读(104)  评论(0)    收藏  举报