学习webAPI第四天

为元素绑定事件
对象.addEventListener(“事件的类型”, 事件的处理函数 , false) ie8不支持
参数1: 事件的类型–>事件的名字,没有on
参数2: 事件的处理函数–>匿名函数/ 命名函数
参数3: 布尔值, 目前写false 默认值就是false
对象.attachEvent(“有on的事件类型”,事件的处理函数) ie8特有谷歌和火狐不支持

解绑的方法 removeEventListener(“要解绑的事件”,解绑的函数,布尔值)
被解绑的对象.detachEvent(有on的解绑事件, 要解绑的函数)

操作表格
代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .a1{
            width: 208px;
            height: 20px;
            text-align: left;
            line-height: 20px;
        }
        .a2{
            width: 100px;
        }
    </style>
</head>
<body>
<table border="1px" cellspacing="0" id="tables">
    <tbody id="tb">
        <tr>
            <td class="a1">书名</td>
            <td class="a2">价格</td>
        </tr>
        <tr id="tr2">
            <td>看风景的房间</td>
            <td>&yen;30.00</td>
        </tr>
        <tr>
            <td>60个瞬间</td>
            <td>&yen;32.00</td>
        </tr>
    </tbody>

</table>
<input type="button" value="增加一行" id="btn1">
<input type="button" value="删除第二行" id="btn2">
<!--<input type="button" value="删除某行" id="btn3">-->
<input type="button" value="修改标题样式" id="btn4">
<input type="button" value="复制最后一行" id="btn5">
<script src="common.js"></script>
<script>
    my$("btn1").onclick=function () {
        var tr=document.createElement("tr")
        my$("tb").appendChild(tr);
        var td=document.createElement("td")
        tr.appendChild(td);
        td.innerHTML="世界未解之谜";
        var td2=document.createElement("td")
        tr.appendChild(td2);
        td2.innerHTML="&yen;40.00";
    }
    my$("btn2").onclick=function () {
        my$("tb").removeChild(my$("tr2").nextElementSibling)
    }

    my$("btn4").onclick=function () {
        var td=document.getElementsByTagName("td")
        console.log(td);
        td[0].style.fontSize="20px"
        td[0].style.textAlign="center"
        td[0].style.backgroundColor="red";
        td[0].style.color="glod"
        td[1].style.fontSize="20px"
        td[1].style.textAlign="center"
        td[1].style.backgroundColor="red";
        td[1].style.color="glod"
    }
    my$("btn5").onclick=function () {
        var tr=my$("tb").getElementsByTagName("tr")
        var trs=tr[tr.length-1].cloneNode(true)
        my$("tb").append(trs)
    }
</script>
</body>
</html>

绑定和解绑
代码

//解绑
    //定义  为任意的一个元素解绑对应的事件
    function removeEvent(element, type, fnName) {
        if (element.removeEventListener){
            element.removeEventListener(type,fnName,false)

        } else if (element.detachEvent) {
            element.detachEvent("on"+type,fnName)
        }else {
            element["on"+type] = null;
        }
    }
    //绑定
    function addEvent(element, type, fn) {
        //判断浏览器是否支持这个方法
        if (element.addEventListener){
            element.addEventListener(type,fn,false);
        }else if (element.attachEvent){
            element.attachEvent("on"+type,fn)
        }else {
            element["on"+type] = fn;
        }
    }

元素相关方法
代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<input type="button" value="显示效果" id="btn1">
<input type="button" value="干掉第一个子元素" id="btn2">
<input type="button" value="干掉所有的子元素" id="btn3">
<input type="button" value="替换" id="btn4">
<input type="button" value="克隆" id="btn5">
<div id="dv"></div>
<script src="common.js"></script>
<script>
    var i=0;
    //添加
    my$("btn1").onclick=function () {
        i++
        var obj=document.createElement("input")
        obj.type="button"
        obj.value="按钮"+i
        // my$("dv").appendChild(obj)
        //添加到第一个子元素的前面
        //insertBefore(要添加的子元素,添加到某个子元素的前面)
        my$("dv").insertBefore(obj,my$("dv").firstElementChild)
    }
    //干掉第一个子元素
    my$("btn2").onclick=function () {
        //  removeChild(移出的元素)
        my$("dv").removeChild(my$("dv").firstElementChild)
    }
    //干掉所有的子元素
    my$("btn3").onclick=function () {
        //循环删掉第一个子元素
        while (my$("dv").firstElementChild){
            my$("dv").removeChild(my$("dv").firstElementChild)
        }
    }
    //替换子元素
    my$("btn4").onclick=function () {
        var newText = document.createElement("a");
        newText.innerHTML = "好困";
        // 替换  replaceChild(新元素, 要替换的元素)
        my$("dv").replaceChild(newText,my$("dv").firstElementChild)
    }
    //  克隆  复制  要克隆的元素cloneNode(要复制的元素)
    //  点击克隆  显示效果的按钮
    my$("btn5").onclick=function () {
        var inp = my$("btn1").cloneNode(true)
        console.log(inp);
        my$("dv").appendChild(inp)
    }

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

猜你喜欢